Putting coordinate value on topojson US map

Question

I am using react-d3-map-bubble library to plot US map. react lib- https://github.com/react-d3/react-d3-map-bubble

US map json file used - https://d3js.org/us-10m.v1.json

My target is to plot points on that map.

In current js file, counties object uses arcs and plots different points on US map. See here for pictorial discription - https://bl.ocks.org/mbostock/9943478

I have lat and longs instead of arcs/polygons. So, in json file I will be changing 'countries' object with below sample :

      {
        "type": "GeometryCollection",
        "geometries": [
            {
                "type": "Point",
                "properties": {
                    "name": "Some place in New Mexico",
                    "population": 54590
                },
                "arcs": [
                    []
                ],
                "coordinates":[33.500142,-111.929818]
            }
         ]
       }

With given transform function in US json I am not able to put given coordinates to the correct place on the Map.

Transform function

"transform": {
    "scale": [0.09996701564084985, 0.058373467440357915],
    "translate": [-56.77775821661018, 12.469025989284091]
}

So,

1. How could I get correct transform function for my coordinates which uses topojson?

OR

2. How could I get all coordinates converted into arcs/polygons, which could be directly placed in "counties" object?

Answer 1

Topojson and coordinates

I think there is some confusion about what topojson does: "I have lat and longs instead of arcs/polygons".

Topojson saves space by applying a "quantized delta-encoding for integer coordinates", but the real space savings can come from the use of arcs (geojson would contain the mutual boundary of two features twice, once for each feature). But d3 doesn't actually draw topojson, the data is converted back into geojson (as seen in your linked example):

topojson.feature(us, us.objects.counties).features

If moving from geojson to topojson and back again, your original coordinate system remains unchanged. So if you start with lat longs, you'll finish with lat longs. Arcs and polygons aren't alternative coordinate systems, they are shapes built with coordinates in any given coordinate system.

Problem

The problem is your topojson has encoded coordinates that aren't latitude and longitude pairs - in this case they are pixel values so that the feature is drawn on a coordinate plane that stretches from [0,0] to [960,600] in svg coordinate space. Why would they be in this odd coordinate space that isn't latitude longitude? So that you don't need to use a projection to draw them, this is faster in the browser and simpler for an example like what Mike Bostock might be trying to demonstrate in the linked block.

The topojson uses a projected coordinate space (which is on a 2d Cartesian plane). Your latitude longitude uses geographic coordinate space (which are points on a three dimensional ellipsoid).

Solutions

To convert your points to projected coordinate space you need to apply the same projection if you want features to be aligned.

Alternatively, you can get unprojected data for the US and project that and your latitude longitude points with the same projection.

1. Apply the same projection used for the US to each point

Normally you are not be able to easily figure out what projection a geojson or topojson (or shapefile for that matter if it is without a .prj file) uses if it is already projected. In this case we know it is a composite d3.geoAlbersUsa() projection, but we don't know the projection's parameters so we can't use it, unless we had access to additional data about the file, or if we made it ourselves and as a consequence knew what parameters we used.

Even if we had this information, we may find it cumbersome to scale the map for different svg/canvas sizes, as we would need to scale both projected data and unprojected data differently since we would be working with two different coordinate systems.

2. Get unprojected data for the US

It is not too difficult to find geographic data for the US states/counties/etc online. If you find shapefiles, they are easy to convert in tools such as mapshaper.org, though geojson or topojson files shouldn't be hard to find either. You just need to make sure that the coordinates use latitude longitude pairs (with the order of [long,lat], the example coordinate in your question uses [lat,long] which won't work.) rather than any other coordinate system.

Once you have this you need to make sure you apply the same projection to all features.

Why Scale and Translate Don't Help

The scale and translate of the topojson also don't refer to the projection parameters, but the quantized delta encoding used in the topojson.