[capkutay]

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3.

I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work.

D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because they have this out of the box.

However, I want a library that lets me make visualizations that I can run on my monitor for 10 days straight without running into obscure bugs. Rickshaw failed me in this regard. I have a caching scheme in my client-side application. Rickshaw has its own local copy of data which requires the developer to write custom, messy javascript to evict. I found that rickshaw actually has some custom 'sliding window' logic. I was unhappy because I had to go to stackoverflow to discover that feature rather than using the documentation.

nvd3.js simply worked for me.

[thorway-rick]

  > rickshaw actually has some custom 'sliding window' logic. 
  > I was unhappy because I had to go to stackoverflow to
  > discover that feature

The third example[0] on the Rickshaw "examples" page[1] is called "Interactive Real-Time Data", and shows the RangeSlider extension (and many more extensions) in use.

The rickshaw docs are heavy on usage, light on specification. That's a style I very much appreciate, but I also appreciate that it's not for everyone.

I also appreciate that its API doesn't make you take the range slider with you, if you don't want it. It's all additive, and you can go both directions (keep adding bits and blobs to the interface via plugins, or reach down into the D3 and SVG bits, or your data. Nothing is opaque there.)

What was your obscure bug with a long running Rickshaw? I have long running sliding window time series stuff that I typically run for as long as a Chrome release lasts, and it stays snappy.

0: http://code.shutterstock.com/rickshaw/examples/extensions.ht...

1: http://code.shutterstock.com/rickshaw/examples/

[thom_nic]

Does anyone know of a chart lib has the ability to make a "stacked" area chart where each series gets its own Y-axis, similar to cubism.js?

I like how cubism visualizes streams of data where each needs its own Y-axis but they are related on the X axis (usually a time domain.) However cubism's mechanism of updating is sort of weird, and each value needs to be one pixel. I tried to use d3's "streams" example but quickly got lost there.

On another note, I've had good luck using Rickshaw and updating the `graph.series[i].data` array using shift and push then re-calling `graph.render()`. This is what Rickshaw's `FixedDuration` appears to do under the covers (see source of this example http://code.shutterstock.com/rickshaw/examples/fixed.html) - but I don't actually use FixedDuration, just update the data array.

[thorway-rick]

I think of those stacked charts as a stack of multiple charts that happen to share a timeline. With rickshaw I just stack a bunch of graphs on top of each other in the page, and give the bottom one an X axis.

[thom_nic]

Yup that's what I'm doing now as well.

The only downside to that strategy is you can't e.g. show a single y-axis with values for each chart when you hover over one the way cubism can. This is really handy for comparing values across series. Actually I just found a d3.horizon module which might do what I want, but I need to see if I could get multiple charts to share the same axis.

Maybe I should just go back to cubism but it doesn't really make sense when you don't have thousands of values that you want to be 1px wide.

[flashman]

We use nvd3 in an analytics dashboard with some success, and some troubles. Simple Excel-like behaviour, such as rotating the axis labels so they don't overlap, require lots and lots of tweaking.

Default bar/column chart settings occasionally give mystifying results, like the highest value in the chart plotting above the highest axis value (e.g. 23,600 plots above 22,000 instead of between 22-24k).

I'm sure we'll solve these issues, but they are eating up a bit of developer time for things we're used to having work out-of-the-box in something like Excel.

[Systemic33]

Does nvd3 have any documentation besides some basic examples? while c3 doesn't have a completely documented API atm, it atleast has a very extensive set of examples.

[trose]

Check out c3 v0.3.0's source code. It's the closest thing to self documenting code I've seen so far. Any holes in the docs have been cleared up by grepping the source really quick.

[forrestthewoods]

Awesome post. I've been trying to learn D3 on weekends and it's been more than a little difficult to get everything behaving and looking exactly like I want.

[ejp]

We made a similar decision - evaluated many, chose nvd3.js. It needed a new custom chart definition, but it has been responding well for our use case (enterprise monitoring software).

[misiti3780]

have you tried dimple.js yet ? I used to use nvd3.js but switch to dimple because the charts seem to look more professional. it is definitely not as mature as nvd3.js though

[1971genocide]

nvd3.js is awesome. However It always crashes for very large dataset. I had to reduce my dataset size for nvd3.js to not crash, however programs like MATLAB has no problem visualising really large dataset where you can zoom to individual data point. Its in my TODO list to make nvd3.js handle large data set so that it can compete with MATLAB/Python.

[creatio]

Just happen to come by this today: http://i.imgur.com/5zE08DX.png

[1971genocide]

MATLAB gets more hate then it deserves. Do you know some of the language stuff in MATLAB are being adopted in the next iterating of javascript ? MATLAB has amazing consistency and a really good learning tool. It is really good for fast prototyping for numerical algorithms, its just very old.

[sdrothrock]

Do you have any suggestions for alternatives for large datasets? I currently use Highstock, but it's pretty bad around ~100,000 individual points.

[cjfont]

With those many points you'll probably need something that makes use of HTML Canvas, and not SVG which slows down if you plot that many elements.

[sdrothrock]

Do you happen to have any recommendations?

[cjfont]

For a simple scatterplot with many points I would probably simply use Canvas directly, and perhaps borrow elements from D3 like d3.scale to plot the axis labels. It is possible to use Canvas underneath to plot the 100,000 points, and SVG on top for other stuff like tooltips and brush selecting.

[caprock]

For dense data like that, you might give dygraphs a try.