Population pyramid

A US population pyramid for 2000, rendered as a diverging bar chart.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A population pyramid for the US in 2000.",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/population.json"
  },
  "transform": [
    {
      "filter": "datum.year == 2000"
    },
    {
      "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
      "as": "gender"
    },
    {
      "calculate": "datum.sex == 2 ? -datum.people : datum.people",
      "as": "people"
    }
  ],
  "width": 300,
  "height": 200,
  "mark": "bar",
  "encoding": {
    "x": {
      "aggregate": "sum",
      "field": "people",
      "title": "population",
      "axis": {
        "format": "s"
      }
    },
    "y": {
      "field": "age",
      "type": "ordinal",
      "axis": null,
      "sort": "descending"
    },
    "color": {
      "field": "gender",
      "scale": {
        "range": [
          "#675193",
          "#ca8861"
        ]
      },
      "legend": {
        "orient": "top",
        "title": null
      }
    }
  },
  "config": {
    "view": {
      "stroke": null
    },
    "axis": {
      "grid": false
    }
  }
}

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'));