4 ms·
Show HN: Funnel Visualization in HTML/CSS/D3.js
- aaimnr 14y agoThe 3d effect doesn't really make sense in this case, since it suggests that all the segments have actually equal width.
- benbjohnson 14y agoI'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 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 14y agoVery 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 14y agoInitially 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 14y agoCool 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/ http://blog.spark59.com/2012/why-not-the-funnel-chart/
- rjurney 14y agoGreat job. Lose the 3D.
- DelvarWorld 14y agoWhy does it default to dong colored?