Alternative grid ranking system
JavaScript CSS
Switch branches/tags
Nothing to show
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.

###Idea 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.

###Process 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