5 ms·

Three Little Circles

220 points by jashmenn 15y ago

jberryman 15y ago
Those examples look awesome! Has anyone used this who can comment?
- maxaf 15y ago
  At my startup (https://www.novus.com/ https://www.novus.com/) we've built a financial data viz product using Protovis and D3. Once we've gotten over the initial hurdle of needing to support IE (we don't anymore), SVG graphs are the bomb. They print beautifully and offer virtually endless customization options. If you can code it, you can draw it. Expect easy interop with tools such as jQuery (which makes our graphs interactive) and Tipsy. The latter we use to provide tool tips that show underlying numbers that have gone into drawing any particular graph.
- lynaghk 15y ago
  I run a small information visualization shop and we use Protovis & D3 exclusively for visualizations on the web. Bostock's work is the most useful and thoughtful visualization framework on any platform, and at this point the only reason I use Hadley Wickam's ggplot2 is for graphics that need more marks than Chrome can handle on the DOM. Initially I didn't see what D3 offered over Protovis, but I've since come around---D3 code is closer to the underlying page elements that make up the visualization, so you can leverage your existing HTML/SVG and CSS knowledge. Also, unlike Protovis, D3 has animation baked in by creating/removing DOM elements and tweening their positions and sizes. The latest public-facing work we did using D3 is this linked treemap & linechart, which uses both HTML elements (treemap divs) and SVG elements (linechart lines): http://keminglabs.com/ukuni/ http://keminglabs.com/ukuni/
  - ArchD 15y ago
    I'm not a Javascript expert and I don't know D3 so I may be missing something here. I'm trying to add a d3 matcher for http://underthesite.com/ http://underthesite.com/, referenced in a contemporary thread: http://news.ycombinator.com/item?id=2746864 http://news.ycombinator.com/item?id=2746864 Here's the matcher: http://underthesite.com/technologies/d3/matchers/161 http://underthesite.com/technologies/d3/matchers/161 It fails to detect that http://keminglabs.com/ukuni/ http://keminglabs.com/ukuni/ uses d3. What's missing from the matcher? I notice that there's no script tag for d3 in the ukuni main page source.
    - lynaghk 15y ago
      That's because D3 is minified and concatenated with the rest of our JavaScript on the page. jQuery is separate so that it will load from caches.
- dlsspy 15y ago
  I plot our development activity in realtime using D3: http://dustinphoto.iriscouch.com/gerrit/_design/app/index.html http://dustinphoto.iriscouch.com/gerrit/_design/app/index.ht... -- no animations or anything, though. I just redraw when someone does something. I am actually a bit confused as to why one of my stream graphs is floating up and to the right. I need to contact support and see where I'm doing this wrong (the two streamgraphs are using the same drawing code, but one has generally more equal proportions of activity across the input values).
- evlapix 15y ago
  I used Protovis for about 6 months and then switched to D3 about 2 months ago. In those 2 months I reimplemented everything that I had built in Protovis, cut down on complexity and lines of code, and have not seen its limitations (and I would consider my use cases extreme). There have been core design changes to the library that have given it this ability. This page - http://mbostock.github.com/d3/tutorial/protovis.html http://mbostock.github.com/d3/tutorial/protovis.html -demonstrates very well how impressive the author and library is.
- gregwebs 15y ago
  I am using this for nutrition visualisation: http://eatnutrients.com/sources/sr23/11301 http://eatnutrients.com/sources/sr23/11301 It is great- I think everyone would be using it if it supported IE < 9
miked98 15y ago
D3.js powers all of the visualizations at Metamarkets, thanks to Vadim Ogievetsky, who got an early look at the D3 code base. It's a powerful framework that extends beyond visualizations: it can be used to attach data to any part of the DOM, not just SVG elements. Here's one example that weaves together both data and graphics: http://labs.metamx.com/ http://labs.metamx.com/.
deleted 15y ago
[deleted]
cdcarter 15y ago
This is a really fantastic way of providing examples. It's very well written and everything just works, and it's very simple and easy to understand. I wish the Processing.js docs looked like this.
- robinhowlett 15y ago
  I concur, great example documentation like this makes it so much more appealing to dive into the library with clear goals and not worry about whether I'm using it correctly. D3 looks very nifty - I'd like to investigate building a Google Motion Chart-type widget with it.
tmcw 15y ago
I'll say it now: Mike Bostock is easily on par with Ashkenas, Holowaychuck, or Dahl as far as productivity and genius. d3 is a mindtrip but über-powerful in much the same way as Backbone, and Polymaps is the future.
- wicknicks 15y ago
  I couldn't agree more. Check out the tools he has built: http://bost.ocks.org/mike/ http://bost.ocks.org/mike/
onassar 15y ago
I think it'd be pretty rad to use this API to visualize connections and tweet's and thing's that can be represented in a timeline. So much amazing client side stuff that we can do now. Coupling this with http://geoiplookup.wikimedia.org/ http://geoiplookup.wikimedia.org/ might be fun :)

220 points by jashmenn 15y ago

jberryman 15y ago

Those examples look awesome! Has anyone used this who can comment?

maxaf 15y ago
At my startup (https://www.novus.com/ https://www.novus.com/) we've built a financial data viz product using Protovis and D3. Once we've gotten over the initial hurdle of needing to support IE (we don't anymore), SVG graphs are the bomb. They print beautifully and offer virtually endless customization options. If you can code it, you can draw it. Expect easy interop with tools such as jQuery (which makes our graphs interactive) and Tipsy. The latter we use to provide tool tips that show underlying numbers that have gone into drawing any particular graph.
lynaghk 15y ago
I run a small information visualization shop and we use Protovis & D3 exclusively for visualizations on the web. Bostock's work is the most useful and thoughtful visualization framework on any platform, and at this point the only reason I use Hadley Wickam's ggplot2 is for graphics that need more marks than Chrome can handle on the DOM. Initially I didn't see what D3 offered over Protovis, but I've since come around---D3 code is closer to the underlying page elements that make up the visualization, so you can leverage your existing HTML/SVG and CSS knowledge. Also, unlike Protovis, D3 has animation baked in by creating/removing DOM elements and tweening their positions and sizes. The latest public-facing work we did using D3 is this linked treemap & linechart, which uses both HTML elements (treemap divs) and SVG elements (linechart lines): http://keminglabs.com/ukuni/ http://keminglabs.com/ukuni/
- ArchD 15y ago
  I'm not a Javascript expert and I don't know D3 so I may be missing something here. I'm trying to add a d3 matcher for http://underthesite.com/ http://underthesite.com/, referenced in a contemporary thread: http://news.ycombinator.com/item?id=2746864 http://news.ycombinator.com/item?id=2746864 Here's the matcher: http://underthesite.com/technologies/d3/matchers/161 http://underthesite.com/technologies/d3/matchers/161 It fails to detect that http://keminglabs.com/ukuni/ http://keminglabs.com/ukuni/ uses d3. What's missing from the matcher? I notice that there's no script tag for d3 in the ukuni main page source.
  - lynaghk 15y ago
    That's because D3 is minified and concatenated with the rest of our JavaScript on the page. jQuery is separate so that it will load from caches.
dlsspy 15y ago
I plot our development activity in realtime using D3: http://dustinphoto.iriscouch.com/gerrit/_design/app/index.html http://dustinphoto.iriscouch.com/gerrit/_design/app/index.ht... -- no animations or anything, though. I just redraw when someone does something. I am actually a bit confused as to why one of my stream graphs is floating up and to the right. I need to contact support and see where I'm doing this wrong (the two streamgraphs are using the same drawing code, but one has generally more equal proportions of activity across the input values).
evlapix 15y ago
I used Protovis for about 6 months and then switched to D3 about 2 months ago. In those 2 months I reimplemented everything that I had built in Protovis, cut down on complexity and lines of code, and have not seen its limitations (and I would consider my use cases extreme). There have been core design changes to the library that have given it this ability. This page - http://mbostock.github.com/d3/tutorial/protovis.html http://mbostock.github.com/d3/tutorial/protovis.html -demonstrates very well how impressive the author and library is.
gregwebs 15y ago
I am using this for nutrition visualisation: http://eatnutrients.com/sources/sr23/11301 http://eatnutrients.com/sources/sr23/11301 It is great- I think everyone would be using it if it supported IE < 9

miked98 15y ago

D3.js powers all of the visualizations at Metamarkets, thanks to Vadim Ogievetsky, who got an early look at the D3 code base. It's a powerful framework that extends beyond visualizations: it can be used to attach data to any part of the DOM, not just SVG elements. Here's one example that weaves together both data and graphics: http://labs.metamx.com/ http://labs.metamx.com/.

deleted 15y ago

[deleted]

cdcarter 15y ago

This is a really fantastic way of providing examples. It's very well written and everything just works, and it's very simple and easy to understand. I wish the Processing.js docs looked like this.

robinhowlett 15y ago
I concur, great example documentation like this makes it so much more appealing to dive into the library with clear goals and not worry about whether I'm using it correctly. D3 looks very nifty - I'd like to investigate building a Google Motion Chart-type widget with it.

tmcw 15y ago

I'll say it now: Mike Bostock is easily on par with Ashkenas, Holowaychuck, or Dahl as far as productivity and genius. d3 is a mindtrip but über-powerful in much the same way as Backbone, and Polymaps is the future.

wicknicks 15y ago
I couldn't agree more. Check out the tools he has built: http://bost.ocks.org/mike/ http://bost.ocks.org/mike/

onassar 15y ago

I think it'd be pretty rad to use this API to visualize connections and tweet's and thing's that can be represented in a timeline. So much amazing client side stuff that we can do now. Coupling this with http://geoiplookup.wikimedia.org/ http://geoiplookup.wikimedia.org/ might be fun :)