Declarative Visualizations with Vega-Lite

Vega-Lite is a high-level grammar for interactive visualization. You write a JSON specification; Vega-Lite renders the chart. Enable it with vega: true.

Particle Speed — Scatter Plot

Rest mass vs maximum observed speed for fundamental particles:

Paper Length — Histogram

Distribution of page counts across 500 randomly sampled physics papers (fictional data):

Citations by Decade — Small Multiples

Faceted bar chart: citations per decade, one panel per topic:

Usage

---
title: My Post With Vega-Lite
vega: true
---

Create a container <div id="vis1"></div> and call vegaEmbed using the polling pattern:

(function poll() {
  if (typeof vegaEmbed === 'undefined') {
    setTimeout(poll, 50);
    return;
  }
  vegaEmbed('#vis1', spec, { actions: false });
})();

All charts are responsive — "width": "container" makes them fill the available width.