Public
Edited
Mar 18, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fishing = [{river: "San Juan", species: "rainbow", lengthInches: 18.2},
{river: "San Juan", species: "brown", lengthInches: 14.1},
{river: "San Juan", species: "brown", lengthInches: 21.5},
{river: "Rio Grande", species: "brown", lengthInches: 9.0},
{river: "Rio Grande", species: "brown", lengthInches: 12.5},
{river: "Rio Grande", species: "cutthroat", lengthInches: 10.6},
{river: "Rio Grande", species: "brown", lengthInches: 14.5},
{river: "Rio Chama", species: "rainbow", lengthInches: 8.5},
{river: "Rio Chama", species: "rainbow", lengthInches: 11.5}]
Insert cell
Insert cell
Insert cell
fishing
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
//Group the data by species, then get an array of objects for rainbow trout.
d3.group(fishing, x => x.species).get('rainbow')
Insert cell
Insert cell
Insert cell
// Use Array.filter to get a subset only for rainbow trout in fishing:
fishing.filter(x => x.species === 'rainbow')
Insert cell
Insert cell
fishing
Insert cell
// Find the mean trout length by river:
riverTroutSize = d3.rollup(fishing, x => d3.mean(x, y => y.lengthInches), x => x.river)
Insert cell
Insert cell
// Get just the mean trout size for the San Juan River:
riverTroutSize.get('San Juan')
Insert cell
Insert cell
Insert cell
Insert cell
// Load the us_imports.csv file (attached in this notebook):
us_imports = FileAttachment("us_imports.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
// Return an array of all values in the 'value' property of us_imports, log transformed
logVals = us_imports.map(x => Math.log(x.value))
Insert cell
Insert cell
Insert cell
// Create a new array, usLogValue, containing all existing properties and ADDING the log transformed value as a property named logValue:
usLogValue = us_imports.map(x => ({...x, logValue: Math.log(x.value)}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(usLogValue, Plot.binX({y: "count"}, {x: "logValue"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(us_imports, Plot.binX({y: "count"}, {x: x => Math.log(x.value)})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
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
Plot.plot({
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.barX(
usLogValue,
Plot.groupY(
{ x: "sum" },
{ fx: "year", x: "logValue", y: "Sector", tip: true }
)
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(
us_imports,
Plot.groupY(
{ x: "sum" },
{
x: "value",
y: "Sector",
fill: x => x.Sector === pickSector ? "red" : pickColor,
sort: { y: "x", reverse: true }
}
)
)
],
x: { tickFormat: ".1s" },
width: 900
})
Insert cell
Insert cell
import { showMe } from "@observablehq/show-me"
Insert cell
import { addTooltips } from "@mkfreeman/plot-tooltip"
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