Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3.<p>I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work.<p>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.<p>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.<p>nvd3.js simply worked for me.
The type of chart I've found most useful is heat map charts, and none of the charting library I've looked at provide that:<p>Here's an example from a Datadog dashboard: <a href="https://cloud.githubusercontent.com/assets/1189716/4064956/6eacbc08-2e16-11e4-827b-d21f8cd5f020.png" rel="nofollow">https://cloud.githubusercontent.com/assets/1189716/4064956/6...</a><p>I wish such a chart style was more common, it's so much more useful than a typical line chart of the median/p9x. Unfortunately, I'm not familiar enough with D3 and such to write my own; it would likely be crap.
This totally goes against the whole point Mike Bostock (creator of D3) laid out when he talks about creating reusable charts...<p><a href="http://bost.ocks.org/mike/chart/" rel="nofollow">http://bost.ocks.org/mike/chart/</a><p>"To sum up: implement charts as closures with getter-setter methods. Conveniently, this is the same pattern used by D3’s other reusable objects, including scales, layouts, shapes, axes, etc."<p>You get none of that with C3.js...
I build visualizations with d3.js for my clients (<a href="http://muyueh.com/42/" rel="nofollow">http://muyueh.com/42/</a>), and I have always wonders whether I will be one day replaced by library such as c3.js.<p>I have been watching closely different library, and felt that most of the library are just providing default value to d3.js, plus adding some nice plug-in (such as tooltips). If we are looking for a bar chart, then it's very fast to use a bar chart library to build what we want. Yet some problems may occur:<p>1. Control, we thought that we need bar chart, but we actually need bar chart’. In my process of developing effective visual, I often need to access different part of the API.<p>2. Choice, currents charts provided by most of the library are available in Google Charts and Excel. This might a question of time: these library are fairly new, and maybe in the near future these library will provide all visualization available in the d3.js page. But maybe it’s not because of time, but of complexity. If these library were providing better abstraction, it should be easier to develop more complex charts.<p>3. Extendability: We probably don't just need the bar-chart as a stand alone visual, but as building block that can interact with other component (texts or maps).<p>An interesting question is to ask why d3.js was designed so “low level”, why not directly releasing a “high level library”? My hypothesis is that maybe this is the right level of abstraction. When you tried to get “higher”, you actually lose power/control over your visual. Maybe that’s the reason why people are sharing a lot of their work on <a href="http://bost.ocks.org/" rel="nofollow">http://bost.ocks.org/</a>, doing some small experiments, laying down some building block, perhaps currently that is the most efficient way of building re-usable chart.<p>I shared my thought on the issue, in hope that people challenge my hypothesis: my current work depends on it.
I don't intend to diminish the hard work you put into this. It looks clean and useable. Congratulations.<p>If you (people in general) are using d3 for simple charts you are doing it wrong.<p>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.
Careful, this has pretty much zero documentation and inconsistent options available for each chart type. I started a project with it and after a great start realised I had to scrap it all and start from scratch with some more complete alternative (haven't started looking yet).
I like C3, but I discovered it has some major performance issues with thousands of data points a couple months back. It has something to do with the pie chart rendering code: <a href="https://github.com/masayuki0812/c3/issues/172#issuecomment-47270494" rel="nofollow">https://github.com/masayuki0812/c3/issues/172#issuecomment-4...</a><p>I've been evaluating HighCharts, Vega, Rickshaw, NVD3, C3, but the one I've been impressed with in terms of performance thus far is Epoch: <a href="http://fastly.github.io/epoch/" rel="nofollow">http://fastly.github.io/epoch/</a>
I also like <a href="http://nvd3.org/" rel="nofollow">http://nvd3.org/</a>. We almost now need an index of the various D3 based charting libraries.
We evaluated Rickshaw and Dimple (<a href="http://dimplejs.org/" rel="nofollow">http://dimplejs.org/</a>) for awhile (to migrate some custom charts initially built with D3.Chart <a href="http://misoproject.com/d3-chart/" rel="nofollow">http://misoproject.com/d3-chart/</a>). We went with Dimple and I've been very pleased with it. There is ample documentation, the source code is readable, and the developer behind it is responsive to questions and issues. Also, it's very easy to get access to the underlying axes/series/legends/etc if you want to do more complicated work not provided out of the box and are familiar with d3. I would highly recommend it if you're looking for a d3 chart library.
I'm currently using this for a project. My only complaint is that there is no API documentation, so you just have to look for a relevant example every time you want to do something.
This is nice, easy to use. It is however only using an extremely limited subset of d3 capabilities, which makes me wonder what added value is brought by the fact of making this d3 based compared to other "pure" and lightweight chart libraries which have the same functions [1]<p>My usual go to library: Flot <a href="http://www.flotcharts.org/" rel="nofollow">http://www.flotcharts.org/</a>
Great, but I dislike the combined JS filesize. 267kb is simply still too big for mobile websites, given that it is only a part of a website. It seems to consume a bit too much memory for my iPad2, the first time I saw a blank demo; had to re-open Safari. (combined: c3 is 120kb and d3 is 147kb) c3.min:
<a href="https://github.com/masayuki0812/c3/blob/master/c3.min.js" rel="nofollow">https://github.com/masayuki0812/c3/blob/master/c3.min.js</a> , d3.min: <a href="https://github.com/mbostock/d3/blob/master/d3.min.js" rel="nofollow">https://github.com/mbostock/d3/blob/master/d3.min.js</a><p>A charts library that has no dependecies (no d3, no jquery, etc), has a filesize of less than 100kb and still looks great and offers useful features would be awesome. SVG vs. Canvas2D is another hot topic.
This looks like an interesting project. The struggle I've had in the past with similar libraries is the level of extensibility provided by the API. It's not clear from he docs how to add your own custom viz. I would love a d3 based chart library that would provide an easy to use chart api,such as we see in c3js. Which I do like. But also a DSL that is not as low level as D3 but provides enough flexiblity for creating new visualizations. There have been some nice declarative charting libs posted on HN, which links I can't find right now.
Keep up the good work, I'll be following this project closely.
I'm not familiar with all the available chart libraries built on top of d3.js,but having used vanilla d3 on several projects, my first response to this article was that c3 looks really useful/cool... That said, it's probably worth mentionting that there are some useful examples of "reusable charts" on mr. bostock's website, and constructing a customized version of this JSON chart format probably wouldn't be too difficult, although making it performant on large datasets might be.
This is how demos are supposed to be done. Seriously. Spare me your video, your soundtrack, and all of your BS. Just show me the thing working and let me play with it.
I could have sworn there was a ClojureScript wrapper for D3 that was also called C3.<p>Taking a quick search shows that it is actually called C2[1], from Keming Labs.<p>[1]: <a href="http://keminglabs.com/c2/" rel="nofollow">http://keminglabs.com/c2/</a>
C3 looks nice, but it'd be really great if the library didn't demand passing things in object format. Why can't we have something that implements chaining like D3? It seems a bit counter-intuitive...
dc.js has similar goals (though more focused on large, multi-dimensional data sets), with 1 extra year to mature<p><a href="http://dc-js.github.io/dc.js/" rel="nofollow">http://dc-js.github.io/dc.js/</a>
annnd it suffers from the same problem as other javascript libraries: the documentation is awful.<p>If you want your reusable library to be adopted widely, you have to write good docs. I was hoping I could replace NVD3.js with C3.js but the docs are on par.