xxxxxxxxxx
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body {
font-family: Helvetica, sans-serif;
padding: 40px;
}
.countries {
stroke: #fff;
stroke-width:2px;
}
.legendLinear text {
font-size: 9px;
}
</style>
<body>
<h2>Current Malaria Rates in Africa</h2>
<p>Source: <a href="https://data.unicef.org/child-health/malaria.html">UNICEF</a>. Data shown is most recent data for countries with data available.</p>
<div id="vis"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1200,
height = 600;
var svg = d3.select('#vis').append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.mercator()
.scale(100) // mess with this if you want
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.ordinal().range(["#8C703A", "#ABACDB", "#B574B5", "#DBABC4", "#DBBFAB", "#ACD7E3", "#E6E687"]);
var countryById = d3.map();
// we use queue because we have 2 data files to load.
queue()
.defer(d3.json, "countries.json")
.defer(d3.csv, "indicators.csv", typeAndSet) // process
.await(loaded);
function typeAndSet(d) {
countryById.set(d.ISO3, d);
return d;
}
function getColor(d) {
var dataRow = countryById.get(d.id);
if (dataRow) {
console.log(dataRow);
return color(dataRow.Region);
} else {
console.log("no dataRow", d);
return "#ccc";
}
}
function getText(d) {
var dataRow = countryById.get(d.id);
if (dataRow) {
console.log(dataRow);
return dataRow.ShortName + ": " + dataRow.Region;
} else {
console.log("no dataRow", d);
return d.ShortName + ": No data.";
}
}
function loaded(error, countries, properties) {
console.log(countries);
console.log(properties);
color.domain(d3.extent(properties, function(d) {return d.Regions;}));
var world = topojson.feature(countries, countries.objects.units).features;
svg.selectAll('path.countries')
.data(world)
.enter()
.append('path')
.attr('class', 'countries')
.attr('d', path)
.attr('fill', function(d,i) {
console.log(d.properties.name);
return getColor(d);
})
.append("title")
.text(function(d) {
return getText(d);
});
var linear = color;
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(20,20)");
var legendLinear = d3.legend.color()
.shapeWidth(30)
.orient('vertical')
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
}
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js