Published
Edited
Sep 2, 2020
Insert cell
Insert cell
Insert cell
Insert cell
3+2
Insert cell
html `<strong>hello </strong>`
Insert cell
a = 6
Insert cell
a
Insert cell
Insert cell
html <strong>hello ${f(c)}</strong>
Insert cell
f = x => x+1
Insert cell
Insert cell
file = await FileAttachment("States2010.csv").text()
Insert cell
d3 = require("d3@6")
Insert cell
data = d3.csvParse(file , d3.autoType)
Insert cell
data.columns
Insert cell
data.length
Insert cell
Insert cell
d3.max(data, r => r.IncomePerCapita)
Insert cell
d3.maxIndex(data, r => r.IncomePerCapita)
Insert cell
data[d3.maxIndex(data, r => r.IncomePerCapita)]
Insert cell
d3.sum(data , r => r.Population)
Insert cell
html`<strong>hello ${f(c)}</strong>`
Insert cell
Insert cell
data.map(r => r.Population)
Insert cell
data.map(r => r.Population - r.Pop2000)
Insert cell
data.map(r => ({...r, PopDelta: r.Population - r.Pop2000}))
Insert cell
data.filter( r => r.Name < "B")
Insert cell
[...data].sort( (a,b)=> a.IncomePerCapita - b.IncomePerCapita )
Insert cell
d3.rollup(data, g => d3.mean(g, r=> r.PercentCollegeGrad), r=> Math.floor(r.IncomePerCapita/ 1000) )
Insert cell
d3.group(data, r=> Math.floor(r.IncomePerCapita/ 1000) )
Insert cell
Insert cell
import {table} from "@tmcw/tables"
Insert cell
table(data)
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