H1Charts that pull their data from the internetURL copied

A Vega-Lite spec can name a URL instead of embedding rows. The browser fetches it when the page renders, so the markdown stays a few lines no matter how large the data is.

Every chart here reads from cdn.jsdelivr.net/npm/vega-datasets, the public dataset bundle the Vega project publishes. Nothing on this page is stored in the repository.

H2A weather heatmap — 1,461 rows, four lines of data specURL copied

Seattle, daily, over four years. The CSV is fetched and binned in the browser.

Embedding those rows inline would be roughly 60 KB of markdown. The spec is under 20 lines.

H2Linked brushing — drag on the left, the right filtersURL copied

Two views over the same fetched dataset, joined by a selection. This is the class of chart the row grammar cannot reach.

Drag a rectangle over the scatter. The bar chart recounts as you move it. actions=true adds the export menu in the corner.

H2A choropleth — two remote files joined in the browserURL copied

A TopoJSON county map and a separate unemployment table, joined by FIPS code with a lookup transform. Two fetches, one chart, no build step.

This one sets a fixed width in the spec, because a projection needs real pixels rather than the container's width. It is narrower than the column, so it sits centred with even space either side.

H2Multi-series time, with a hover readoutURL copied

Stock closing prices, one line per symbol. Move the cursor across the chart: a rule follows the nearest date and the tooltip reads every symbol at once.

The pivot transform is what makes one tooltip carry five series: it turns the long table into one row per date with a column per symbol. Without it a tooltip can only ever report the single line under the cursor.

H2A binned heatmap — where two audiences agreeURL copied

Critics against the crowd, 2,260 films that carry both scores. Each cell is a count, so overlapping points become density instead of a solid smear.

The ridge runs bottom-left to top-right: the two audiences broadly agree. The spread is widest in the middle, where a film can be a 60 to critics and a 7.5 to viewers, or the reverse.

This chart replaced an earlier one plotting rating against worldwide gross. That version rendered but told you nothing: 92% of films earn under a tenth of the top-grossing film, so linear bins pressed almost every row into the bottom of the chart. A skewed measure needs a log scale or a rank, not a bin.

H2A spec kept in its own fileURL copied

Every chart above carries its spec inline. src reads it from a file instead, so a long spec does not bury the prose around it.

```vega title="..." src="interactive-scatter.json" height=560 actions=true
```

That is interactive-scatter.json: a nine-panel repeat over horsepower, acceleration and mileage, with two interval selections bound to different modifiers.

• Drag inside any panel to pan, and scroll to zoom — the grid selection is bind: "scales", so it moves the axes themselves.
• Shift-drag to brush. That selection resolves as a union across all nine panels, so points stay coloured by origin in every panel at once and grey everywhere they fall outside the brush.

src follows the same guard as a data file: relative to this document, under the content root, ending in .json, .yaml or .yml.

Two things about this spec are worth copying. It is a repeat, which is a composed spec, so it never receives the container width — Vega-Lite sizes the nine panels itself, and the result is centred in the column. And its data.url is absolute: a relative url in a spec resolves against the page that renders it, not against wherever the spec file lives.

H2What to know before using a remote URLURL copied

The fetch happens in the reader's browser, not at build time. The page is only as available as the host. A dataset that moves leaves a blank chart, and no test in this repository can catch that.

The URL is fetched with the reader's network, from the reader's IP. Point it only at data you would be comfortable every reader of the page requesting.

There is no path guard here, and there cannot be. src confines a path to the content root because the server reads that file. A Vega-Lite data.url is fetched by the browser under its own same-origin and CORS rules — which is also why the host must send permissive CORS headers, as jsdelivr does.

A static export will not inline it. vyasa build copies the spec, not the data.

So: remote URLs are right for large public datasets that would bloat the page, and for data that genuinely changes. For numbers you own, keep them in the repository next to the document and use src.