Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Alternative grid ranking system
JavaScript CSS
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


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.


Check out the project demo page.


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:

    for (var j = 0; j<7; j++) {
        for(var i = 0; i < 5; i++) {
          attr("x", i*25).
          attr("y", 25*j).
          attr("height", 25).
          attr("fill", "rgba(153, 0, 13, " + (100-3*man[i+j*5])/100 + ")").
          attr("width", 25);

Which creates 7 rows of 5 squares, and varies the color opacity from 1 to 0 based on the given rank of each cell.

Road Map (if I had no job)

  • Allow for variation in grid size
  • Start the standard pattern after the fold
  • Create plugin to work with a masonry layout
Something went wrong with that request. Please try again.