D3.js 2.10 Unleashed. | Hacker News Reader

D3.js 2.10 Unleashed.

github.com

116 pointsgoogletron16 comments

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.

I've made a library on top of D3 at an internship with a startup (Goalbook) to help visualize their student data, goals and performance. Github: https://github.com/JainLabs/charts Sample implementation: http://jainlabs.github.com/charts/goalbook.html Docs: http://jainlabs.github.com/charts/

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.

I would love feedback on the project!

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 just made this with nvd3 this past weekend: https://github.com/tayl0r/ib-simple-charts

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 =)

A similar wrapper library for d3 is Rickshaw: http://code.shutterstock.com/rickshaw/

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.

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.

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

Reply on news.ycombinator.com