Live data from Hacker News

C3.js: D3-based reusable chart library

c3js.org

41–50 of 81 posts

Re: C3.js: D3-based reusable chart library

#41

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 th…

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.

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

Re: C3.js: D3-based reusable chart library

#42
post #18

http://dimplejs.org/

I just switched a project from dimple to c3. Dimple's requirements for data organization were very rigid and it was extremely slow on datasets more than a couple MB. Docs are sub-par for both but c3's examples were much more relevant and understandable (at least for my case).

Re: C3.js: D3-based reusable chart library

#43
I don't intend to diminish the hard work you put into this. It looks clean and useable. Congratulations.

If you (people in general) are using d3 for simple charts you are doing it wrong.

d3 is a visualization library. It excels at helping you make non-trivial things. For the trivial there are some great chart libraries such as Highcharts. I build visualizations at work and for those I use d3. Whenever I need something as simple as a stacked area chart I simply use Excel or Highcharts. Everytime I've tried to use Highcharts for a complex viz, or d3 for a simple chart, it's been a waste of time. I've used NVD3 as well as some other D3 based charting packages. None of them are as simple as Excel or Highcharts IMHO.

Re: C3.js: D3-based reusable chart library

#44

I don't intend to diminish the hard work you put into this. It looks clean and useable. Congratulations. If you (people in general) are using d3 for simple charts you are doing it wrong. d3 is a visualization library. It excels at helping you make non-trivial things. For the trivial there are some great chart libraries such as Highcharts. I build visualizations at work and for those I use d3. Whenever I need somethin…

Using D3 for simple charts is not necessarily a waste of time -- I have a small collection of code for D3 charts I've made that I keep around and reuse as needed. Although they are simple they are tailored to the way I like simple charts to look like.

Re: C3.js: D3-based reusable chart library

#46

Earlier quoted context omitted.

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.

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

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.

Re: C3.js: D3-based reusable chart library

#47

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 th…

  > 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/

Re: C3.js: D3-based reusable chart library

#48
post #46

Earlier quoted context omitted.

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

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.

Do you happen to have any recommendations?

Re: C3.js: D3-based reusable chart library

#49

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 th…

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.

Re: C3.js: D3-based reusable chart library

#50

I don't intend to diminish the hard work you put into this. It looks clean and useable. Congratulations. If you (people in general) are using d3 for simple charts you are doing it wrong. d3 is a visualization library. It excels at helping you make non-trivial things. For the trivial there are some great chart libraries such as Highcharts. I build visualizations at work and for those I use d3. Whenever I need somethin…

Highcharts is amazing, but it is not distributable with open source software. My team at edX recently migrated away from Highcharts to nvd3 for this very reason. The state of charting is such that good packages are expensive. There are some mediocre packages for free. D3 is the only package we found that met our needs.
Post reply on HN