Let's make a TopoJSON map and view it with D3.js

Question

I made the following TopoJSON file: https://gofile.io/d/CKBGhF

I want to view it in my browser with a basic D3.js script. From https://bost.ocks.org/mike/map/ I found a small tutorial about the script. But because my map is made from a vector converted into TopoJSON it has no real coordinates. With QGIS I saved it first as a GeoJSON and with mapshaper I saved it as TopoJSON.

How should I view my map? Are the coordinates or scaling completely wrong? Or is my TopoJSON not good?

My HTML/Javascript code (I only changed the filename):

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

/* CSS goes here. */

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

var width = 960,
    height = 1160;

var projection = d3.geo.mercator()
    .scale(500)
    .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);

d3.json("topojson_mapshaper.json", function(error, uk) {
  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.subunits))
      .attr("d", path);
});

</script>

score 3 · Answer 1 · answered Jun 16 '20 at 00:48

In my response I'm upgrading all code to d3v5 due to the inclusion of new features since d3v4 that aid with drawing this data (such as d3.geoIdentity, projection.fitSize). Since D3 v4 there are some changes to D3 namespace (d3.geo.path and d3.geo.projectionName are now d3.geoPath and d3.geoProjectionName). And in D3v5, d3.json now returns promise.

There are a few things at play here.

Topojson.feature

First, D3 only draws geojson objects with d3.geoPath, D3 does not draw topojson directly. So your data, while stored as topojson, is converted to geojson here:

topojson.feature(uk, uk.objects.subunits)

But, your topojson data uk, doesn't have a subunits property that contains features. You instead have a sub unit property called test:

 ...463908,4.10162]},"objects":{"test":{"type":"GeometryCollection"...

Normally platforms such as mapshaper apply the filename of the source file as the sub property name, so I'm guessing your source file, exported from QGIS, was test.geojson or something to that effect.

If we log:

console.log(topojson.feature(uk, uk.objects.test))

We see valid geojson. Now that we have geojson, we can draw it.

Coordinates

As for coordinate systems, topojson preserves the original coordinate system by default. When converting back to geojson, your coordinates will be the same as originally. So this statement "it has no real coordinates" isn't true unless your source data has no real coordinates.

However, you can project or reproject points from the command line, or with mapshaper, while producing topojson. It appears you have applied a projection on your points because when I convert your topojson to geojson, I see coordinates that look like pixel values (units that are unlikely to be the original coordinates exported from QGIS).

If using projected coordinates (Cartesian points, not lat long pairs, whether units are meters or pixels), we cannot use a D3 geoProjection: these take 3D points and project them to a plane.

Since your values look like pixel values, we can pass your data directly to a null projection:

var path = d3.geoPath()

Or, more explicitly:

var path = d3.geoPath(null);
var path = d3.geoPath().projection(null);

In D3v3 and earlier, this needs to be explicitly set

This applies no transform to the coordinates in the geojson. It treats each geojson coordinate as a pixel coordinate and draws your features accordingly (example)

However, that option isn't useful if the projected extent of our features doesn't match the SVG/Canvas extent. Instead, we could use a geoTransform or geoIdentity to apply an appropriate transform.

The geoIdentity option is the easiest as it provides the convenient fitSize method that lets us automagically size the geojson to our SVG/Canvas dimensions (fitExtent allows specification of a margin, while fitSize assumes no margin). All of these options can be passed to d3.geoPath as a projection (example, full screen).

The last example should show you how to draw the data. You mostly have line strings, which will make filling features difficult, unless you only wish to show borders.

Further Reading

Based on previous experience, there are a few related questions that come to mind:

Preprojected Geometry vs Projecting on the Fly

This question addresses possible quesions on pre-projected geometry as it appears you have preprojected your geometry for a screen size. This introduces alignment challenges, the trade off is quicker rendering time.

Scaling a Map to Fit SVG

This question deals with preprojected geometry and fitting the features to the screen. It speaks more in depth to fitSize, fitExtent, and geoTransform.

Let's make a TopoJSON map and view it with D3.js

1 Answers1