Hacker News Reader

Comment by chatmasta | Hacker News Reader

Still waiting for canvas support. Till then, I'm all about Dygraphs.

There are a variety of ways that you can use canvas with D3. For example: force layouts (http://bl.ocks.org/3231307 and http://bl.ocks.org/3180395), time-series charts (http://square.github.com/cubism/), custom DOM-to-canvas renderers (http://bl.ocks.org/1276463).

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.

Plus with SVG you get Retina support for free.

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

And the original author does just that with cubism - http://square.github.com/cubism/

built around D3, but canvas rendering for the core graph.

D3 is a toolkit. Its great for binding data to vanilla HTML tables!

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.

I tried, if you ever nest svg it doesn't really work. If you don't do that, you might be ok.

Why do you want that feature?

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.

Reply on news.ycombinator.com