Create table comparing C3 with D3, NVD3, Dimple, &c.

[fresheneesz]

C3 looks much easier to use than D3, but I'd like to know what that costs me. I don't see any explanation of C3's limitations on its website. It would also be nice to know in what ways C3 can interoperate with D3. Is it possible to create a C3 chart and then manipulate it with D3 in cases when C3's limitations arise?

[aendra-rininsland]

Hi @fresheneesz!

You can most definitely manipulate C3 charts with D3; they're all just SVG elements. For instance, in AxisJS, I add titles after chart generation using D3. You can sort of use D3 to tweak things much like how you would use jQuery on the normal DOM (Technically, you could tweak the SVG with even jQuery, but I've always found D3 to work much better due to not having to dodge around issues caused by the SVG namespace.).

That said, IIRC (and it is pretty late here at the moment), C3's pretty much in its own scope, so it's not likely you can pass C3's scope to D3 and then have that take over a created chart. Further, any manipulations you do to the chart elements may get overwritten if you call .generate() again. I might be totally wrong about this though; @masayuki0812, any thoughts?

TBH, I generally find it easier to use CSS to modify C3 charts. Pretty much every element has a class attached, so they're really easy to tweak stylistically. I've even had some success replacing the requestAnimationFrame-based animations with CSS transitions (See #774).

In terms of general limitations — it's not very extensible at the moment (though we are working on a plugin architecture; see #351), so you're pretty much limited to pie/donut/line/bar/gauge charts currently. But that's kind of what it's for — comparing C3 to D3 is sort of apples-to-oranges; the latter is a library for attaching data to SVG elements, the former is a simplified abstraction of that library. I use both in my daily work — D3 when I want to create some weird new type of data visualisation, C3 for when I need to knock out an interactive bar chart in under five minutes. Given this, what might be a limitation in one context is a benefit in another.

Thoughts?

[fresheneesz]

Thanks for the detailed response Ændrew. I guess for our case, I don't want to reinvent the wheel if I don't have to. So I guess the answer just might be to use c3 in one case and d3 in another. I'm also looking at Dimple and NVD3, which both advertise the ability to be used together with D3. I'm trying to evaluate what is right for us - and it would be much easier to do that if I know I can drop back down to the D3 level without starting from scratch. It sounds like that's essentially possible with any library that uses D3 (or any library that generates SVG?). So now I think we'll just have to decide which abstraction layer we like better out of C3, Dimple, and NVD3 and go with that.

As far as this ticket, I just want to reitterate that it would be nice to have some exposition about this in the docs. Thanks again!

[aendra-rininsland]

@fresheneesz If it helps — NVD3 is a lot less abstracted than C3, in that it gives you models that you populate. It's like D3-Lite in many ways, IMO. Hadn't heard of Dimple before, but it looks similar to NVD3 in that regard.

I'm going to rename this to be a documentation issue — what's really needed is a reference page with a table discussing the differences.

[guykatz]

please throw in a compass chart a-la http://www.java2s.com/Code/Java/Chart/JFreeChartCompassDemo2.htm while youre at it :)

[rajzeshwars]

Hello Aendrew, I would like to understand advantages and disadvantages between c3 and NVD3, I need to take a decision.

[alanhamlett]

@rajzeshwars http://www.jsgraphs.com/

[rajzeshwars]

Thanks alan. It is a nice link. Is there a way to compare between c3 and NDv3?