Public
Edited
Jan 4, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
attachment = FileAttachment("example.json")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
json = FileAttachment("example.json").json()
Insert cell
json.hello.world
Insert cell
Insert cell
data = FileAttachment("example.csv").csv()
Insert cell
data.columns // in case you’re curious
Insert cell
Insert cell
typed = FileAttachment("example.csv").csv({typed: true})
Insert cell
Insert cell
array = FileAttachment("example.csv").csv({array: true})
Insert cell
Insert cell
Insert cell
sp500 = FileAttachment("sp500.csv").csv()
.then(data => {
const parseCommas = (d) => Number(d.replace(/,/g, ""));
return data.map(row => ({
Open: parseCommas(row.Open)
}))
})
Insert cell
Insert cell
image = FileAttachment("example.png").image({width: 400, style: "border: 1px solid black"})
Insert cell
Insert cell
<figure>
${await FileAttachment("the-persistence-of-memory.jpg").image()}
<figcaption>Image: <a href="https://en.wikipedia.org/wiki/The_Persistence_of_Memory">Salvador Dali</a></figcaption>
</figure>
Insert cell
Insert cell
shapefile = require("shapefile@0.6")
Insert cell
collection = shapefile.read(await FileAttachment("example.shp").arrayBuffer())
Insert cell
Insert cell
chunk = {
const stream = await FileAttachment("example.shp").stream();
const reader = stream.getReader();
let done, value;
while (({done, value} = await reader.read()), !done) {
yield value;
}
}
Insert cell
Insert cell
<a href="${await FileAttachment("example.pdf").url()}" download>Click here to download a PDF.</a>
Insert cell
Insert cell
blob = FileAttachment("example.csv").blob()
Insert cell
Insert cell
Insert cell
FileAttachment("exemple.txt") // Oops!
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
keys = s => htl.html`<span style="font-family:var(--sans-serif);font-size:90%;">${keysText(s)}`
Insert cell
import {keys as keysText, mac} from "@observablehq/keys"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more