DeEgge DeEgge - 1 year ago 77
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)

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

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">

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

<script src="//" charset="utf-8"></script>
<script src="//"></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%)"])

// 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()

var svg ="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);

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 = / (d3.geo.area(d) / 12.56637 * 510072000); })
.sort(function(a, b) { return a - b; });

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

.attr("class", "plzRegions")
.style("fill", function(d) { return color(; })
.attr("d", path);


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

Any advice is much appreciated!


"Working" example

Answer Source

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  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download