Example post with interactive data

This is a sample post so you can see every blog feature. To write your own, copy posts/example-interactive-post.md, change the name and the text, and delete this file before you launch the blog.

What a post can do#

Everything below is plain Markdown. The extras are the callouts, the copy button on code, and the interactive charts.

Weekly mileage#

A line chart with one series, written the longer way as JSON. The table underneath is always there for readers who prefer numbers, and for people without JavaScript.

Typing data like a spreadsheet#

You don't have to write JSON. Put a few settings at the top, a line of three dashes, then paste rows straight from a spreadsheet. The first row names the series, and each row after it is a label followed by one value per series. Times like 9:45 are understood, so a pace chart is easy to type.

Click a name in the legend to hide that line. Lines differ by dash pattern and marker shape, and are also labelled at their right-hand end, so they are easy to tell apart without relying on colour.

Comparing categories#

Showing commands#

Code blocks get a copy button:

npm run build

Leaving the table of contents out#

Posts with three or more headings get a table of contents automatically. Add toc: false to the top of the file to turn it off.