Observable Plot in HTML: draw a chart without a notebook

You copied a Plot expression from a notebook, and the browser page stays empty. Observable Plot returns a document element; append that element to your chart container. A chart created in JavaScript does not appear on the page until it is inserted into the document.

Start with a prepared dataset instead of a remote CSV. The worked example has fictional queue times of 5, 12, and 8 minutes for Intake, Review, and Dispatch. A 10-minute reference line makes the 12-minute queue easy to identify without asking the reader to compare colors.

Open the working example · Download the complete HTML

Load Plot and its D3 dependency

For an ordinary script-tag page, load the D3 browser bundle before Plot's browser bundle. The Plot getting-started documentation also offers an ES-module route and describes local copies for offline use.

With the library available, construct the chart and append it:

const rows = [
  {stage: 'Intake', minutes: 5},
  {stage: 'Review', minutes: 12},
  {stage: 'Dispatch', minutes: 8}
];
const container = document.querySelector('#queue-chart');
const chart = Plot.plot({
  width: container.clientWidth,
  height: 280,
  x: {label: 'Minutes', domain: [0, 15]},
  y: {label: null},
  marks: [
    Plot.barX(rows, {x: 'minutes', y: 'stage'}),
    Plot.ruleX([10], {stroke: '#9b3d32'}),
    Plot.text(rows, {
      x: 'minutes', y: 'stage', text: d => String(d.minutes),
      dx: 8, textAnchor: 'start'
    })
  ]
});
container.replaceChildren(chart);

The reference value is an illustrative threshold for this example, not an industry benchmark. Replace it with your own agreed value and state what it means. A target, a service commitment, and a statistical reference answer different questions.

Use values the reader can recover

Keep the three stage values in a small table below the plot. The chart labels show the minutes directly, so the reader does not need a hover action to recover the answer. The total of 25 is a sum of these three example values; it is not a claim about a real customer's elapsed journey.

For a real process report, decide whether the measurements describe one case or separate stage averages before adding them. Do not label a sum of unrelated averages as the measured duration of a single case.

Rebuild when the container width changes

The chart's width is chosen when Plot.plot() runs. Use a ResizeObserver on the container and call your drawing function with its new width. Replace the previous chart rather than appending another SVG after every resize.

Give the observer a simple guard: redraw only when the rounded width changed. This avoids treating the chart's own height change as a reason to draw again indefinitely. Keep the source rows outside the draw function so resizing cannot reset them to a different sample.

The D3-in-HTML guide covers building graphics from lower-level primitives. Plot is the separate API used here; its Plot.barX mark saves you from writing each bar and axis by hand.

Send the prepared page

The example download embeds its Plot and D3 libraries, source rows, text, and styles. Open that file at a narrow width and confirm that Review remains 12 minutes and crosses the 10-minute line. Keep the report's interpretation beside the chart when presenting the reading copy in NOS.