D3.js (opens in new tab)

(bl.ocks.org)

60 pointseekfuh12y ago6 comments

6 comments

The 3d effect doesn't really make sense in this case, since it suggests that all the segments have actually equal width.

benbjohnson12y ago

I'm not sure if the 3D effect is intentional but I definitely agree. It makes it confusing as to what I'm looking at. I feel like it's a Wolfenstein 3D level.

Kudos on working on a better visualization of funnel analysis. The traditional bar chart that tools like MixPanel use is also confusing. It explicitly convey that you're looking at the flow of actions.

I wrote an open source behavioral analytics database and I opted for separating the action visualization and the flow between actions in my D3.js funnel analysis visualization. Animation also helps to show the flow.

http://demo.skydb.io/gharchive/explore

(For context, that's GitHub Archive data so it's showing the next immediate action after a given action -- e.g. pushes, repo creation, GitHub follows, etc)

viggity12y ago

Cool work, I like the transitions, but I'd caution people on actually using a funnel chart as it has a tendency to be easily mis-interpreted. http://blog.spark59.com/2012/why-not-the-funnel-chart/

danlebo12y ago

Very interesting how it's only using one div and border hacks per segment. So I guess in theory this would work on older browsers, other than just content clipping in IE8, IE7, etc.

eekfuhOP12y ago

Initially I wrote it using 2 div's (one for the segment and one for the gap) so it would work in ie8, but I opted to go with one div, since its cleaner DOM-wise.

rjurney12y ago

Great job. Lose the 3D.

j / k navigate · click thread line to collapse