Homage to John Simon's Every Icon by zanarmstrong

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Every Icon Redux with D3</title>
    <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="meyerReset.css">
      <link rel="stylesheet" href="everyIcon.css">
      <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>
    <body>
      <p>An homage to John F. Simon Jr.'s <a href="//numeral.com/appletsoftware/eicon.html">Every Icon</a>.</p>
      <section id="box" class="main">
      </section>
      <!-- call JS files -->
      <script src="everyIcon.js"></script>
    </body>
  </html>

everyIcon.css

body {
	font-color: gray;
}

.squares {
	stroke: gray;
	stroke-width: .3;
}

p {
	margin-top: 50px;
	margin-left: 50px;
}

everyIcon.js

"use strict";

// note: will not work when number of seconds surpass 2 to 53rd.  Need to use big numbers, get library

// set variables
var margin = {
	top: 20, 
	right: 50,
	bottom: 50,
	left: 50
	},
	width = 1000 - margin.left - margin.right,
	height = 1000 - margin.top - margin.bottom; 

var sideLength = 24;
var bigBoxDim = 8;
var fullDim = bigBoxDim * bigBoxDim
var zeroString = ""
var iteratePerSecond = 5;
var frequency = 1000 / iteratePerSecond;

var df = [];
for (var i = 0; i < fullDim; i++) {
	df.push(i);
	zeroString += "0";
}

// standard svg intro
var svg = d3.select(".main").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var k = svg.selectAll(".mainWave")
		.data(df)
		.enter()

k.append('rect')
			.attr("x", function(d) { return d % bigBoxDim * sideLength})
			.attr("height", sideLength)
			.attr("y", function(d) { return Math.floor(d/bigBoxDim) * sideLength  })
			.attr("width", sideLength)
			.attr("fill",'white')
			.attr("class", 'squares')

// add text to boxes for testing purposes
/*k.append('text')
			.text(function(d) {return d})
			.attr('fill', 'black')
			.attr("x", function(d) { return d % bigBoxDim * sideLength})
			.attr("y", function(d) { return Math.floor(d/bigBoxDim) * sideLength + 15 });
			*/

function updateView(newNum){
	d3.selectAll('rect')
		.data(df)
		.attr('fill', function(d,i) {
			var z = newNum.toString(2);
			var x = z.charAt(z.length - d - 1);
			if(x == 1){
				return 'black'
			} else {
				return 'white'
			}
		})
};

var startDate = (new Date(1997, 0, 14, 17, 0, 0, 0)).valueOf();
var iter = 0;

function tick() {
	var newNum = Math.floor((Date.now() - startDate) / frequency);
	updateView(newNum)
	iter += 1;
	setTimeout(tick, frequency);
};
tick()