|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
#map { |
|
position: fixed; |
|
left: 0px; |
|
right: 0px; |
|
top: 0px; |
|
bottom: 0px; |
|
} |
|
.countries { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-linejoin: round; |
|
} |
|
.legendThreshold { |
|
font-size: 16px; |
|
font-family: sans-serif; |
|
} |
|
.legendTitle { |
|
font-weight: bold; |
|
font-size: 30px; |
|
fill: grey; |
|
} |
|
.chart-title { |
|
font-weight: bold; |
|
text-anchor: middle; |
|
} |
|
.caption { |
|
fill: #000; |
|
text-anchor: start; |
|
font-weight: bold; |
|
} |
|
</style> |
|
<div id="map"> |
|
<svg></svg> |
|
</div> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
|
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script> |
|
<script> |
|
// The svg |
|
var svg = d3.select("svg"), |
|
width = d3.select("#map").node().clientWidth, |
|
height = d3.select("#map").node().clientHeight; |
|
svg |
|
.attr("width", width) |
|
.attr("height", height) |
|
// Map and projection |
|
var path = d3.geoPath(); |
|
var projection = d3.geoNaturalEarth() |
|
.scale(width / 2 / Math.PI) |
|
.translate([width / 2, height / 2]) |
|
var path = d3.geoPath() |
|
.projection(projection); |
|
|
|
// Data and color scale |
|
var data = d3.map(); |
|
var colorScale = d3.scaleQuantize() |
|
.domain([0,1]) |
|
.range(d3.schemeReds[5]); |
|
|
|
// Legend |
|
var g = svg.append("g") |
|
.attr("class", "legendThreshold") |
|
.attr("transform", "translate(20,200)"); |
|
g.append("text") |
|
.attr("class", "chart-title") |
|
.attr("x", width/2) |
|
.attr("y", -100) |
|
.text("% of total coal capacity with lower running cost than new renewables"); |
|
|
|
var legend = d3.legendColor() |
|
.labelFormat(d3.format(".0%")) |
|
.shapePadding(4) |
|
.scale(colorScale) |
|
.title("2018"); |
|
|
|
svg.select(".legendThreshold") |
|
.call(legend); |
|
|
|
// Load external data and boot |
|
d3.queue() |
|
.defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson") |
|
.defer(d3.csv, "mooc-countries.csv", function(d) { |
|
data.set(d["alpha-3"], +d["%_cheaper_2018"]); }) |
|
.await(ready); |
|
|
|
function ready(error, topo) { |
|
if (error) throw error; |
|
|
|
// Draw the map |
|
svg.append("g") |
|
.attr("class", "countries") |
|
.selectAll("path") |
|
.data(topo.features) |
|
.enter().append("path") |
|
.attr("fill", function (d){ |
|
|
|
// Pull data for this country |
|
return colorScale(data.get(d.id) || 0); |
|
}) |
|
.attr("d", path); |
|
} |
|
</script> |