
C3.js: D3-based reusable chart library - nekgrim
http://c3js.org/
======
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.

~~~
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](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.

------
AYBABTME
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:

Here's an example from a Datadog dashboard:
[https://cloud.githubusercontent.com/assets/1189716/4064956/6...](https://cloud.githubusercontent.com/assets/1189716/4064956/6eacbc08-2e16-11e4-827b-d21f8cd5f020.png)

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.

~~~
ylem
For work, we had to fork jqplot to add features like heatmaps, zooming, etc.:
[https://github.com/scattering/jqplot.science](https://github.com/scattering/jqplot.science)

We also have the notion of "interactors" which allow you to add draggable
widgets to a plot:
[http://ncnr.nist.gov/instruments/magik/calculators/calcR_wf....](http://ncnr.nist.gov/instruments/magik/calculators/calcR_wf.html)

To see the heatmap in action, you can look at:
[http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=...](http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=NGB30SANS)

There are of course glitches, but hopefully you find some of this useful!

~~~
chenster
phpChart ([http://phpchart.org](http://phpchart.org)) is a higher level
charting library for jqplot if you don't wan to spend days to learn custom
styling and scripting.

~~~
sendmorbutt
We made a decision to go with phpChart in June. It works well in our use case.
We can still add custom javascript when something is outside its offered
feature set.

------
cereallarceny
This totally goes against the whole point Mike Bostock (creator of D3) laid
out when he talks about creating reusable charts...

[http://bost.ocks.org/mike/chart/](http://bost.ocks.org/mike/chart/)

"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."

You get none of that with C3.js...

~~~
mightybyte
There are some things that you can't easily do with Mike Bostock's method.
Namely, it's not a good format for storing, examining, and modifying charts.
And that's perfectly fine. It's good for what it's good for. But not everyone
has the same needs.

------
muyueh
I build visualizations with d3.js for my clients
([http://muyueh.com/42/](http://muyueh.com/42/)), and I have always wonders
whether I will be one day replaced by library such as c3.js.

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:

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.

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.

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).

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
[http://bost.ocks.org/](http://bost.ocks.org/), doing some small experiments,
laying down some building block, perhaps currently that is the most efficient
way of building re-usable chart.

I shared my thought on the issue, in hope that people challenge my hypothesis:
my current work depends on it.

~~~
bengali3
Nice work. I really like
[http://muyueh.com/30/hexagon/](http://muyueh.com/30/hexagon/)

First find attempt I got 85 seconds Second 23 seconds Third 185

~~~
muyueh
Thanks, that one together with Chernoff's facial hairs
([http://muyueh.com/30/chernoff/](http://muyueh.com/30/chernoff/)) are two
visuals that I really enjoyed doing, but a bit too "geek" for the average user
(Your compliments was actually the first one I get from that graph).

It was part of my initiative 30 days of d3.js, a pretty solid way to learn
d3.js by the way.

------
ryanmarsh
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.

~~~
clintonb
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.

------
aw3c2
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).

~~~
Systemic33
I think thats why it's still at version 0.3

But they do have a lot of examples, a lot more than eg. nvd3.

------
webXL
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:
[https://github.com/masayuki0812/c3/issues/172#issuecomment-4...](https://github.com/masayuki0812/c3/issues/172#issuecomment-47270494)

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:
[http://fastly.github.io/epoch/](http://fastly.github.io/epoch/)

------
daigoba66
I also like [http://nvd3.org/](http://nvd3.org/). We almost now need an index
of the various D3 based charting libraries.

~~~
JoeAnzalone
How about a... chart?

------
ne8il
We evaluated Rickshaw and Dimple
([http://dimplejs.org/](http://dimplejs.org/)) for awhile (to migrate some
custom charts initially built with D3.Chart
[http://misoproject.com/d3-chart/](http://misoproject.com/d3-chart/)). 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.

------
Alex3917
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.

------
jbogp
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]

My usual go to library: Flot
[http://www.flotcharts.org/](http://www.flotcharts.org/)

~~~
kachnuv_ocasek
I find it's usually easier to roll my own solution, because these libraries
often don't provide the level of customisation I need (or may need in the
future). The cost of moving away from them is also nonzero.

------
frik
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:
[https://github.com/masayuki0812/c3/blob/master/c3.min.js](https://github.com/masayuki0812/c3/blob/master/c3.min.js)
, d3.min:
[https://github.com/mbostock/d3/blob/master/d3.min.js](https://github.com/mbostock/d3/blob/master/d3.min.js)

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.

------
thinkersilver
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.

------
auvrw
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.

------
state
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.

------
dsjoerg
I'm a long-time highcharts user. What are the advantages of this over
highcharts?

~~~
mightybyte
It appears to support more data formats than highcharts. It allows you to pass
data in both column oriented or row oriented forms. Highcharts didn't have
that ability last I checked.

Also, C3 is MIT licensed. I'm sure there are other differences as well.

------
pselbert
I could have sworn there was a ClojureScript wrapper for D3 that was also
called C3.

Taking a quick search shows that it is actually called C2[1], from Keming
Labs.

[1]: [http://keminglabs.com/c2/](http://keminglabs.com/c2/)

------
based2
[http://dimplejs.org/](http://dimplejs.org/)

~~~
zaius
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).

------
cereallarceny
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...

~~~
webmaven
I actually prefer passing a declarative configuration object rather than
issuing a series of API calls. It is one of the things that had me switch a
project from D3 to C3 + crossfilter a while back.

~~~
cereallarceny
Really? Perhaps it's just a matter of preference, but this coding style drives
me up a fucking wall. Clutters the hell out of your code.

~~~
webmaven
I guess that depends on whether the settings you are passing to the chart are
coming from somewhere else (say, an API call). If you can just get a JSON
object from a backend and pass it directly to the chart, things become _much_
simpler in your code.

------
j_s
dc.js has similar goals (though more focused on large, multi-dimensional data
sets), with 1 extra year to mature

[http://dc-js.github.io/dc.js/](http://dc-js.github.io/dc.js/)

~~~
webmaven
Note my comment elsewhere in this thread about switching from DC to C3 +
Crossfilter.

Since we wanted the set of charts to be driven by dynamic data, we were
looking at either implementing functions to take a configuration object and
translate that into a series of DC API calls, or switching to a charting
library that already took configuration objects and hooking the charts
together with Crossfilter ourselves.

The latter approach won out, largely because the C3 default look and feel was
closer to what we wanted as well, compared to the DC defaults.

------
ChrisArchitect
while ago yeah
[https://news.ycombinator.com/item?id=6771393](https://news.ycombinator.com/item?id=6771393)

------
novaleaf
I like hearing about other options, but I wish the top rated posts were about
the OP, not alternatives....

------
deutronium
I'm looking for a chart library that can plot real-time data, can anyone give
any suggestions?

~~~
tylerpachal
I have used HighCharts before for this. You'll want to look at their "Dynamic
Charts" section: [http://www.highcharts.com/demo/dynamic-
update](http://www.highcharts.com/demo/dynamic-update)

~~~
deutronium
That looks pretty nifty, thanks

------
omouse
annnd it suffers from the same problem as other javascript libraries: the
documentation is awful.

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.

~~~
chrischen
The documentation is nice... it's just incomplete.

~~~
omouse
Right and that incompleteness will leave you taking hours to do what should be
done in minutes because you're digging through the source code.

/said as someone who's had to do that with multiple libraries :(

------
EGreg
How does this compare with nvd3?

