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

Show HN: Funnel Visualization in HTML/CSS/D3.js(bl.ocks.org)

60 points by eekfuh 13 years ago | 6 comments

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)

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/

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.

rjurney 13 years ago |

Great job. Lose the 3D.