DeEgge DeEgge - 12 days ago 7
Javascript Question

D3 rendering map not completely

I am trying to follow a simple example to create a choropleth map of population density, like this Mike Bostock’s Block 6320825.

For this purpose I converted a relatively large (~35MB, German postal areas)

geojson
file to
topojson
and added population data. In the code, I calculate population density on the fly and
.map
this data to the topojson as
properties
.

enter image description here

Problem is, not the whole map is rendered, there are always parts of it missing. Rendering just the outlines works.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */
.plzRegions {
fill: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

/* JavaScript goes here. */
var width = 960;
height = 1160;

// color scale
var color = d3.scale.log()
.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
.interpolate(d3.interpolateHcl);

// projection and re-aligning
var projection = d3.geo.mercator()
.center([10, 51])
.scale(1200 * 4)
.translate([width / 2, height / 2]);

var path = d3.geo.path()
.projection(projection);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

// load topojson
d3.json("PLZ_GER_topo.json", function(error, ger){
if (error) return console.error(error);
console.log(ger);

var plzRegions = topojson.feature(ger, ger.objects.PLZ_EWZ_Germany).features;

// calculate population density and map to topojson
var densities = plzRegions
.map(function(d) { return d.properties.dichte = d.properties.ewz / (d3.geo.area(d) / 12.56637 * 510072000); })
.sort(function(a, b) { return a - b; });

color.domain([d3.quantile(densities, .01), d3.quantile(densities, .99)]);

svg.append("g")
.attr("class", "plzRegions")
.selectAll("path")
.data(plzRegions)
.enter().append("path")
.style("fill", function(d) { return color(d.properties.dichte); })
.attr("d", path);
});

</script>


Maybe it's a problem with asynchronous data calculation and rendering, but looking at the
console.log
, density calculation seems to go fine.

Any advice is much appreciated!

Update

"Working" example

Answer

Well, I fixed it, for most part at least. I just ran the file through Mapshaper, no simplification at all. There are still 2-3 holes, but that's probably due to topology errors in the original file.

npm install -g mapshaper
mapshaper -i PLZ_regions_Germany.geojson -simplify visvalingam 1.0 -o format=topojson new map.json