Public
Edited
Feb 23
Insert cell
Insert cell
import {fishing} from "@observablehq/intro-js-session-4-key";
Insert cell
fishing
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
d3.group(fishing, d => d.species).get("rainbow")
Insert cell
fishing.filter(d => d.species === "rainbow")
Insert cell
d3.rollup(fishing, v => d3.mean(v, d => d.lengthInches), (d) => d.river)
Insert cell
d3.rollup(fishing, v => d3.mean(v, d => d.lengthInches), (d) => d.river).get("San Juan")
Insert cell
import {us_imports} from "@observablehq/intro-js-session-4-key";
Insert cell
us_imports
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
us_imports.map(d => Math.log(d.value))
Insert cell
usLogValue = us_imports.map(d => ({...d, logValue: Math.log(d.value) }))
Insert cell
Plot.plot({
marks: [
Plot.rectY(usLogValue, Plot.binX({y: "count"}, {x: "logValue"})),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
marks: [
Plot.rectY(usLogValue, Plot.binX({y: "count"}, {x: d => Math.log(d.value) })),
Plot.ruleY([0])
]
})
Insert cell
usLogValue
X
sum
logValue
Y
Sector
Color
Size
Facet X
year
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof pickSector = Inputs.radio(us_imports.map(d => d.Sector), {label: "Pick A Sector", value: "AG", unique: true})
Insert cell
viewof height = Inputs.range([400, 1200], {label: "Chart height:", step: 1})
Insert cell
viewof bgColor = Inputs.color({label: "Background color:", value: "#1295b1"})
Insert cell
Plot.plot({
marks: [
Plot.barX(
us_imports,
Plot.groupY(
{ x: "sum" },
{ x: "value", y: "Sector", fill: d => d.Sector === pickSector ? "purple" : bgColor, sort: { y: "x", reverse: true }}
)
),
Plot.ruleX([0]),
Plot.frame()
],
x: { tickFormat: "s", label: "Total import value ($, billions)"},
facet: { data: us_imports, x: "year" },
fx: { tickFormat: "" },
width: 900,
height: 600,
grid: true
})
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