Three Little Circles

http://mbostock.github.com/d3/tutorial/circle.html

by jashmenn • 15 years ago

220 14 15 years ago

mbostock.github.com

jberryman• 15 years ago

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

maxaf• 15 years ago

At my startup (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.

lynaghk2• 15 years 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/

ArchD• 15 years 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/, referenced in a contemporary thread:

http://news.ycombinator.com/item?id=2746864

Here's the matcher:

http://underthesite.com/technologies/d3/matchers/161

It fails to detect that 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.

dlsspy• 15 years ago

I plot our development activity in realtime using D3: 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• 15 years 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 -demonstrates very well how impressive the author and library is.

gregwebs• 15 years ago

I am using this for nutrition visualisation: http://eatnutrients.com/sources/sr23/11301

It is great- I think everyone would be using it if it supported IE < 9

miked98• 15 years 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/.

cdcarter• 15 years 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• 15 years 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• 15 years 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• 15 years ago

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

onassar• 15 years 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/ might be fun :)

Three Little Circles

Related Stories