D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
NPashaP
Full window
Github gist
India State Grid
<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>
https://d3js.org/d3.v4.min.js