Your map data is topoJson
but you are treating it as geoJson
. So as @AndrewReid pointed out there is no .features
property in it.
You can use topoJson.js to convert it:
<html>
<meta charset="utf-8" />
<head>
<title>geoPath measures</title>
</head>
<body>
<svg id="my_dataviz" width="1000" height="1000"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select('#my_dataviz');
var projection = d3.geoMercator().center([0, 5]);
var geoGenerator = d3.geoPath().projection(projection);
function update(someTopoJson) {
let geojson = topojson.feature(
someTopoJson,
someTopoJson.objects.continent_Africa_subunits
);
svg
.append('g')
.selectAll('path')
.data(geojson.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', 'steelblue');
}
d3.json(
'https://raw.githubusercontent.com/deldersveld/topojson/master/continents/africa.json',
function (err, json) {
update(json);
}
);
</script>
</body>
</html>