I'm struggling getting my choropleth map to work. I have a CSV file of values and district names I want to match to my TopoJSON map. The data on the CSV map looks like this:
id, values
NAIROBI,50
MOMBASA,10
KWALE,20
KILIFI,40
TANA RIVER,50
LAMU,10
The id column is for names of districts in Kenya, the values are arbitrary and are just meant to generate colors according to the domain set for the threshold scale I am using. For some reason the colors just won't generate. Here is the rest of my code. Please let me know where I am going wrong? I keep trying to fix it to no avail:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="d3.v3.js"></script>
<script type="text/javascript" src="js/topojson.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body>
<div class="row">
<header class="span12">
<h1>Aphellion Activity 1 - Kenya Maps</h1>
<h3>The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.</h3>
</header>
</div>
</br>
<div class="row">
<div class="span6" id="Map1">
<p>This first map of Kenya was made using TopoJSON.</p>
</div>
<div class="span6" id="Map2">
<p>This second map of Kenya was made using GeoJSON.</p>
</div>
</div>
</body>
<script type="text/javascript">
var width = 460;
var height = 400;
//Setting the color domains for the choropleth maps
var color = d3.scale.threshold()
.domain([10, 20, 30, 40, 50])
.range(["#9e9ac8", "756bb1", "dadaeb", "bcbddc", "#E82D0C"]);
//TopoJSON Map
//new projection
var projection = d3.geo.mercator()
.center([36.8000, 1.2667])
.scale([1000])
.translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
//Drawing Choropleth
var svg = d3.select("div#Map1")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.call(d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoom));
d3.json("js/output.json", function(error, topology) {
d3.csv("js/Schools.csv", function(error, Schools) {
var rateById = {};
Schools.forEach(function (d) {
rateById[d.id] = +d.values;
});
g.append("g")
.attr("class", "districts")
.selectAll("path")
.data(topojson.feature(topology, topology.objects.kenya).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
return color(rateById[d.id]);
});
});
});
//Draw a rect around the map
svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none")
;
function zoom() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")};
</script>
</html>
You were very, very close. You were returning an empty hash, return rateById = {}; instead of declaring it for use in your code, var rateById = {};.
I have updated the PLUNK with the correct references to libraries and added CSS styling to it.
The only other change is that I used more contrasting colors for demo purposes, but you can uncomment your original colors and it will work just fine.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments