Public
Edited
Dec 2, 2023
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}]
fishing
Type Table, then Shift-Enter. Ctrl-space for more options.
//Group the data by species, then get an array of objects for rainbow trout.
d3.group(fishing, d => d.species).get("rainbow")
showMe(`d3.group(fishing, d => d.species).get("rainbow")`, {
dependencies: { fishing }
})
fishing.filter(d => d.species === "rainbow")
showMe(
`riverTroutSize = d3.rollup(
fishing,
(v) => d3.mean(v, (d) => d.lengthInches),
(d) => d.river
)`,
{ dependencies: { fishing } }
)
// Find the mean trout length by river, then get the mean length for the San Juan River:
riverTroutSize = d3.rollup(
fishing,
(v) => d3.mean(v, (d) => d.lengthInches),
(d) => d.river
)
// Get just the mean trout size for the San Juan River:
riverTroutSize.get("San Juan")
showMe(`riverTroutSize.get("San Juan")`, { dependencies: { fishing } })
// Load the us_imports.csv file (attached in this notebook):
us_imports = FileAttachment("us_imports.csv").csv({typed: true})
us_imports
Type Table, then Shift-Enter. Ctrl-space for more options.
// Return an array of all values in the 'value' property of us_imports, log transformed
us_imports.map(d => Math.log(d.value))
// Create a new array, usLogValue, containing all existing properties and ADDING the log transformed value as a property named logValue:
usLogValue = us_imports.map(d => ({...d, logValue: Math.log(d.value)}))
Plot.plot({
marks: [
Plot.rectY(usLogValue, Plot.binX({ y: "count" }, { x: "logValue" })),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(us_imports, Plot.binX({y: "count"}, {x: d => Math.log(d.value)})),
Plot.ruleY([0])
]
})
usLogValue
X
logValue
Y
—
Color
#8c2b78
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
viewof pickSector = Inputs.radio(d3.map(us_imports, d => d.Sector), {label: "Pick one", value: "AG", unique: true})
viewof height = Inputs.range([400, 1200], {label: "Chart height:", step: 1})
height
viewof bgColor = Inputs.color({label: "Background color:", value: "#4682b4"})
Plot.plot({
marks: [
Plot.barX(
us_imports,
Plot.groupY(
{ x: "sum" },
{ x: "value", y: "Sector", fill: d => d.Sector === pickSector ? "red" : 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: height,
grid: true
})
import { showMe } from "@observablehq/show-me"
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.
