top | item 5699191

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

60 points| eekfuh | 12 years ago |bl.ocks.org

6 comments

order

aaimnr|12 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|12 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|12 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|12 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.

rjurney|12 years ago

Great job. Lose the 3D.