diff --git a/templates/default/docs/components/bigNumber.js.tmpl b/templates/default/docs/components/bigNumber.js.tmpl
deleted file mode 100644
index dd5b1dfa4..000000000
--- a/templates/default/docs/components/bigNumber.js.tmpl
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as d3 from "npm:d3";
-import {html} from "npm:htl";
-
-export function BigNumber(
-  number,
-  {
-    href,
-    target = "_blank",
-    title,
-    format = ",.2~f",
-    trend,
-    trendFormat = "+.1~%",
-    trendColor = trend > 0 ? "green" : trend < 0 ? "red" : "orange",
-    trendArrow = trend > 0 ? "↗︎" : trend < 0 ? "↘︎" : "→",
-    plot
-  } = {}
-) {
-  if (typeof format !== "function") format = typeof number === "string" ? String : d3.format(format);
-  if (typeof trendFormat !== "function") trendFormat = d3.format(trendFormat);
-  const div = html`<div style="display: flex; flex-direction: column; font-family: var(--sans-serif);">
-    <div style="text-transform: uppercase; font-size: 12px;">${title}</div>
-    <div style="display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline;">
-      <div style="font-size: 32px; font-weight: bold; line-height: 1;">${format(number)}</div>
-      ${trend == null
-        ? null
-        : html`<div style="font-size: 14px; color: ${trendColor};">${trendFormat(trend)} ${trendArrow}</div>`}
-    </div>
-    ${plot}
-  </div>`;
-  return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`;
-}
diff --git a/templates/default/docs/components/timeline.js.tmpl b/templates/default/docs/components/timeline.js.tmpl
new file mode 100644
index 000000000..5f51809a2
--- /dev/null
+++ b/templates/default/docs/components/timeline.js.tmpl
@@ -0,0 +1,31 @@
+import * as Plot from "npm:@observablehq/plot";
+import * as d3 from "npm:d3";
+
+export function timeline(events) {
+  return Plot.plot({
+    insetTop: 30,
+    insetBottom: 10,
+    insetRight: 10,
+    height: 250,
+    x: {
+      domain: d3.extent(events, (d) => d["year"]),
+      label: "Year",
+      nice: true,
+    },
+    y: { axis: null },
+    marks: [
+      Plot.axisX({tickFormat: d3.format(".0f")}),
+      Plot.ruleX(events, {x: "year", y: "y", stroke: "#eee", strokeWidth: 2}),
+      Plot.ruleY([0], {stroke: "#eee"}),
+      Plot.dot(events, {x: "year", y: "y", fill: "currentColor", r: 5}),
+      Plot.text(events, {
+        x: "year",
+        y: "y",
+        text: "name",
+        dy: -20,
+        lineWidth: 10,
+        fontSize: 12,
+      }),
+    ]
+  });
+}
diff --git a/templates/default/docs/example-dashboard.md.tmpl b/templates/default/docs/example-dashboard.md.tmpl
index 4b79a0170..ee60de246 100644
--- a/templates/default/docs/example-dashboard.md.tmpl
+++ b/templates/default/docs/example-dashboard.md.tmpl
@@ -5,38 +5,36 @@ theme: dashboard
 
 # Rocket launches 🚀
 
-<!-- import components and tools -->
-
-```js
-import {BigNumber} from "./components/bigNumber.js";
-```
-
 <!-- load and transform the data -->
 
 ```js
-const launchHistory = await FileAttachment("data/launchHistory.csv") // data loader
-  .csv({typed: true})
-const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id).length;
+const launchHistory = await FileAttachment("data/launchHistory.csv")
+  .csv({typed: true});
+
+const format = d3.format(",");
+function launches(id) {
+  return format(launchHistory.filter((d) => d.stateId === id).length);
+}
 ```
 
-<!-- embed BigNumber into cards -->
+<!-- cards with big numbers -->
 
 <div class="grid grid-cols-4">
   <div class="card">
     <h2>United States</h2>
-    ${BigNumber(countLaunchesByStateId("US"), {title: "Launches"})}
+    <span class="big">${launches("US")}</span>
   </div>
   <div class="card">
     <h2>Soviet Union</h2>
-    ${BigNumber(countLaunchesByStateId("SU"), {title: "Launches"})}
+    <span class="big">${launches("SU")}</span>
   </div>
   <div class="card">
     <h2>Russia</h2>
-    ${BigNumber(countLaunchesByStateId("RU"), {title: "Launches"})}
+    <span class="big">${launches("RU")}</span>
   </div>
   <div class="card">
     <h2>China</h2>
-    ${BigNumber(countLaunchesByStateId("CN"), {title: "Launches"})}
+    <span class="big">${launches("CN")}</span>
   </div>
 </div>
 
@@ -45,17 +43,17 @@ const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id)
 <div class="card grid grid-cols-8">
   ${resize((width) => Plot.plot({
     width,
-    title: "Launches Over the Years",
+    title: "Launches over the years",
     height: 300,
-    x: { label: null, interval: "year" },
-    y: { grid: true, label: "Launches" },
-    color: { legend: true, label: "State" },
+    x: {label: null, interval: "year"},
+    y: {grid: true, label: "Launches"},
+    color: {legend: true, label: "State"},
     marks: [
       Plot.barY(
         launchHistory,
         Plot.groupX(
-          { y: "count" },
-          { x: d => new Date(d.date), fill: "state", tip: {format: {x: false}} }
+          {y: "count"},
+          {x: d => new Date(d.date), fill: "state", tip: {format: {x: false}}}
         )
       ),
       Plot.ruleY([0])
diff --git a/templates/default/docs/example-report.md.tmpl b/templates/default/docs/example-report.md.tmpl
index 820d86358..f3c922fe0 100644
--- a/templates/default/docs/example-report.md.tmpl
+++ b/templates/default/docs/example-report.md.tmpl
@@ -2,9 +2,9 @@
 toc: true
 ---
 
-# A brief history of rocket launches 🚀
+# A brief history of space exploration
 
-This report is a brief overview of the history and current state of rocket launches and general space exploration.
+This report is a brief overview of the history and current state of rocket launches and space exploration.
 
 ## Background
 
@@ -16,37 +16,16 @@ This led to the launch of the first artificial satellite, Sputnik 1, and the man
 
 ## The Space Shuttle era
 
-The late 20th century witnessed a significant milestone in rocket launches.
+```js
+const events = FileAttachment("./data/spaceHistory.json").json();
+```
 
 ```js
-const events = await FileAttachment("./data/spaceHistory.json").json(); // static file
+import {timeline} from "./components/timeline.js";
 ```
 
 ```js
-const timeline = Plot.plot({
-  insetTop: 30,
-  insetBottom: 10,
-  insetRight: 10,
-  height: 250,
-  x: {
-    domain: d3.extent(events, d => d["year"]),
-    label: "Year",
-    nice: true
-  },
-  y: { axis: null },
-  marks: [
-    Plot.axisX({
-      tickFormat: d3.format(".0f"),
-    }),
-    Plot.ruleX(events, { x: "year", y: "y", stroke: "#eee", strokeWidth: 2 }),
-    Plot.ruleY([0], {stroke: "#eee"}),
-    Plot.dot(events, {x: "year" , y: "y", fill: "currentColor", r: 5}),
-    Plot.text(
-      events,
-      {x: "year", y: "y", text: "name", dy: -20, lineWidth: 10, fontSize: 12}),
-  ]
-});
-display(timeline);
+display(timeline(events));
 ```
 
 ### Sputnik 1 (1957)
diff --git a/test/create-test.ts b/test/create-test.ts
index b993c519c..13e164a83 100644
--- a/test/create-test.ts
+++ b/test/create-test.ts
@@ -12,7 +12,7 @@ describe("create", async () => {
       new Set(effects.outputs.keys()),
       new Set([
         "template-test/.gitignore",
-        "template-test/docs/components/bigNumber.js",
+        "template-test/docs/components/timeline.js",
         "template-test/docs/data/launchHistory.csv.js",
         "template-test/docs/data/spaceHistory.json",
         "template-test/docs/example-dashboard.md",