Drawing the charts on this site at build time

Riley Hilliard — Sun, 01 Nov 2026 00:00:00 GMT

The charts on the steamfield.io home page ship as plain SVG. The page’s JavaScript contains no charting library, and the figures show up with scripts turned off. OpenChart renders each one during the Astro build from the same JSON spec you would hand its React component.

Rendering a spec to SVG

OpenChart’s vanilla package has a static entry point, renderStaticSVG, that takes a spec and returns an SVG string. It runs the same layout engine as the browser renderers, including label collision handling, so a static chart and an interactive one with the same spec look the same.

import { renderStaticSVG } from "@opendata-ai/openchart-vanilla/static";

const svg = renderStaticSVG(
  {
    mark: "line",
    data: weeklyCommits(),
    encoding: {
      x: { field: "week", type: "temporal" },
      y: { field: "commits", type: "quantitative" },
      color: { field: "product", type: "nominal" },
    },
    endpointLabels: true,
  },
  { width: 620, height: 320, watermark: false },
);

In Astro the string goes straight into the page with set:html. The SVG carries a viewBox, so a little CSS (width: 100%; height: auto) makes it scale with its column.

Matching the page’s palette

A static SVG has its colors written into attributes, so CSS variables can’t restyle it after the fact. OpenChart also computes some colors itself (label contrast against a bar, for instance), so it needs real values when it renders. The site’s chart helper passes a theme whose colors mirror the CSS tokens:

export function renderChart(build, { id, ...options }) {
  return renderStaticSVG(build(palette), {
    ...options,
    idPrefix: id,
    theme,
    darkMode: "force",
    watermark: false,
  });
}

build is a function of the palette rather than a fixed spec, so a figure can pick colors in its own encoding. The OpenData figure uses that to draw FRED in hot pink and every other source in a quiet violet. idPrefix keeps each chart’s gradient and clip-path IDs unique when several charts share a page.

The neon glow isn’t in the SVG. A CSS drop-shadow filter on the chart’s wrapper adds it, so the rendered markup stays plain and the glow can change without re-rendering anything:

.oc-figure svg {
  filter: drop-shadow(0 0 3px rgb(255 46 136 / 0.45))
    drop-shadow(0 0 10px rgb(160 77 255 / 0.25));
}

Problems we ran into

Bar lists ignore the theme. OpenChart 9’s barlist mark uses a fixed color list, so a themed palette never reaches it. The OpenData figure is a horizontal bar chart instead, with the rows reversed because band scales draw the first row at the bottom.

Tick labels used the theme’s axis color, which we had set to the hairline color. They were barely legible until axis pointed at the muted text color and the hairline moved to hairline.

Weekly commit counts were too spiky to chart. The first version of the OpenChart figure showed weekly commits per product, and one busy week of Stacks work flattened every other line. The figure now shows cumulative commits, which keeps every series readable.

Where the data comes from

The figures read JSON files checked into the repository. A script walks the git history of each product repository and writes daily commit counts. Another reads OpenData’s catalog snapshot. Both run by hand, so the build never depends on a network call, and each figure’s caption says how current its data is. The StatGlass and rr figures are illustrative and schematic respectively, and their captions say so.

Why Steamfield

Riley Hilliard — Sun, 01 Nov 2026 00:00:00 GMT

Steamfield builds its own products and takes no client work. Most of them are open source. Each one started as a tool we needed for our own work, and we still use all of them every day.

Until now each product had its own repository and its own site, spread across three GitHub accounts, so it wasn’t obvious they came from the same place or that they depend on each other. This site puts them side by side.

What we make

OpenData answers questions about public data. You connect it to Claude or ChatGPT, ask about rent in Austin or measles cases by county, and it finds the right government datasets, runs the numbers and draws a chart, with every figure linked to its source. The catalog holds 1,036 datasets from 213 sources right now.

OpenChart is the charting library OpenData draws with. You describe a chart as JSON and it handles scales, label collisions, responsive layout and dark mode. We split it out because the spec format turned out to be a good target for agents: it validates field by field, so a model that writes a bad chart gets told which field is wrong.

StatGlass is a menu bar system monitor for Apple Silicon Macs that keeps 30 days of history. It used to be called Kelvo. It exists because “why were the fans going at 3pm?” is a question every other monitor we tried could only answer at 3pm.

Stacks scaffolds projects for coding agents. It writes the instruction files, hooks, CI and tests an agent needs to work safely in a new repo, and then checks the result with stacks verify. This site was started with it.

rr runs commands on other machines. OpenData’s test suite is about 14,000 tests, and rr shards it across whatever hosts are free so a full run doesn’t tie up a laptop.

How they connect

Most of the products began as something OpenData needed. OpenChart was its charting code, split out once we wanted charts that looked like they belonged in a newspaper. rr came when OpenData’s test suite got slow enough that a full run tied up a laptop for the duration. Stacks came from writing the same agent setup into every new repository. StatGlass is the exception: it came from watching those builds and test runs heat up a laptop and wanting to see afterward what had happened.

The home page uses the products on each other where it can. OpenChart draws its charts at build time, the hero’s mountains are the commit history of every product repository, and the Stacks demo replays recorded output from scaffolding this site.

Why no services page

We don’t take client work, and we don’t plan to. Working only on our own products means we pick the problems and keep living with our decisions long after they ship. If you want to talk about one of the products, the address in the footer reaches a person.

What the blog covers

Posts cover how the products work and what we learn building them, such as how OpenChart places labels or how rr splits a 14,000-test suite across machines. They come out when there is something to write up. The RSS feed is the easiest way to follow along.

Steamfield blog