Maybe not the best forum for this, but, Thanks Mike! I've been exploring d3 for a few months now. IMHO, it's one of the cleanest, most powerful JS libraries out there. The examples are great.
It's meant to be easy to extend and wrap. To make it easier to represent (for example) the reading level of a student, you can use the DRA (a common reading metric) wrapper. Rather than describe the _chart_ (x, y coordinates), you describe the _data_ (timestamp, score).
We also invented a new chart - grouped line - to represent complex goals for students. The grouped line chart shows multiple trials in a day/period, rather than boiling data down into a single point. The sample implementation demos a use case.
If you too find d3 very difficult, have a look here: nvd3 creates boilerplate examples for typical graphs. It's almost plug and play: http://news.ycombinator.com/item?id=4366018
I had some trouble with the tooltips and getting the x-axis to like Date objects, and I really wish all the examples showed the source data (not just some random function that generates the source data), but other than that it is pretty solid for boilerplate charts. The other weird thing is that some charts work without a height attribute on the svg / div element and others don't, and you kinda just have to figure that one out for yourself =)
If you mean you want D3 to support behind-the-scenes mapping from SVG to Canvas, that will never happen. Unlike Dygraphs, D3 is not a charting library, so it doesn’t abstract the underlying representation; with D3, you’re still using the DOM, albeit with a more convenient API. Magically converting SVG to Canvas would be a huge amount of work. And for what? In many cases SVG performance is comparable to Canvas, and SVG offers conveniences that Canvas cannot, such as external styling via CSS, simple declarative event listeners, and the ability to inspect elements.
"dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them."
Dygraphs and D3 seem to be designed for very different use cases. D3 is more about showing smaller data sets in beautiful, unique, creative, and animated ways. Dygraphs is for time series data with lots of data points. So, pick the one that suits your needs :)
There's a huge mismatch between D3 and canvas. D3 is all about binding data to structured documents (i.e. HTML or SVG). Documents are dynamic and interactive, but canvas is fundamentally just a bitmap context. It just doesn't make sense to render D3 to canvas... but you can certainly use any of D3's useful functions for calculating layouts or paths or colors.
You can render svg into a canvas using canvg.
I am trying the same approach now. Everything is fine except the animations, also you can no longer interact using mouse events.
Do let me know if it works for someone.
doing a scatter plot of 10k points in SVG is impractical - ok, so you could argue that you can't really see 10k points on the screen, that's fair, but if a user has 10k points, and they want to see them, you either have to figure out how to represent that with fewer points (collapsing a bunch of points into larger marks perhaps) or doing density estimation, or something else. To do it the naive way, SVG is impractical
But isn't collapsing points into larger marks or density estimation and so on stuff that d3 (or it's predecessor protovis) is made for? I thought, yes if you want to just draw 10k points obviously canvas will win, if you want to do (interactive) graphs and plots svg wins.
