Choropleth map of India
Copyright © 2016-20, Sandhya Pillai - MIT License
Choropleth map of India
Copyright © 2016-20, Sandhya Pillai - MIT License
height:700 | |
license:mit |
Choropleth map showing districtwise male and female literacy. Based on similar maps by Mike Bostock. The district map of India is from DIVA GIS while the disputed areas of Jammu and Kashmir have been merged from Natural Earth. The district-wise literacy data is that of the 2011 Census.
function districtMap(districts, disputed) { | |
var width = 800, height = 700, scale = 1200; | |
var propTag = 'Literacy', ttName = 'Literacy Rate', unit = '%'; | |
function render(selection) { | |
selection.each(function() { | |
d3.select(this).select("svg").remove(); | |
var svg = d3.select(this).append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.select(this).select("#tooltip").remove(); | |
d3.select(this).append("div").attr("id", "tooltip").style("opacity", 0); | |
var projection = d3.geo.mercator() | |
.center([83, 23]) | |
.scale(scale) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path().projection(projection); | |
svg.selectAll(".district") | |
.data(districts.features) | |
.enter().append("path") | |
.attr("class", "district") | |
.style("fill", function(d) { return d.color; }) | |
.attr("d", path) | |
.on("mouseover", function(d) { | |
d3.select("#tooltip").transition() | |
.duration(200) | |
.style("opacity", .9); | |
d3.select("#tooltip").html("<h3>"+(d.id)+"</h3><h4>("+(d.properties.NAME_1)+")</h4><table>"+ | |
"<tr><td>"+ttName+"</td><td>"+(d.properties[propTag])+unit+"</td></tr>"+ | |
"</table>") | |
.style("left", (d3.event.pageX-document.getElementById('map').offsetLeft + 20) + "px") | |
.style("top", (d3.event.pageY-document.getElementById('map').offsetTop - 60) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
d3.select("#tooltip").transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
svg.selectAll(".disputed") | |
.data(disputed.features) | |
.enter().append("path") | |
.attr("class", "disputed") | |
.style("fill", function(d) { return d.color; }) | |
.attr("d", path); | |
}); | |
} // render | |
render.height = function(value) { | |
if (!arguments.length) return height; | |
height = value; | |
return render; | |
}; | |
render.width = function(value) { | |
if (!arguments.length) return width; | |
width = value; | |
return render; | |
}; | |
render.scale = function(value) { | |
if (!arguments.length) return scale; | |
scale = value; | |
return render; | |
}; | |
render.propTag = function(value) { | |
if (!arguments.length) return propTag; | |
propTag = value; | |
return render; | |
}; | |
render.ttName = function(value) { | |
if (!arguments.length) return ttName; | |
ttName = value; | |
return render; | |
}; | |
render.unit = function(value) { | |
if (!arguments.length) return unit; | |
unit = value; | |
return render; | |
}; | |
return render; | |
} // districtMap |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="literacyMap.css"> | |
</head> | |
<body> | |
<div id="demobox"> | |
<div id="map"> | |
<div id="select"></div> | |
</div> | |
</div> <!-- demobox --> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="//d3js.org/d3-queue.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script src="districtMap.js"></script> | |
<script src="literacyMap.js"></script> | |
</body> | |
</html> |
#map { position: relative; min-height: 500px; } | |
.district, .disputed, .state rect, .state path { stroke: #a9a9a9; stroke-width: 1px; } | |
.district:hover { stroke: #777777; stroke-width: 1px; fill-opacity: .7; } | |
.state:hover rect { stroke: #777777; stroke-width: 2px; fill-opacity: .7; } | |
.state:hover path { fill-opacity: .7; } | |
#select { | |
position:absolute; | |
left: 500px; | |
top: 100px; | |
font: 12px sans-serif; | |
color: #333; | |
} | |
#tooltip h3 { | |
margin:2px; | |
font-size:14px; | |
} | |
#tooltip h4 { | |
margin:2px; | |
font-size:10px; | |
} | |
#tooltip { | |
position: absolute; | |
background:rgba(0,0,0,0.8); | |
text-align: left; | |
border:1px; | |
border-radius:5px; | |
font: 12px sans-serif; | |
width:auto; | |
padding:4px; | |
color:white; | |
opacity:0; | |
pointer-events: none; | |
} | |
#tooltip table{ | |
table-layout:fixed; | |
} | |
#tooltip tr td{ | |
padding:2px; | |
margin:0; | |
} |
(function() { | |
d3.queue() | |
.defer(d3.json, "IND_adm2_Literacy.json") | |
.defer(d3.json, "ne_10m_admin_0_Kashmir_Occupied.json") | |
.await(function(error, topoMain, topoKashmir) { | |
var districts, disputed; | |
if (error) throw error; | |
// Features for districts and disputed areas | |
districts = topojson.feature(topoMain, topoMain.objects.IND_adm2); | |
disputed = topojson.feature(topoKashmir, topoKashmir.objects.ne_10m_admin_0_Kashmir_Occupied); | |
// Radio HTML | |
d3.select("#select").call(selectFilter()); | |
var filter = d3.select('#select input[name="gender"]:checked').node().value; | |
// Color codes for districts based on Literacy Rates | |
colorCode(districts.features, filter); | |
colorDisputed(disputed.features); | |
// Map render | |
var map = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter); | |
d3.select("#map").call(map); | |
// On change of selection re-render | |
d3.selectAll("#select input[name=gender]").on("change", function() { | |
filter = d3.select('#select input[name="gender"]:checked').node().value; | |
colorCode(districts.features, filter); | |
map = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter); | |
d3.select("#map").call(map); | |
}); | |
}); | |
}()); | |
function selectFilter() { | |
function render(selection) { | |
selection.each(function() { | |
d3.select(this).html("<form>"+ | |
"<input type='radio' name='gender' value='Literacy' checked> ALL<br>"+ | |
"<input type='radio' name='gender' value='FemaleLiteracy'> FEMALE<br>"+ | |
"<input type='radio' name='gender' value='MaleLiteracy'> MALE"+ | |
"</form>"); | |
}); | |
} // render | |
return render; | |
} // selectFilter | |
function colorCode(data, filter) { | |
var color = d3.scale.threshold() | |
.domain([65, 72, 78, 85]) | |
.range(["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"]); | |
data.forEach(function(d) { | |
if (isNaN(d.properties[filter])) { d.properties[filter] = 77; } | |
d.color = color(d.properties[filter]); | |
}); | |
} | |
function colorDisputed(data) { | |
var color = "#eaeafa"; | |
data.forEach(function(d) { | |
d.color = color; | |
}); | |
} |
how to render all this you provided in my browser?
yes... u can use your browser
IND_adm2_Literacy.json is missing here.....
https://bl.ocks.org/anilnairxyz/raw/11190f144a89b54c6698699f3a83b315/IND_adm2_Literacy.json
how to render all this you provided in my browser?