Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Last active October 25, 2018 06:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save NPashaP/83b99714956d55dc8022f2b685cfda57 to your computer and use it in GitHub Desktop.
Save NPashaP/83b99714956d55dc8022f2b685cfda57 to your computer and use it in GitHub Desktop.
Download ZIP
US State Grid
Raw
.block
license: gpl-3.0
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<style>
body{
-webkit-font-smoothing: antialiased;
font-family: Roboto,sans-serif;
width:960px;
margin:50px auto;
}
.state-td{
background: rgb(230, 230, 230);
border: 2px solid white;
text-align: center;
}
.CA{background:#18FFFF;}
.SE{background:#FFEA00;}
.NE{background:#CE93D8;}
.MW{background:#FF9E80;}
.SW{background:#4CAF50;}
.WE{background:#81D4FA;}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<table id="st-grid" style="width:600px; margin:0 auto;height:400px;table-layout:fixed;border-collapse:collapse;"><tbody></tbody></table>
<script>
var stateLoc =[
["AK", , , , , , , , , ,"ME"]
,[ , , , , , , , , ,"VT","NH"]
,["WA","ID","MT","ND","MN", ,"MI", ,"NY","MA","RI"]
,["OR","UT","WY","SD","IA","WI","IN","OH","PA","NJ","CT"]
,["CA","NV","CO","NE","MO","IL","KY","WV","VA","MD","DE"]
,[ ,"AZ","NM","KS","AR","TN","NC","SC","DC", , ]
,[ , , ,"OK","LA","MS","AL","GA", , , ]
,["HI", , ,"TX", , , , ,"FL", , ]
];
var USRegions ={
'CA':['DE', 'KY', 'MD', 'OH', 'TN', 'VA', 'WV', 'DC']
,'SE':['AL', 'AR', 'FL', 'GA', 'MS', 'NC', 'SC']
,'NE':['CT', 'MA', 'ME', 'NH', 'NJ', 'NY', 'PA', 'RI', 'VT']
,'MW':['IA', 'IL', 'IN', 'KS', 'MI', 'MN', 'MO', 'NE', 'ND', 'SD', 'WI']
,'SW':['AZ', 'CO', 'MT', 'NM', 'OK', 'TX', 'UT', 'WY']
,'WE':['CA', 'ID', 'NV', 'OR', 'WA']
};
var stateToRegion ={};
d3.keys(USRegions).forEach(function(r){
USRegions[r].forEach(function(st){ stateToRegion[st]=r; })
});
d3.select("#st-grid").select("tbody")
.selectAll("tr").data(stateLoc).enter().append("tr")
.selectAll("td").data(function(d){ return d;}).enter().append("td")
.attr("class",function(d){ return d==undefined? "blank-td" : "state-td " +stateToRegion[d];})
.text(function(d){ return d});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment