Cannot Transform GeoJSON to TopoJOSN

Question

I am trying to transform GeoJSON to TopoJOSN in order to put into Vega-Lite. Therefore I can draw a map.

I used https://geojson-maps.ash.ms/ to download the .json for map Oceania (Low resolution), then I put this file into https://mapshaper.org/ so that I can export it again as .topojson

However, even I choose export as .topojson, the file still give me .json. Because when I put this URL to Vega-Late, it cannot display a Oceania map. (My code at the very bottom of the question)

Anyone know how can I transform into topojson? Or even maybe there is anything wrong with my URL?

Answer 1

A couple issues with your specification:

• your GeoJSON file does not include a feature named "states". It includes a feature named "custom".
• you are using the albersusa projection, which only shows the USA, and your GeoJSON has no data within this boundary.

Fixing these issues, and using an orthographic projection centered on Australia, gives you a better chart (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 500,
  "height": 300,
  "layer": [
    {
      "data": {
        "url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/Ausmap.geo.json",
        "format": {
          "type": "topojson",
          "feature": "custom"
        }
      },
      "mark": {
        "type": "geoshape",
        "fill": "lightgray",
        "stroke": "white"
      }
    },
    {
      "data": {
        "url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/rainfall_tidy.csv"
      },
      "mark": "circle",
      "encoding": {
        "longitude": {
          "field": "longitude",
          "type": "quantitative"
        },
        "latitude": {
          "field": "latitude",
          "type": "quantitative"
        },
        "size": {"value": 10},
        "color": {"value": "steelblue"}
      }
    }
  ],
  "config": {
    "projection": {
      "type": "orthographic",
      "rotate": [-140, 30, 0]
    }
  }
}