Earthquakes Feed

Earthquake data from the USGS live feed. To show land masses, this example loads and parses TopoJSON data in the database. Requires the DuckDB spatial extension.

Loading Example... ⏳

Credit: Adapted from an Observable Plot example.

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadExtension("spatial"),
  vg.loadSpatial("feed", "data/usgs-feed.geojson"),
  vg.loadSpatial("world", "data/countries-110m.json", {layer: "land"})
]);

export default vg.plot(
  vg.geo(
    vg.from("world"),
    {fill: "currentColor", fillOpacity: 0.2}
  ),
  vg.sphere({strokeWidth: 0.5}),
  vg.geo(
    vg.from("feed"),
    {
      r: vg.sql`POW(10, mag)`,
      stroke: "red",
      fill: "red",
      fillOpacity: 0.2,
      title: "title",
      href: "url",
      target: "_blank"
    }
  ),
  vg.margin(2),
  vg.projectionType("equirectangular")
);

YAML

meta:
  title: Earthquakes Feed
  description: >
    Earthquake data from the USGS live feed.
    To show land masses, this example loads and parses TopoJSON data in the database.
    Requires the DuckDB `spatial` extension.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-live-earthquake-map).
data:
  feed:
    type: spatial
    file: data/usgs-feed.geojson
  world:
    type: spatial
    file: data/countries-110m.json
    layer: land
plot:
- mark: geo
  data: { from: world }
  fill: currentColor
  fillOpacity: 0.2
- mark: sphere
  strokeWidth: 0.5
- mark: geo
  data: { from: feed }
  r: { sql: "POW(10, mag)" }
  stroke: red
  fill: red
  fillOpacity: 0.2
  title: title
  href: url
  target: _blank
margin: 2
projectionType: equirectangular

JSON

{
  "meta": {
    "title": "Earthquakes Feed",
    "description": "Earthquake data from the USGS live feed. To show land masses, this example loads and parses TopoJSON data in the database. Requires the DuckDB `spatial` extension.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-live-earthquake-map)."
  },
  "data": {
    "feed": {
      "type": "spatial",
      "file": "data/usgs-feed.geojson"
    },
    "world": {
      "type": "spatial",
      "file": "data/countries-110m.json",
      "layer": "land"
    }
  },
  "plot": [
    {
      "mark": "geo",
      "data": {
        "from": "world"
      },
      "fill": "currentColor",
      "fillOpacity": 0.2
    },
    {
      "mark": "sphere",
      "strokeWidth": 0.5
    },
    {
      "mark": "geo",
      "data": {
        "from": "feed"
      },
      "r": {
        "sql": "POW(10, mag)"
      },
      "stroke": "red",
      "fill": "red",
      "fillOpacity": 0.2,
      "title": "title",
      "href": "url",
      "target": "_blank"
    }
  ],
  "margin": 2,
  "projectionType": "equirectangular"
}

Python

import vgplot as vg

feed = vg.spatial("data/usgs-feed.geojson")
world = vg.spatial("data/countries-110m.json", layer="land")

view = vg.plot(
    vg.geo(world, fill="currentColor", fill_opacity=0.2),
    vg.sphere(stroke_width=0.5),
    vg.geo(
        feed,
        r=vg.sql("POW(10, mag)"),
        stroke="red",
        fill="red",
        fill_opacity=0.2,
        title="title",
        href="url",
        target="_blank",
    ),
    vg.margin(2),
    vg.projection_type("equirectangular"),
)