Search code examples
formattopojsonvega-lite

An existing vega-lite map suddenly seems very zoomed-in - what is happening?

I have a map with an older topojson format that once worked with Vega-Lite. Now we only see a purple square in this editor gist.

I've rebuilt the map with the same code but updated topojson in the vega editor and saved as a gist here.

With the new vega release, it seems like I need my topojson files to be formatted differently, with the arcs first, like the mapshaper.org export output. Why is this? It's broken several existing web maps, and took me a few hours to figure out. Seems like I can fix it with a workflow change, but I am curious.

Solution

  • Topojson data follows the left-hand rule for projected data (clockwise orientation for outer rings and counter- clockwise for interior rings), where the data in your topojson file is structured according the right-hand rule (counter-clockwise for outer rings and clockwise for interior rings). The order of your polygons seems negligible, but it defines which part is ‘inside’ and ‘outside’ the polgygons.

    You can do two things:

    1. Do not use a geographic projection, but the cartesian-like identity projection.
    2. Force your source data into the right order.

    Example for 1:

    "projection": {"type": "identity", "reflectY": true},

    see Vega Editor

    enter image description here

    Example for 2:

    Use MapShaper or Python to force your data in the right order. Here an example using Python

    import topojson as tp
import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/nycehs/NeighborhoodReports/master/visualizations/json/UHF42.topo_old.json')
tp.Topology(gdf).to_json('UHF42.topo_new.json')

    see Vega Editor

    enter image description here

    I wrote a bit about it before for Altair and Python Topojson

    And Mike Bostock for D3