Skip to content

Commit a1c72b4

Browse files
ikesaumbostock
andauthored
warn about implicit display gotcha in the getting-started example (#813)
* warn about implicit display gotcha in the getting-started example * change getting-started first example to use display * change getting-started Plot.plot example to use display * prettier --------- Co-authored-by: Mike Bostock <[email protected]>
1 parent c807b88 commit a1c72b4

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

docs/getting-started.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ Now let’s add a page for our weather dashboard. Create a new file `docs/weathe
265265
# Weather report
266266

267267
```js
268-
1 + 2
268+
display(1 + 2);
269269
```
270270
````
271271

@@ -417,20 +417,22 @@ const forecast = FileAttachment("./data/forecast.json").json();
417417
Now let’s add a chart using <a href="./lib/plot">Observable Plot</a>. Framework includes a variety of <a href="./javascript/imports#implicit-imports">recommended libraries</a> by default, including `Plot`, and you can always <a href="./javascript/imports">import more</a> from npm. Replace the `display(forecast)` code block with the following code:
418418

419419
```js run=false
420-
Plot.plot({
421-
title: "Hourly temperature forecast",
422-
x: {type: "utc", ticks: "day", label: null},
423-
y: {grid: true, inset: 10, label: "Degrees (F)"},
424-
marks: [
425-
Plot.lineY(forecast.properties.periods, {
426-
x: "startTime",
427-
y: "temperature",
428-
z: null, // varying color, not series
429-
stroke: "temperature",
430-
curve: "step-after"
431-
})
432-
]
433-
})
420+
display(
421+
Plot.plot({
422+
title: "Hourly temperature forecast",
423+
x: {type: "utc", ticks: "day", label: null},
424+
y: {grid: true, inset: 10, label: "Degrees (F)"},
425+
marks: [
426+
Plot.lineY(forecast.properties.periods, {
427+
x: "startTime",
428+
y: "temperature",
429+
z: null, // varying color, not series
430+
stroke: "temperature",
431+
curve: "step-after"
432+
})
433+
]
434+
})
435+
);
434436
```
435437

436438
<div class="note">Because this is JSON data, <code>startTime</code> is a <code>string</code> rather than a <code>Date</code>. Setting the <code>type</code> of the <code>x</code> scale to <code>utc</code> tells Plot to interpret these values as temporal rather than ordinal.</div>

0 commit comments

Comments
 (0)