Skip to content

Instantly share code, notes, and snippets.

@mango314

mango314/README.md

Last active December 14, 2015 00:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mango314/4998900 to your computer and use it in GitHub Desktop.
Save mango314/4998900 to your computer and use it in GitHub Desktop.
Download ZIP
a flickering map of the US similar to what appears on the top of the Stately page.
Raw
comments.md

Since the state-shaped glyphs are fixed you can't draw anything too custom, such as

However, it may be possible to fork Stately and design my own glyphs based on the Counties of New York or Puerto Rico.

It might be nice to try to peg this to actual state data, or real-time state-data. I am intrigued by the specific color-patterns that emerge when states flicker.

Raw
flicker.js
reds = Array();
for(var k = 0; k < 9; k++ ) {
reds[k] ='rgba(255,0,0,0.' + (k+1) + ')';
console.log(reds[k]);
}
states = Array();
for(var k = 0; k < 51; k++ ) { states[k]=0; }
$(document).ready(function(){
setInterval(
function(){
n = Math.floor(51*Math.random());
if(states[n] == 0){ states[n]=1; }
else if(states[n] == 8){ states[n]=7; }
else { states[n] += 2*Math.floor(2*Math.random())-1; }
$("ul").children().eq(n ).css('color', reds[states[n]] );
}
,50);
});
Raw
map.html
<html>
<head>
<title>State your Case</title>
<link rel="stylesheet" href="stately/assets/css/stately.css">
<style type="text/css">
.stately {
width: 300px;
font-size: 300px;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<ul class="stately">
<li data-state="al" class="al">A</li>
<li data-state="ak" class="ak">B</li>
<li data-state="ar" class="ar">C</li>
<li data-state="az" class="az">D</li>
<li data-state="ca" class="ca">E</li>
<li data-state="co" class="co">F</li>
<li data-state="ct" class="ct">G</li>
<li data-state="de" class="de">H</li>
<li data-state="dc" class="dc">I</li>
<li data-state="fl" class="fl">J</li>
<li data-state="ga" class="ga">K</li>
<li data-state="hi" class="hi">L</li>
<li data-state="id" class="id">M</li>
<li data-state="il" class="il">N</li>
<li data-state="in" class="in">O</li>
<li data-state="ia" class="ia">P</li>
<li data-state="ks" class="ks">Q</li>
<li data-state="ky" class="ky">R</li>
<li data-state="la" class="la">S</li>
<li data-state="me" class="me">T</li>
<li data-state="md" class="md">U</li>
<li data-state="ma" class="ma">V</li>
<li data-state="mi" class="mi">W</li>
<li data-state="mn" class="mn">X</li>
<li data-state="ms" class="ms">Y</li>
<li data-state="mo" class="mo">Z</li>
<li data-state="mt" class="mt">a</li>
<li data-state="ne" class="ne">b</li>
<li data-state="nv" class="nv">c</li>
<li data-state="nh" class="nh">d</li>
<li data-state="nj" class="nj">e</li>
<li data-state="nm" class="nm">f</li>
<li data-state="ny" class="ny">g</li>
<li data-state="nc" class="nc">h</li>
<li data-state="nd" class="nd">i</li>
<li data-state="oh" class="oh">j</li>
<li data-state="ok" class="ok">k</li>
<li data-state="or" class="or">l</li>
<li data-state="pa" class="pa">m</li>
<li data-state="ri" class="ri">n</li>
<li data-state="sc" class="sc">o</li>
<li data-state="sd" class="sd">p</li>
<li data-state="tn" class="tn">q</li>
<li data-state="tx" class="tx">r</li>
<li data-state="ut" class="ut">s</li>
<li data-state="va" class="va">t</li>
<li data-state="vt" class="vt">u</li>
<li data-state="wa" class="wa">v</li>
<li data-state="wv" class="wv">w</li>
<li data-state="wi" class="wi">x</li>
<li data-state="wy" class="wy">y</li>
</ul>
<script type="text/javascript" src="flicker.js">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment