Visualizations of http://jehiah.cz/one-one/

[subbu]

Interesting wedge animations at the bottom here http://jehiah.cz/one-one/

Any ideas how they are being done?

[Kyle Foreman]

Unfortunately the code is minified so it'd be a pain to read through (http://jehiah.cz/one-one/static/one-one.min.js), but I imagine he's just changing the outer radius of an arc element (https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc_outerRadius).

[Shripad K]

no i guess its easier than that! just do scale transform on mouseover and back to (1,1) on mouseout.

[Kyle Foreman]

No, scale transform would cause it to grow in all directions. You need it to expand outward from the center of the circle.

[Nelson Minar]

On Mon, Jan 16, 2012 at 2:28 AM, subbu <subramani...@gmail.com> wrote:

Interesting wedge animations at the bottom here http://jehiah.cz/one-one/

Any ideas how they are being done?

It's a D3 site. I do something similar here (press the Play button in the middle of the calendar):

http://windhistory.com/station.html?KHWD

It's pretty simple. I use d3.svg.arc() to draw the arc. outerRadius is the thing that varies and I use .transition() to animate it. In my case D3's automatic transitions just work; the built in interpolator understands arcs, or else interpolates the underlying SVG path in a way that works right.

[subbu]

Thank you Nelson. Your visualizations are beautiful.