C3.js Brings Charting Power Without the Learning Curve

The JavaScript charting library, C3.js is a newcomer in an ocean of similar tools. Built on the D3 visualization library, it enables developers to create reusable charts and provides ways to manipulate a chart after it appears on screen.

Creating a chart with C3 is as simple as passing an object literal to the generate function.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'spline'
    }
});

[Click on the image to enlarge it]

The existing documentation is sparse, but the examples provided show much of C3's capabilities. The chart object has useful manipulation points, such as the ability to load and unload data sets:

chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });

The marketplace is awash with charting options, both open source and commercial, and C3 is not the first built on D3. Others, such as nvd3.js and rickshaw.js, also claim to enable the power of D3 to create reusable charts.

D3 arrived in 2010 with a goal of bringing "data to life using HTML, SVG and CSS," though it isn't strictly a charting library. It has earned a reputation for extreme power, but with a learning curve. Creating a simple line chart with D3 can leave a developer "spending days to a couple weeks with custom styling, tooltips, legends, etc.," according to Hacker News user capkutay.

InfoQ interviewed Masayuki Tanaka, the creator of C3, about its creation and direction.

InfoQ : What motivated you to create C3?

MT: "When I was developing a web application, I wanted to control the state of the chart after it is drawn and fire events on the chart interactively. However, the libraries I found were not designed like that (basically they're designed to just draw a chart)."

InfoQ: What makes C3 different from other charting libraries?

MT: "C3 can control the state of chart through its API, such as focusing on a data series, selecting data points, showing/hiding the data series, and updating the data. I think this is the most unique feature of C3. With this feature, web application [developers] can change the chart according to events such as user input and interaction, server responses, and other events.

InfoQ: What made you decide to use D3 as the basis for C3?

MT: "D3 is the most successful library for data visualization. I thought the approach of data-driven, the basic architecture of D3, is the most appropriate for C3. With this, we can write the code intuitively and easily (e.g. we can bind the data to a element and get data from the element easily). I also wanted to implement smooth animations for the chart when updating the data, moving, adding/removing, showing/hiding, etc."

InfoQ: What are your future plans for C3?

MT: "First, I'd like to improve the plugin architecture. With version 0.3, C3 introduced the plugin architecture but it's still a little bit difficult to use the internal functions and change its behavior because the implementation is a kind of mess. So, we'll have to solve this to be more helpful for more people.

Second, we have to complete the documentation. Currently, there is almost no reference, so it's difficult to understand what we can and cannot do. We're going to start this shortly. And I'd like to add more samples like D3 because I think it's a really useful approach for developers."

Both nvd3.js and rickshaw.js started off as internal efforts at for-profit companies and were open sourced. Highcharts is a popular commercial charting library, but it comes with a $390 pricetag for a single developer license. In comparison, C3 is an independent work with a MIT License.

On the Hacker News discussion of C3, visualization developer muyueh wondered if his clients would someday replace him with something like C3.

Development of D3 has reached a high maturity level with over 3,200 commits and 173 releases, but hasn't received an update in over a month. Its creator, Mike Bostock, has written his views on building reusable charts.