Old school D3 from simpler times

All examples By author By category About

jrzief

Full window Github gist

NJ Central Region

Built with blockbuilder.org

<!DOCTYPE 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; 
}
.SE{background:#FFEA00;}
.NE{background:#CE93D8;}
.MW{background:#FF9E80;}
.SW{background:#4CAF50;}
</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 muniLoc =[
 [    ,    , "Hillsborough", "Franklin" ,    ,    ,   ,   ]
,[    ,    ,"Montgomery",    ,"New Brunswick",    ,   ,  ]
,[    ,"Hopewell Boro","Hopewell Township","Pennington","Princeton","Plainsboro", "Jamsburg",  ]
,[ "Trenton","Ewing","Lawrence","West Windsor","Cranberry","Monroe",  ,  ]
,[  ,  ,"Hamilton","Robbinsville","Hightstown",  ,  ,  ]
];

var USRegions ={
 'NW':['Trenton', 'Ewing', 'Lawrence', 'Princeton', 'Pennington', 'Hopewell Boro', 'Hopewell Township']
,'SW':['Hamilton', 'Hightstown', 'West Windsor', 'Robbinsville', 'Plainsboro','Cranberry']
,'NE':['Hillsborough', 'Montgomery', 'New Brunswick', 'Franklin']
,'SE':['Monroe', 'Jamsburg']
};
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(muniLoc).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