Old school D3 from simpler times

All examples By author By category About

chiehrosswang

Full window Github gist

US State Grid - States I've Been to

Highlighting states I've been to on the US State Grid, forked from NPashaP's block.

<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; 
}

.VISITED{background:#b3de69;}
.NOTVISITED{background:#fb8072;}
</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 ={
 'VISITED':['PA', 'KY', 'MD', 'OH', 'TN', 'VA', 'WV', 'DC',
            'AL', 'FL', 'GA', 'MS', 'NC', 'SC', 'CA', 'IN',
           	'MI', 'LA']
};
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>

https://d3js.org/d3.v4.min.js