8 ms·

D3.js 2.10 Unleashed.

116 points by googletron 14y ago

chatmasta 14y ago
Still waiting for canvas support. Till then, I'm all about Dygraphs.
- mbostock 14y ago
  There are a variety of ways that you can use canvas with D3. For example: force layouts (http://bl.ocks.org/3231307 http://bl.ocks.org/3231307 and http://bl.ocks.org/3180395 http://bl.ocks.org/3180395), time-series charts (http://square.github.com/cubism/ http://square.github.com/cubism/), custom DOM-to-canvas renderers (http://bl.ocks.org/1276463 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.
  - deleted 14y ago
    [deleted]
  - rich_harris 14y ago
    Plus with SVG you get Retina support for free.
- arunkjn 14y ago
  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.
  - hogu 14y ago
    I tried, if you ever nest svg it doesn't really work. If you don't do that, you might be ok.
- MartinMond 14y ago
  Why do you want that feature?
  - hogu 14y ago
    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
    - MartinMond 14y ago
      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.
- socialist_coder 14y ago
  "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 :)
- jcromartie 14y ago
  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.
  - osi 14y ago
    And the original author does just that with cubism - http://square.github.com/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!
bsaunder 14y ago
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.
achristoffersen 14y ago
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 http://news.ycombinator.com/item?id=4366018
- tayl0r 14y ago
  I just made this with nvd3 this past weekend: https://github.com/tayl0r/ib-simple-charts 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 =)
- drewda 14y ago
  A similar wrapper library for d3 is Rickshaw: http://code.shutterstock.com/rickshaw/ http://code.shutterstock.com/rickshaw/
ajayjain 14y ago
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 https://github.com/JainLabs/charts Sample implementation: http://jainlabs.github.com/charts/goalbook.html http://jainlabs.github.com/charts/goalbook.html Docs: http://jainlabs.github.com/charts/ 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!

116 points by googletron 14y ago

chatmasta 14y ago

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

mbostock 14y ago
There are a variety of ways that you can use canvas with D3. For example: force layouts (http://bl.ocks.org/3231307 http://bl.ocks.org/3231307 and http://bl.ocks.org/3180395 http://bl.ocks.org/3180395), time-series charts (http://square.github.com/cubism/ http://square.github.com/cubism/), custom DOM-to-canvas renderers (http://bl.ocks.org/1276463 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.
- deleted 14y ago
  [deleted]
- rich_harris 14y ago
  Plus with SVG you get Retina support for free.
arunkjn 14y ago
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.
- hogu 14y ago
  I tried, if you ever nest svg it doesn't really work. If you don't do that, you might be ok.
MartinMond 14y ago
Why do you want that feature?
- hogu 14y ago
  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
  - MartinMond 14y ago
    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.
socialist_coder 14y ago
"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 :)
jcromartie 14y ago
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.
- osi 14y ago
  And the original author does just that with cubism - http://square.github.com/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!

bsaunder 14y ago

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.

achristoffersen 14y ago

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 http://news.ycombinator.com/item?id=4366018

tayl0r 14y ago
I just made this with nvd3 this past weekend: https://github.com/tayl0r/ib-simple-charts 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 =)
drewda 14y ago
A similar wrapper library for d3 is Rickshaw: http://code.shutterstock.com/rickshaw/ http://code.shutterstock.com/rickshaw/

ajayjain 14y ago

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 https://github.com/JainLabs/charts Sample implementation: http://jainlabs.github.com/charts/goalbook.html http://jainlabs.github.com/charts/goalbook.html Docs: http://jainlabs.github.com/charts/ 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!