Published
Edited
Nov 5, 2020
4 stars
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
Insert cell
Insert cell
Insert cell
Insert cell
dataPreview = table ? table.view() : null
Insert cell
table = data ? aq.fromCSV(d3.csvFormat(data)) : null
Insert cell
Insert cell
Insert cell
dataName = ""
Insert cell
Insert cell
dataPublisher = ""
Insert cell
Insert cell
dataProvider = ""
Insert cell
Insert cell
dataDescription = ""
Insert cell
Insert cell
dataUrl = ""
Insert cell
Insert cell
dataIsPublic = undefined
Insert cell
Insert cell
historical = true
Insert cell
Insert cell
temporal = Boolean(dataStartDate && dataEndDate)
Insert cell
Insert cell
dataStartDate = undefined
Insert cell
Insert cell
dataEndDate = undefined
Insert cell
Insert cell
geoCovered = ""
Insert cell
Insert cell
geoDimensions = [""]
Insert cell
Insert cell
geoDimensionsForm = [""]
Insert cell
Insert cell
dataFormats = [""]
Insert cell
Insert cell
noDataCode = ""
Insert cell
Insert cell
hasAPI = dataApiUrl.length > 0
Insert cell
Insert cell
dataApiUrl = ""
Insert cell
Insert cell
dataLicense = ""
Insert cell
Insert cell
// e.g. FileAttachment("some-tabular-data-file.csv")
dataFileAttachment = undefined
Insert cell
Insert cell
// e.g. new Date("2020-09-30")
dataFileAttachmentDate = undefined
Insert cell
Insert cell
Insert cell
Insert cell
data = {
if (hasAPI && dataApiUrl) {
return fetch(dataApiUrl).then(res => {
if (res.ok) return res.json();
return res;
});
}

if (dataFileAttachment) {
return await dataFileAttachment.csv(); // <- change `.csv()` if the data is in another format, e.g. JSON
}
}
Insert cell
sampleDatum = {
anotherSampleDatum;
const d = getSampleDatum();
return d;
}
Insert cell
getSampleDatum = () =>
data ? data[Math.floor(Math.random() * data.length)] : undefined
Insert cell
getSummaryStats = (data, field) => ({
min: d3.min(data, d => d[field]),
max: d3.max(data, d => d[field]),
median: d3.median(data, d => d[field]),
mean: d3.mean(data, d => d[field])
})
Insert cell
Insert cell
import { button } from "@jashkenas/inputs"
Insert cell
import { toc } from "@mbostock/toc"
Insert cell
import { aq, op } from '@uwdata/arquero'
Insert cell
d3 = require("d3-array@2", "d3-dsv@2")
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