block by NPashaP 596426138e0ac26b8284fd5284b6a5c9

India State Grid

Full Screen

index.html

<html>
<head>
<meta charset="utf-8">
<style>
body{
    -webkit-font-smoothing: antialiased;
    font-family: Roboto,sans-serif;
    width:960px;
    height:700px;
    margin:50px auto;
}
.state-td{
    background: #2196F3; 
    color:white;
    border: 2px solid white; 
    text-align: center; 
}
</style>
</head>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<table id="st-grid" style="width:600px; margin:0 auto;height:600px;table-layout:fixed;border-collapse:collapse;"><tbody></tbody></table>

<script>

var stateLoc =[
 [    ,    ,"JK",    ,    ,    ,    ,    ]
,[    ,"PB","HP","CH",    ,    ,    ,    ]
,[    ,    ,"HR","UK",    ,"SK",    ,"AR"]
,[    ,"RJ","DL","UP","BR","WB","AS","NL"]
,["DD","GJ","MP","CG","OR","JH","ML","MN"]
,[    ,"DH","MH","TS","AP",    ,"TR","MZ"]
,[    ,    ,"GA","KA",    ,    ,    ,    ]
,["LD",    ,"KL","TN","PY",    ,    ,"AN"]
];

	
var IndiaState ={	
 "AP":"Andhra Pradesh"
,"AR":"Arunachal Pradesh"
,"AS":"Assam"
,"BR":"Bihar"
,"CG":"Chhattisgarh"
,"GA":"Goa"
,"GJ":"Gujarat"
,"HR":"Haryana"
,"HP":"Himachal Pradesh"
,"JK":"Jammu and Kashmir"
,"JH":"Jharkhand"
,"KA":"Karnataka"
,"KL":"Kerala"
,"MP":"Madhya Pradesh"
,"MH":"Maharashtra"
,"MN":"Manipur"
,"ML":"Meghalaya"
,"MZ":"Mizoram"
,"NL":"Nagaland"
,"OR":"Orissa"
,"PB":"Punjab"
,"RJ":"Rajasthan"
,"SK":"Sikkim"
,"TN":"Tamil Nadu"
,"TR":"Tripura"
,"UK":"Uttarakhand"
,"UP":"Uttar Pradesh"
,"WB":"West Bengal"
,"TS":"Telangana"
,"AN":"Andaman and Nicobar Islands"
,"CH":"Chandigarh"
,"DH":"Dadra and Nagar Haveli"
,"DD":"Daman and Diu"
,"DL":"Delhi"
,"LD":"Lakshadweep"
,"PY":"Pondicherry"
};

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 ";})
	.text(function(d){ return d})
	.attr("title",function(d){ return IndiaState[d];});

 // adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height", "700px").style("width", "960px"); 
</script>
</body>