Comparison between d3.js and chart.js (only for charts)
I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, especially when I want a comparison to chart.js.
I have found this: http://www.fusioncharts.com/javascript-charting-comparison/ but it is not what I was looking for.
Does anyone know about a comparison of these frameworks in terms of usability and performance (only for charts)?
Answer
d3.js is not a "charting" library. It is a library for creating and manipulating SVG/HTML. It provides tools to help you visualize and manipulate your data. While you can use it to create conventional charts (bar, line, pie, etc...) it's capable of so much more. Of course with this "capable of so much" comes a steeper learning curve. There are a lot of conventional charting libraries built on top of d3.js - nvd3.js, dimple.js, dc.js if you want to go that route.
I'm not familiar with Chart.js but a quick look at the website tells me it's more of a run of the mill charting library. It supports 6 basic chart types and you aren't ever going to do stuff like this with it. But the API looks straightforward and I'm sure it's easy to use.
Other than that the most obvious distinction between the two is that Chart.js is canvas based, while d3.js is mainly about SVG. (Now I say mainly because d3.js can manipulate all types of HTML elements so you could even use it to help you draw on a canvas.) In general canvas will out perform SVG for a large number of elements (I'm talking very large - thousands of points, lines, etc...). SVG, on the other hand, is easier to manipulate and interact with. With SVG each point, line, etc becomes part of the DOM - you want that point green now, just change it. With canvas its a static drawing that was to be redrawn to make any change - of course it draws so fast you'll usually never notice. Here's some good reading from Microsoft.