1

Link to sample image with tilting graph:

enter image description here

Link to NVD3 Streamgraph page:

enter image description here

The nvd3 streamgraph will descend or ascend sharply over time. I searched SO and the NVD3 documentation but didn't find a variable that controls where the zero of the y axis is at each point in time. Nor have I found discussions of this. In other words what makes the whole graph tilt in one direction or the other and how to control or turnoff this tilt.

I read a bit of the initial paper on streamgraphs by Byron but couldn't figure it out and thought I'd ask here.

Could someone please point me towards documentation on this or otherwise provide insight?

VividD
  • 10,456
  • 6
  • 64
  • 111
anjarp
  • 67
  • 1
  • 6
  • Not sure what you mean -- the y scale should remain constant over time, i.e. 0 is always at the same y position. Any ascent or descent would be in the data. – Lars Kotthoff Jan 16 '14 at 20:50
  • 1
    Can you post the code with the NVD3 options you used to create that image? It's possible that the data is still centred, but one of your areas is drawn in white... – AmeliaBR Jan 16 '14 at 22:54
  • Here's the code: http://pastebin.com/wuxpRE48 Thanks @LarsKotthoff and AmeliaBR. Basically when I select an individual variable, take "F", for example, in stream format, the graph center descends from 5 towards zero. Its this descending 'tilt' of the axis, which I can't figure out what part of the data its based on. i.e. what does it mean for one instance of "F" to be higher on the Y axis than another? Thanks!! – anjarp Jan 17 '14 at 14:54
  • I can reproduce your problem, and I suspect it is caused by the large number of null values in your data -- the centre line gets thrown off whenever the area goes to zero. Even if I change the y-accessor function to `.y(function(d) { return d[1]||0 })` so that you get 0 instead of null, it still throws off the calculation of the area. D3 has a method for identifying and excluding null values in an area/line graph and breaking the path into sub-regions accordingly, but I'm not sure how it is implemented in NVD3. I'll get back to you if I figure it out... – AmeliaBR Jan 17 '14 at 21:55
  • Are you okay with the graph *only* being a streamgraph? (I.e., without having the option to switch to a normal stacked graph.) Because if so, setting the following options seems to work: `chart.style('stream-center').showControls(false);`. I'm not sure why they have two different algorithms for figuring out stream graphs, and why the other algorithm (which you get with `chart.style('stream')`) is the default attached to the control button, but you might want to send them an issue notice. – AmeliaBR Jan 17 '14 at 22:17
  • Fantastic! Thanks @AmeliaBR. The way the chart looks with showControls(false) is precisely what I was looking for. I wonder if it is a bug, or if the slanted y axis for the default nvd3 chart with multiple options is intended. I'll send an issue report referencing this SO thread but am going to leave this question open for a bit in case there is a way to easily get the correct streamgraph with the selections included. – anjarp Jan 18 '14 at 16:23
  • @AmeliaBR if you can repost your comment as an answer I'd like to accept it. At this point, I'm assuming that the real answer is that this is a bug, and your discover that it works when in steam-graph-alone mode is an effective solution for me. – anjarp Jan 22 '14 at 20:48

1 Answers1

0

The NVD3 code for the stacked area chart accepts four possibilities for the chart style: stack, stream, stream-center, and expand. The default stream graph is the "stream" style, and this is the version that gets off-centre if you have any zero values in your data.

If you set the style explicitly to "stream-center", the chart behaves as expected. However, the radio buttons that switch between display styles switch back to the problematic algorithm, so they will need to be disabled.

chart.style('stream-center')
     .showControls(false);

It's possible that the existence of this other display algorithm means that the NVD3 folks are working on it. The github issue page might be a good place to look for updates or responses from them:

https://github.com/novus/nvd3/issues/416

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119