nteract / semiotic Goto Github PK
View Code? Open in Web Editor NEWA data visualization framework combining React & D3
Home Page: https://semioticv1.nteract.io/
License: Other
A data visualization framework combining React & D3
Home Page: https://semioticv1.nteract.io/
License: Other
Only a dev dependency
Here is the code snippet I tried to create a chart similar to bullet chart, I tried to pass a legend object into the ORFrame like this:
return <ORFrame
size={[ 500,100 ]}
data={data}
axis={axis}
projection={'horizontal'}
type={'bar'}
rExtent={[0,1000]}
style={d => {return {fill: d.colour}}}
oLabel={d => <text transform="translate(-75,28)">your {d}</text>}
oPadding={20}
oAccessor={d => d.name}
rAccessor={'value'}
margin={{ left: 85, top: 100, bottom: 50, right: 30 }}
hoverAnnotation={true}
annotations={exampleAnnotations}
legend={{ styleFn: d => ({ fill: d.color, stroke: "black" }), items: [
{ label: "Area 1", color: "red" },
{ label: "Area 2", color: "blue" }
]
}}
/>
but got this error:
Uncaught TypeError: Cannot read property 'forEach' of undefined
at Legend.render (eval at <anonymous> (bundle.js:3793), <anonymous>:86:19)
at eval (eval at <anonymous> (bundle.js:1795), <anonymous>:795:21)
at measureLifeCyclePerf (eval at <anonymous> (bundle.js:1795), <anonymous>:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (bundle.js:1795), <anonymous>:794:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (bundle.js:1795), <anonymous>:821:32)
at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (bundle.js:1795), <anonymous>:361:30)
at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (bundle.js:1795), <anonymous>:257:21)
at Object.mountComponent (eval at <anonymous> (bundle.js:1429), <anonymous>:45:35)
at ReactDOMComponent.mountChildren (eval at <anonymous> (bundle.js:1765), <anonymous>:236:44)
at ReactDOMComponent._createInitialChildren (eval at <anonymous> (bundle.js:1633), <anonymous>:703:32)
The whole code snippet is like below:
import React, { Component } from 'react';
import { ORFrame, Legend } from 'semiotic';
export default class App extends Component {
render() {
const axis = {
orient: "bottom",
tickFormat: d => d,
tickValues: [0, 500, 1000],
padding: -10
};
const data = [
{
"colour":"lightblue",
"name":"score",
"value":800,
},
{
"colour":"lightgrey",
"name":"score",
"value":1000-800,
}
]
const exampleAnnotations = [
{"offset":40,"dy": -20,"dx":10,"value":430,"type":"r","label":"average score 430"},
{"offset":40,"dy": -20,"dx":10,"value":800,"type":"r","label":"your score 800"}
]
return <ORFrame
size={[ 500,100 ]}
data={data}
axis={axis}
projection={'horizontal'}
type={'bar'}
rExtent={[0,1000]}
style={d => {return {fill: d.colour}}}
oLabel={d => <text transform="translate(-75,28)">your {d}</text>}
oPadding={20}
oAccessor={d => d.name}
rAccessor={'value'}
margin={{ left: 85, top: 100, bottom: 50, right: 30 }}
hoverAnnotation={true}
annotations={exampleAnnotations}
legend={{ styleFn: d => ({ fill: d.color, stroke: "black" }), items: [
{ label: "Area 1", color: "red" },
{ label: "Area 2", color: "blue" }
]
}}
/>
}
}
In the XYFrame wiki docs, the axes link should link to #axes-array instead of #axes---
https://github.com/emeeks/semiotic/wiki/XYFrame
Too bad you can't submit PRs against the wiki. I'd love to help with this if I can get access.
On Windows 10, I did:
npm i -g react-create-app
react-create-app myapp
cd myapp
npm i -S semiotic
Then I created the DivergingStackedBar component, modified App.js into:
import React, { Component } from 'react';
import DivergingStackedBar from './DivergingStackedBar';
import './App.css';
class App extends Component {
render() {
return (
<DivergingStackedBar />
);
}
}
export default App;
And got errors on _react.PropTypes being undefined.
This seems to have changed since react v15.5.
To get the example working I had to:
npm remove react
npm i -SE [email protected]
npm remove react-dom
npm i -SE [email protected]
npm start
I created an ORFrame with following prop:
title={'ORFrame'}
This is the relevant part of the resulting SVG:
<g><!-- react-text: 206 -->ORFrame<!-- /react-text -->
<g transform="translate(0,415)">
<g transform="translate(95,0)"><text transform="rotate(90) translate(0,0)">08/28</text></g><g transform="translate(185,0)"><text transform="rotate(90) translate(0,0)">08/29</text></g><g transform="translate(275,0)"><text transform="rotate(90) translate(0,0)">08/30</text></g><g transform="translate(365,0)"><text transform="rotate(90) translate(0,0)">08/31</text></g><g transform="translate(455,0)"><text transform="rotate(90) translate(0,0)">09/04</text></g><g transform="translate(545,0)"><text transform="rotate(90) translate(0,0)">09/05</text></g><g transform="translate(635,0)"><text transform="rotate(90) translate(0,0)">09/06</text></g><g transform="translate(725,0)"><text transform="rotate(90) translate(0,0)">09/07</text></g><g transform="translate(815,0)"><text transform="rotate(90) translate(0,0)">09/10</text></g><g transform="translate(905,0)"><text transform="rotate(90) translate(0,0)">09/11</text></g>
</g>
</g>
This could definitely be me doing something wrong, but I've been trying to make this work all day with no luck.
I want to position an annotationCalloutRect using the data and not raw x/y coordinates.
const mileAnnotations = [
{ type: annotationCalloutRect,
y: 10, x: 460,
dx: -150,
dy: 150,
note: { label: "Great recession", align: "left", wrap: 100},
subject: { width: 10, height:165 }
}
];
When I try to do the same thing with a data property, it breaks.
const mileAnnotations = [
{ type: annotationCalloutRect,
data: {x:2008,y:1500},
dx: -150,
dy: 150,
note: { label: "Great recession", align: "left", wrap: 100},
subject: { width: 10, height:165 }
}
];
Other annotation types seem to be able to do this, but not annotationCalloutRect.
Doesn't have the correct transform
value.
Hello,
I would like to thank you first for the awesome visualization library. My question is how do I show the tooltip of a value in the heatmap. Tried setting the tooltipContent
on ORFrame
, however no tooltip is shown.
It would be great if you show some examples on how do we add the tooltip.
The first piece position should always start at 12 o'clock and shouldn't move based on margin, seriously wtf?
Can I adjust the stroke width from here?
<ORFrame
connectorType={d => d.type}
connectorStyle={d => ({ fill: d.source.color, strokeWidth: 10 })}
/>
strokeWidth: '10'
doesn't appear to do much either.
Some of the examples show thick line connecting the points. I'd like to replicate that.
Semiotic uses array position as the default render key, which is fine for basic charts, but there needs to be some examples showing how to define renderKey so that animated examples properly link to each other.
Hi the website hangs(seems an infinite loop) at the XYFrame example page https://emeeks.github.io/semiotic/#/semiotic/xyframe when I try to change the fixed extent param .
Seems affected by only with the line
data type
HI I just installed semiotic
as I wanted to evaluate how I could create simple visualizations using Semiotic framework.
Here's the code I created for a simple AreaChart:
import React from 'react'
import { XYFrame } from 'semiotic'
console.log( 'XYFrame', XYFrame)
const AreaChart = (
colors = [],
data = [],
height = 400,
marginTop = 60,
marginRight = 20,
marginBottom = 60,
marginLeft = 60,
width = 700,
xAccessor = 'x',
yAccessor = 'y'
) =>
<XYFrame
size={[ width, height ]}
lines={ data }
lineStyle={ d => ({ fill: d.color, fillOpacity: 0.5, stroke: d.color, strokeWidth: '3px' }) }
xAccessor={ xAccessor }
yAccessor={ yAccessor }
margin={{
top: marginTop,
right: marginRight,
bottom: marginBottom,
left: marginLeft
}}
axes={[
{ orient: 'left', tickFormat: d => d },
{ orient: 'bottom', tickFormat: d => d }
]} />
export default AreaChart
console.log
line returns undefined
so I'm wondering if npm package is actually exporting modules properly. Am I doing something wrong?
I am using the latest version of semiotic (1.1.3) React 16.0, Webpack 3 with NodeJS v.8.6.0. I am using other 3rd-party npm packages with this setup, but I only see this error with semiotic, so I suspect that import { XYFrame } from 'semiotic'
even though it seems right and documentation shows that this is how modules should be imported from semiotic is problematic as it stands.
Not sure if this is a philosophical issue or not. Is there a way to use two axes in the same XYFrame for two lines?
eg.
Scale one line 0-100 and another 0-1 but overlay them on top of each other. I can obviously do this with separate frames, but it seems like it should be possible with one frame.
Frame props should have some defaults, especially size, which could have a simple [500,500] default.
Mostly just an FYI.
I saw your talk where you presented this and then went to the website to try the examples you presented. So I assumed I should click "API Docs" or "Tutorials" but they both take you to the github wiki. Because I specifically remember examples on the website, I then recalled there being a menu on the left, so I only then started to look around and noticed the hamburger menu icon.
Maybe most will notice it..just an FYI that I only went looking for it because I knew those examples were somewhere, but others may only look at the API Docs and Tutorials since those buttons are prominent.
Simple solution would be to always show the side menu and maybe move the API Docs and Tutorials buttons into there too. Or you can ignore me hehe. ๐คก
Add examples in the interactive documentation that show the code for minimal, effective traditional charts:
Icon-based stackable bar charts should be an available type
in ORFrame.
The download feature in the XYFrame doesn't receive x/yAccessors.
Looks like they aren't being passed to xyDownloadMapping
as expected
https://github.com/emeeks/semiotic/blob/master/src/components/downloadDataMapping.js#L10
Example:
<XYFrame
{...sharedProps}
className="line-xy"
lineStyle={(d) => {return {stroke:d.color, strokeWidth: '2.5px'}}}
lines={this.formatData(this.props.data)
.filter((d)=>{return this.state.filterIndex.indexOf(d.id) === -1})}
axes={axes}
lineDataAccessor={(d)=> d.data}
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
//lineRenderMode={"sketchy"}
hoverAnnotation={true}
download={true}
//defined={(d) => d !== null}
tooltipContent={(d) => {
return this.fetchTooltipContent(d);
}}
/>
I suspect this is an issue in the OR frame as well.
Similarly, is there a way to pass a data accessor tonetworkNodeDownloadMapping
/ networkEdgeDownloadMapping
?
Check to make sure areaRenderMode is rendering sketchy properly.
In XYFrame, axis can get class="axis undefined" when not sent a className.
It would be helpful for the points
option on download
to be able to accept a function to format the exported data
ex:
<XYFrame>
{...someProps}
download={{
type : 'points',
mapper : (d)=> {
d.x = new Date(d.x).toString()
d.y = someOtherFormatter(d.y)
return d
}
}}
</XYFrame>
https://github.com/emeeks/semiotic/blob/master/src/components/XYFrame.js#L69
It would be great to have a simple, minimal example of a minimap for an XY Frame.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
npm WARN [email protected] requires a peer of babel-eslint@^7.0.0 but none was installed.
npm WARN [email protected] requires a peer of eslint@^3.8.1 but none was installed.
npm WARN [email protected] requires a peer of eslint-plugin-react@^6.4.1 but none was installed.
npm WARN [email protected] requires a peer of eslint@>=1.6.0 <4.0.0 but none was installed.
npm WARN [email protected] requires a peer of [email protected] - 3.x but none was installed.
npm WARN [email protected] requires a peer of eslint@^2.10.2 || 3.x but none was installed.
Talking with @emeeks, there is code for zooming in on data in an XY Frame, but an example and documentation needs to be built.
I'm seeing this in NMDash in the summaryLine annotations if you need an example.
The array has too many brackets
npm notice created a lockfile as package-lock.json. You should commit this file.
Hey great work on the lib, it looks really promising.
I tried to go through the example which i found here.
Which was working fine when using the dataset without any dates, but when I switched over to using the dataset with dates I received the error below which I found hard to trace.
This is the snippet I was using
// data for the graph
const data = [
{ id: 'linedata-1', color: '#00a2ce',
data: [
{ sales: 500, timestamp: Date(2017, 7, 1) },
{ sales: 700, timestamp: Date(2017, 7, 2) },
{ sales: 0, timestamp: Date(2017, 7, 3) },
{ sales: 0, timestamp: Date(2017, 7, 4) },
{ sales: 200, timestamp: Date(2017, 7, 5) },
{ sales: 300, timestamp: Date(2017, 7, 6) },
{ sales: 500, timestamp: Date(2017, 7, 7) }
]
},
]
//graph div
<XYFrame
size={[500, 700]}
lines={data}
xAccessor="timestamp"
yAccessor="sales"
xScaleType={scaleTime()}
lineDataAccessor="data"
lineStyle={d => ({ stroke: d.color, fill: d.color })} />
For the green and red lines in this chart, I don't have data prior to 1982, so those values are null in my dataset. Semiotic still plots them at the bottom of the y axis. I tried making the line formatting conditional to hide them, but that didn't seem to work.
Is this considered a bug or is there a way around it?
If I set rExtent={[0,1]}, then the domain reverts to the min and max of the dataset (my data in this example are between 0 and 1).
If I set rExtent={[0]} (or rExtent={[0, undefined]}), then the domain extent correctly sets to 0 and the max of the dataset.
This occurs when I set type: "point". If I set type: "bar", then rExtent={[0,1]} works fine, ie domain extent sets to 0 to 1.
rExtent seems to fail in ORFrame with point and bar types
Provide an option to set a true north for radial bar charts that are wind roses.
Check point and swarm in radial to make sure the values are being drawn from 0/360 degrees for first value.
When I try to use a ResponsiveXYFrame
I get warnings from react-dimensions
about the wrapper div having no dimensions:
Wrapper div has no height or width, try overriding style with `containerStyle` option
And an error from ResponsiveFrame
at line 71:
Uncaught TypeError: Cannot set property '0' of undefined
As far as I can tell, because of how the responsive frames are created, there's no way to for me to pass in containerStyle
to react-dimensions
. I have however tried setting minimum widths and heights on the wrapper div in CSS and I still get this same error.
summaryType "boxplot" should take an additional property that styles the individual pieces. Separately.
Boxplot should also split out the "above" and "below" quartile ranges into two separate pieces.
Rather than supporting a "dendrogram" or "tree" or "cluster" NetworkType, expose functionality in NetworkFrame to accept pre-calculated positions and demonstrate functionality by passing data processed by D3 hierarchical layout functions to build equivalent dendrograms.
Talking with @emeeks, it would be great to expose an axis helper for all summary types in OR frame. One current use case is a simple histogram. An exposed axis helper is necessary to create a y-axis for the counts of the histogram.
All the sankey settings need to be available in the sankey networkType.
Like BarLineChart, which should have lineRenderMode
as the displayed code.
When you try navigating to https://emeeks.github.io/semiotic/#/semiotic/violin you get redirected to main page. There's no errors in console.
Add support for "line" you have y1, an accessor function that lets you draw the bottom/top of a line so that a user can send something like:
{ type: "line", y1: () => 0 }
to create zero-bottom lines or:
{ type: "line", y1: d => d.value + 5 }
to create ribbon-like lines.
I would like to create a component that can be used to select a timerange using semiotic. What I have in mind is a "line chart" with a time axis, to which I want to add a Brush. I cannot find any example on how to do that. I have this:
const timeRangeData = [
{
id: "timeRange",
color: "blue",
data: [{ px: new Date(2016,6,1,0,0,0), py: 1 }, { px: new Date(), py: 1}]
}
]
<XYFrame
xScaleType={scaleTime()}
yExtent={[0,2]}
xAccessor={'px'}
yAccessor={'py'}
lineDataAccessor={'data'}
lineStyle={d => ({
stroke: d.color,
strokeWidth: "30px",
opacity: 0.2,
})}
size={[1000,200]}
lines={timeRangeData}
margin={{ left: 50, top: 20, bottom: 70, right: 50 }}
axes={[
{
orient: "bottom",
tickFormat: d => moment(d).week()
}
]}
/>
How do I add the interactivity?
Support enclosure signaling for hierarchical data in NetworkFrame, either through networkType
support of "circlePack" and "treeMap" or more integrated support that allows for enclosure signals mixed with connection signals.
I think this is actually a UI bug, as opposed to something I'm misunderstanding.
When I use a legend of type 'line' with ORFrame of type 'point', the transform applied to the legend-item
group is translate(0,45)
. The legend divider touches the first diagonal legend line in the legend.
You can see this in the first svg linked below. If I change the transform to translate(0,55)
, then you get the second svg linked below, which looks OK to me.
Let me know if you want me to put together a minimal working example.
Would be helpful to know OR meant Ordinal x Range. Had to click through to the API docs to find out.
Tooltip content should take a string and just wrap it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.