In order to visualize the lost data/money/visitors, we should be able to show "dropoffs" on the sankey diagram (Google Analytics has a great example). Current d3-sankey does not support this behavior. Most likely we'll have to fork/adjust it.

This task should be implemented after #34.

Label field on bubble chart - now you can make cool bubble charts, but you are not able to understand what this specific bubble stands for without clicking on it

Hello, great work on this library.

I'm wondering if it is possible, or if you would like to add, some kind of API for using components such as LineSeries etc directly, rather than making them part of some explicit plot wrapper. The use case for this is if a user (such as myself) would like to draw them onto an existing SVG or combine them with custom SVG components that are not part of this library. For example I work on a chart-making tool and we'd like to add custom elements such as labels to the chart, but currently react-vis takes responsibility for the entire SVG.

Perhaps this API is there already, and can e.g. be used by passing all of these props to each series type, only that they are not documented as part of propTypes?

_getClonedChildComponents() {
  const {animation} = this.props;
  const {scaleMixins, data} = this.state;
  const dimensions = getInnerDimensions(this.props);
  const children = React.Children.toArray(this.props.children);
  const seriesProps = getSeriesPropsFromChildren(children);
  return children.map((child, index) => {
    const dataProps = data[index] ? {data: data[index]} : null;
    return React.cloneElement(child, {
      ...dimensions,
      animation,
      ...seriesProps[index],
      ...scaleMixins,
      ...child.props,
      ...dataProps
    });
  });
}

When trying to plot more than five line series i find that each additional series greater than five doesn't render. This appears to be because react-vis is wrapping the data so that given six line series, what you would expect would be:

<lineseries data=data_1>
<lineseries data=data_2>
<lineseries data=data_3>
<lineseries data=data_4>
<lineseries data=data_5>
<lineseries data=data_6>

<lineseries data=data_1>
<lineseries data=data_2>
<lineseries data=data_3>
<lineseries data=data_4>
<lineseries data=data_5>
<lineseries data=data_1>

When data of the series has same y values, the height of bars are calculated as 0. It also happens when there is only one bar in data.

Let's say we start with one node, attach a click listener in which it will fetch some data, then we will expand that "graph map" with more edges connected with these other nodes that we get from our new data.

Right now, the bar widths are automatically calculated, but there's no way to override it.

This is particularly useful for histograms.

Clicks are not currently implemented

When I set opacity to any value for the pie chart I get a console error:

Cannot use data defined opacity for this seriestype. Using fallback value instead.

What is the recommended approach to accomplish this?

Best regards,
Alex

Tried to upgrade from 0.1.1 to 0.3.1 but had to revert.

Got a crash in collectSeriesTypesInfo when it tried to process my application's nested array of XYPlot children.

Perhaps some higher level code is not first calling getSeriesChildren?

Currently we have a big need to show the flow of step by step changes. Sankey Diagram is a good way to visualize it.

I think, we should use d3-sankey for this purpose, but before that we should upgrade to [email protected] (see #29 for detail).

I'm using a FlexibleXYPlot that renders correctly when not specifying yType. However, as soon as I add yType: 'log', to the definition it starts throwing these errors in the JS console:

I'd like to do some exercises of react-vis, but some issues happened.

1.The LineSeries doesn't look like same as 'http://uber.github.io/react-vis/' provided. Just like as the attachment image.

2.The VerticalBarSeries doesn't display normally, It only has coordinate like as the attachment image.

Other series and radial work fine. All the example codes come from the 'src/example' file directory.

Some suggestions: Could you provide the example codes for each chart in 'http://uber.github.io/react-vis/' or build online editors in jsfiddle?

I tried out the example provided at https://github.com/uber-common/react-vis/blob/master/src/example/plot/line-chart.js

It renders as https://i.imgur.com/efmrQBg.png when I try it out.
Does any one know whats up ?

Currently the components' event listeners are assigned via d3 either at componentDidMount or at componentDidUpdate. The usage of d3 definitely helps: the event handler automatically gets the values associated with the DOM node, but these event listeners are not testable.

Thus, we should move the components' event listeners to the render function.

For both area and line charts it appears that there is a render issue such that react-vis requries a consitant number of elements. For instance, say we were render three line series:

<XYPlot> <series 1> <series 2> <series 3> </XYPlot>
and then add grid lines

<XYPlot> <grid> <grid> <series 1> <series 2> <series 3> </XYPlot>

More likely than not series 3 would not appear

The y-axis lacks a tickmark when data is constant. I'd expect the line series to be vertically in the xyplot with 1 tickmark & gridline at the value specified.

<XYPlot
  width={600}
  height={300}>
  <HorizontalGridLines />
  <LineMarkSeries
    color='blue'
    data={[ {x: 1,y:10}, {x: 2, y:10}]}/>
  <XAxis />
  <YAxis />
</XYPlot>

broken from #104 .

The functionality exists, but not shown anywhere besides docs. It'll be great to have it on the page.

Please provide an example of how to use fill scale and innerRadius scale. Here's how I tried to do it. It didn't work as expected. I couldn't find any examples about the same.

<RadialChart
  radiusDomain={[0,20]}
  innerRadiusDomain={[5,9]}
  data={[
    {angle: 2, fill: '#1a3141', radius: 10, innerRadius: 7},
    {angle: 7, fill: '#ff6f00', radius: 10, innerRadius: 7},
    {angle: 5, fill: '#1a3242', radius: 10, innerRadius: 7}
  ]}
  width={300}
  height={300} />

livereactreload overwrites displayName while it proxies React components. This fails since react-vis uses a static getter to define the displayName attribute. As alternative to static get displayName() it would be great if we could either rely on auto deduction of displayNames or just assign them after the class declaration:

class Component extends React.Component {
  ...
}
Component.displayName = 'Component';

Upgrade to d3 4.0 will help us to make our codebase smaller and more extensible.

There are several most frequent errors made by users that should be checked:

• nulls or undefineds in the data properties;
• mismatching x properties for stacked charts;
• negative or zero values for log scales.

It looks like recent versions of react-addons-shallow-compare (15.x.x) cause peer dependency problems:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.2
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8

There's either some misconfiguration of the animated treemap or too fast animation for the cells: the animation is not visible for on the example page.

they get rendered as a rv-xy-plot__axis g element.

The bars have the 0 height in following case

<XYPlot, {
      width: 900,
      height: 250,
      yDomain: [0, 9367]
}>
  <VerticalBarSeries, {
    data: [{x: 0, y: 9367}, {x: 1, y: 184}]
  } />
  <XAxis />
  <YAxis />
</XYPlot>

The pie chart yields a bunch of console errors like this

d3.js:8756 Error: Invalid value for <path> attribute d="M109.35191368826634,412.2430898706445A426.5,426.5 0 0.000006912,1 -225.26700899816143,362.14965805466653L-144.9842766002235,233.08532321974673Z"

when animation is on and the number of segments is increasing or decreasing. This doesn't appear to affect the functionality of the chart, but is a little worrisome.

Typo in the title of:
react-vis/src/example/plot/scatteplot.js

This causes weird artifacts such as the chart resizing itself on re-render if the same config object is used on each render.

Using offsetLeft actually offsets the hint in the opposite direction (pushing it more towards left as it's increased) when the tip is positioned with topright because it's added to the css right property.

We can either also accept offsetRight or offsetBottom (which would be less ambiguous and offer more control, or subtract instead of add offsetLeft and offsetTop in the case of right and bottom orientations.

/cc @chrisirhc

var data = child.props.data; on line 109 of series-utils.js will fail if the XY-Plot maps data into children such as this case:

{dataSets.map((set, index) => {
  return (
    <LineSeries
      key={index}
      data={set.points}
      onNearestX={this.onNearestX.bind(null, set.name)}
      color={colorMap[set.name]} />
  );
})}

Custom fonts are quite heavy, they are loaded from the external place (this doesn't seem right). We should remove this from main.scss and place them into the examples.

There’s an obvious way to use charts when the axes are intersecting in the center of the visualization (instead of bottom and left sides). It might be very helpful for some statistical data.

Quick question I was going through some of the source and examples, when charting line series and the like does you data keys need to be in the format x/y?

data={[
  {x: '..', y: '..'},
   ...
]}

Current way to organize margin enforces the user to pass all four margins (left, right, top and bottom) in the single margin property. It's better to have marginLeft, marginRight, marginTop and marginBottom properties instead.

E. g. instead of having

<XYPlot margin={{left: 20, right: 20, top: 10, bottom: 10}} />

we should have this (in case if we want to override just one of them)

<XYPlot marginLeft={20} />

Right now I try to make a graph with X part of the dataset to be js Date objects. The graph renders horribly in that case. An example for xScale='time' would be very useful.

https://i.imgur.com/uvJS4tV.png

I've been pondering this for the last couple days, working out a means of building a legend with interactivity hooks into the existing XY chart series.

Perhaps something like this could work as a starter - wrapping a higher order component around the series components. This component would essentially be an interface rendering a 'default legend' and include event handlers to do things like filtering on selection of a specific series.

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <Legend onSelection={this.onSelection} style={style}>
    <LineSeries
      color='red'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
    <LineSeries
      color='blue'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
  </Legend>
  <XAxis />
  <YAxis />
</XYPlot>

Originally reported by @harishkraman

I'd like to be able to have complete style control on the series. two ways that could be done:
passing a style argument to the series, with an object that d3 could just assign to the style.
also, I'd like to be able to pass specific classes to series. I'm thinking we can just pass a string with a class name to add to begin with, and if needs be be more specific. But being able to have full, css-like access to each individual series would be really nice.

Currently only basic functionality of components is checked. We need better tests for the components.

It'd be cool to be able to isolate the CSS classes with a prefix of our choosing.
Is this something you'd be interested in incorporating if we submit a PR?

The bar widths seem to be incorrectly calculated

The algorithm shouldn't be producing widths where there would be bars that overlap.