Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

bl.ocks.org

Post reply on HN
Print view View original

1–8 of 8 posts

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

#4

Post by eekfuh »

danlebo wrote: post #3

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.

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.

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

#6

Post by benbjohnson »

aaimnr wrote: post #2

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

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)

Post reply on HN