Last active
September 8, 2015 03:58
-
-
Save zanarmstrong/0500075f337ab2ac3013 to your computer and use it in GitHub Desktop.
Homage to John Simon's Every Icon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-color: gray; | |
| } | |
| .squares { | |
| stroke: gray; | |
| stroke-width: .3; | |
| } | |
| p { | |
| margin-top: 50px; | |
| margin-left: 50px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Every Icon Redux with D3</title> | |
| <link href='http://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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <p>An homage to John F. Simon Jr.'s <a href="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment