Bubble plot

Global disaster deaths over time, sized by death toll.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/disasters.csv"
  },
  "width": 600,
  "height": 400,
  "transform": [
    {
      "filter": "datum.Entity !== 'All natural disasters'"
    }
  ],
  "mark": {
    "type": "circle",
    "opacity": 0.8,
    "stroke": "black",
    "strokeWidth": 1
  },
  "encoding": {
    "x": {
      "field": "Year",
      "type": "temporal",
      "axis": {
        "grid": false
      }
    },
    "y": {
      "field": "Entity",
      "type": "nominal",
      "axis": {
        "title": ""
      }
    },
    "size": {
      "field": "Deaths",
      "type": "quantitative",
      "title": "Annual Global Deaths",
      "legend": {
        "clipHeight": 30
      },
      "scale": {
        "rangeMax": 5000
      }
    },
    "color": {
      "field": "Entity",
      "type": "nominal",
      "legend": null
    }
  }
}

Usage

import { olliVis } from 'olli';
import { VegaLiteAdapter } from 'olli/adapters';

// vlSpec is your Vega-Lite specification (shown above)
const olliSpec = await VegaLiteAdapter(vlSpec);
olliVis(olliSpec, document.getElementById('olli-tree'));