US State Grid

forked from NPashaP's block: US State Grid

<html>
<head>
<meta charset="utf-8">
<style>
body{
    font-family: Roboto,sans-serif;
	width:960px;
	margin:10px 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>

var data = [
	{date: "3-12-2018", task: "drink", color: "#7B4965", done: true},
	{date: "3-13-2018", task: "drink", color: "#7B4965", done: false},
	{date: "3-14-2018", task: "drink", color: "#7B4965", done: true},
	{date: "3-15-2018", task: "drink", color: "#7B4965", done: false},
	{date: "3-16-2018", task: "drink", color: "#7B4965", done: true},
	{date: "3-17-2018", task: "drink", color: "#7B4965", done: false},
	{date: "3-18-2018", task: "drink", color: "#7B4965", done: true},
	{date: "3-12-2018", task: "emails", color: "#497B5F", done: true},
	{date: "3-13-2018", task: "emails", color: "#497B5F", done: true},
	{date: "3-14-2018", task: "emails", color: "#497B5F", done: false},
	{date: "3-15-2018", task: "emails", color: "#497B5F", done: false},
	{date: "3-16-2018", task: "emails", color: "#497B5F", done: true},
	{date: "3-17-2018", task: "emails", color: "#497B5F", done: true},
	{date: "3-18-2018", task: "emails", color: "#497B5F", done: false},
    
];

d3.select("#st-grid").select("tbody")
	.selectAll("tr").data(columns).enter().append("tr")
	.selectAll("td").data(function(d){ return d;}).enter().append("td")
	.text(function(d){ return d})
	.style("background", function(d){ return d.color});

</script>
</body>

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