TLDR: I made this because I wanted an excuse to make a heatmap using d3.js.
I saw an awesome heatmap of how a recuiter looks at your resume that was created with eye tracking software.
It got me thinking. When we layout a grid showing ranked content, say top music albums, we use your standard left-to-right, top to bottom layout.
But our eyes gravitate towards the top left, shouldn't the best content be closest to the top left? We could sort it by distance, but that seems odd too.
So let's combine them and call it a ZigZag layout. I propose a new standard.
This gave me an excuse to play with D3.js, and that is the main reason I tried it out. The crux of the entire visualization is this:
Which creates 7 rows of 5 squares, and varies the color opacity from 1 to 0 based on the given rank of each cell.
- Allow for variation in grid size
- Start the standard pattern after the fold
- Create plugin to work with a masonry layout