Show HN: Funnel Visualization in HTML/CSS/D3.js

http://bl.ocks.org/inlineblock/raw/5557802/

by eekfuh • 13 years ago

60 6 13 years ago

bl.ocks.org

aaimnr• 13 years ago

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

benbjohnson• 13 years 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)

danlebo• 13 years 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.

eekfuh• 13 years 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.

viggity• 13 years 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/

rjurney• 13 years ago

Great job. Lose the 3D.

Show HN: Funnel Visualization in HTML/CSS/D3.js

Related Stories