Public
Edited
Sep 8, 2023
Insert cell
Insert cell
Insert cell
Insert cell
To attach a file to a notebook:
1. Open the **Files** pane by clicking the <svg width="16" height="16" viewBox="0 0 16 16" fill="" stroke-width="2"><path d="M7.19855 2.52175L7.88131 1.79111L7.19855 2.52175ZM12.6 11.7764L13.2581 11.0234L12.6 11.7764ZM5.34191 6.76078L11.9419 12.5293L13.2581 11.0234L6.65809 5.2549L5.34191 6.76078ZM10.8958 13.6864L3.35462 6.63385L1.98852 8.09459L9.52965 15.1472L10.8958 13.6864ZM6.51578 3.25238L13.8172 10.0755L15.1828 8.61419L7.88131 1.79111L6.51578 3.25238ZM3.08395 3.55474C3.91017 2.45311 5.50967 2.31219 6.51578 3.25238L7.88131 1.79111C6.0058 0.0384695 3.02413 0.301162 1.48395 2.35474L3.08395 3.55474ZM3.35462 6.63385C2.49183 5.82695 2.37516 4.49978 3.08395 3.55474L1.48395 2.35474C0.162683 4.11642 0.380169 6.59044 1.98852 8.09459L3.35462 6.63385ZM11.993 13.6551C11.6977 13.9647 11.2082 13.9786 10.8958 13.6864L9.52965 15.1472C10.6432 16.1886 12.3878 16.1388 13.4402 15.0356L11.993 13.6551ZM11.9419 12.5293C12.2764 12.8216 12.2996 13.3337 11.993 13.6551L13.4402 15.0356C14.5328 13.8903 14.4499 12.0651 13.2581 11.0234L11.9419 12.5293Z"></path></svg> icon, in the top-right corner of the notebook. You'll see the Files pane appear, and the **File attachments** menu item (also with a paper clip icon).
2. Click the <svg viewBox="0 0 16 16" width="16" height="16" stroke="currentColor" stroke-width="2"><path d="M3 8h10M8 3v10"></path></svg> icon or drag and drop a file directly from your computer.
Insert cell
example.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
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
Insert cell
workbook = FileAttachment("Laser_Report_2020@1.xlsx").xlsx()
Insert cell
Insert cell
Insert cell
dogZip = FileAttachment("Dog_Photos@3.zip").zip()
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
Insert cell
data.columns // in case you’re curious
Insert cell
Insert cell
typed = FileAttachment("example.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
array = FileAttachment("example.csv").csv({array: true})
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
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
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
Insert cell
<a href="${await FileAttachment("example.pdf").url()}" download>Click here to download a PDF.</a>
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {free, pro, enterprise} from "@observablehq/pro-tag"

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