Stophface Stophface - 1 year ago 88
JSON Question

Unexpected lines/polygons when converting JSON to topoJSON

I converted a json (link to raw json file) to

on this website.
The source of the
is a Shapefile, which I got from link to shapefilesource.

I then want to display the
on a
map with
. Doing that, I follow this example hosted on GitHub.
That is the code I derived from the gitHub example:

<!DOCTYPE html>

<html lang="en">

<meta charset="utf-8">
<title>D3 Test</title>
<link rel="stylesheet" href="">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script src=""></script>

<div id="map" style="width:600px; height:600px;"></div>
var map = new L.Map("map", {
center: [37.8, -96.9],
zoom: 4
.addLayer(new L.TileLayer("http://{s}{z}/{x}/{y}.png"));

var svg ='svg');
var g = svg.append('g').attr('class', 'leaflet-zoom-hide');

d3.json("", function(error, collection) {
if (error) throw error;

var bounds = d3.geo.bounds(topojson.feature(collection, collection.objects.collection));
var path = d3.geo.path().projection(projectPoint);

var feature = g.selectAll('path')
.data(topojson.feature(collection, collection.objects.collection).features)

map.on('viewreset', reset);

// Reposition the SVG to cover the features.
function reset() {
var bottomLeft = projectPoint(bounds[0]),
topRight = projectPoint(bounds[1]);

svg.attr('width', topRight[0] - bottomLeft[0])
.attr('height', bottomLeft[1] - topRight[1])
.style('margin-left', bottomLeft[0] + 'px')
.style('margin-top', topRight[1] + 'px');

var translation = -bottomLeft[0] + ',' + -topRight[1];
g.attr('transform', 'translate(' + -bottomLeft[0] + ',' + -topRight[1] + ')');

feature.attr('d', path);
// Use Leaflet to implement a D3 geographic projection.
function projectPoint(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];


gets displayed. But, with unexpected Polygons/Lines:
unexpected polygons

When I display the
the polygons/lines are not there:
josn display

Whats going wrong with
? Is it something in my code or did the converting go wrong?

Answer Source

Whats going wrong with topoJSON? Is it something in my code or did the converting go wrong?

There's nothing wrong, that is a common artifact when a polygon crosses the antimeridian.

Reproject your data to a different map projection to avoid the antimeridian altogether, or use the --spherical and --cartesian topojson command-line options to work around the problem.

You should do a bit of research into antimeridian crossings. Also, try isolating the problematic geometries (i.e. russia), and seeing if that geometry alone gets transformed to TopoJSON and displayed in a proper manner. Isolating problematic geometries will make your life easier, and will make bugs more apparent.