Skip to content

Instantly share code, notes, and snippets.

@NPashaP
Last active October 25, 2018 06:30
Show Gist options
  • Save NPashaP/596426138e0ac26b8284fd5284b6a5c9 to your computer and use it in GitHub Desktop.
Save NPashaP/596426138e0ac26b8284fd5284b6a5c9 to your computer and use it in GitHub Desktop.
India State Grid
license: gpl-3.0
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment