Table(harvest, {format:{year:d => d}})
// Are the years formatted with a comma because we 'typed' the `harvest` csv? Answer: yes. [{ typed: true }]
viewof year = Select([2018, 2019, 2020], { label: "Select a year" })
fish_caught = tidy(
harvest,
filter((d) => d.year === year),
summarize({ total: sum("harvest") })
)[0].total
// tidy.js pseudo-code: harvest %>% mutate() %>% groupBy([summarize])
Table(
tidy(
harvest, // %>%
// mutate({
// peter: (row) => row.state + "peter",
// fishFirstName: (d) => d.common.split(" ")[0]
// }),
// mutateWithSummary({
// fishFirstName2: items => items.map((d) => d.common.split(" ")[0]),
// // add a new column
// maxYear: max("year") // compute across all rows (the value will be same for all rows)
// }),
// filter((d) => d.year === d.maxYear)
// summarize({ total: sum("harvest"), year: first('year') })
// filter(d => d.year === max('year')) // make this Peter!
groupBy(
'year',
[
summarize({ total: sum('harvest') }),
]
),
// sliceMax(1, 'year')
)
)
harvest
md`## How many fish are caught in each state?`
grouped_by_state = tidy(
harvest,
groupBy(
["state", "common"],
[
mutateWithSummary({
mean: mean("harvest"),
deviation: deviation("harvest"),
}),
mutate({
delta: d => d.harvest - d.mean, // in each year, difference between catch and mean
}),
]
)
)
Table(grouped_by_state)
harvest_binned = d3.group(harvest, d => d.state, d => d.year, d => d.common, d => d.harvest)
harvest_binned_again = Array.from(d3.group(harvest, d => d.common, d => d.year))
md`
* harvest in each species in each year (across all states)
* compare to average of each species across all year
`
data = tidy(
harvest,
groupBy(['common', 'year'], [
summarize({ total: sum('harvest') }),
]),
filter(d => d.total > min_fish)
)
data_with_avg = tidy(
harvest,
groupBy(['common', 'year'], [
summarize({ total: sum('harvest') }),
]),
groupBy(['common'], [
total({ total: mean('total') }, { year: 'avg' })
]),
// filter(d => d.total>=1 min_fish),
arrange(desc('total'))
)
averages = tidy(data_with_avg, filter(d => d.year === 'avg'), slice(0, 10))
filtered_data = tidy(
data_with_avg,
filter(d => averages.some(item => item.common === d.common)),
arrange(desc('total'))
)
filtered_data2 = tidy(
averages,
leftJoin(data_with_avg, { by: 'common' }),
arrange(desc('total'))
)
viewof search = Search(harvest, { placeholder: "Seach the data" })
Table(search)
Table(filtered_data)
Table(averages)
Table(data_with_avg)
species = new Set(filtered_data.map(d => d.common))
Plot.plot({
facet: {
data: species,
x: (d, i) => i % 4, // see https://github.com/observablehq/plot/issues/277
y: (d, i) => Math.floor(i / 4),
marginLeft: 30
},
fx: { axis: null },
fy: { axis: null },
grid: true,
marks: [
Plot.barY(species, {
transform: speciesTransform({ filter: d => d.year === "avg" }),
y: "total",
fill: "gray"
}),
Plot.barY(species, {
transform: speciesTransform({ filter: d => d.year !== "avg" }),
x: "year",
y: "total",
rx: 3
}),
Plot.frame(),
Plot.text(species, { text: d => d, x: 2019, y: 27e6, dy: 10 })
]
})
// transform species into data about the species
speciesTransform = ({ filter }) => (species, facets) => {
const data = filtered_data.filter(filter);
return {
data,
facets: facets.map(index =>
data
.map((d, i) => [d.common, i])
.filter(([common, i]) => index.some(s => common === species[s]))
.map(([, i]) => i)
)
};
}
// https://observablehq.com/@observablehq/plot-rect
Plot.plot({
width: 1500,
facet: {
data: filtered_data,
x: "common",
marginLeft: 60
},
grid: true,
inset: 10,
marks: [
Plot.barY(filtered_data, {filter: d => d.year !== "avg", x: "year", y: "total"}),
Plot.rectY(filtered_data, {filter: d => d.year === "avg", x: "year", y: "total", fill:"#f005"})
//Plot.barY(filtered_data, {filter: d => d.year === "avg", x: "year", y: "total", fill: "gray"})
],
})
Plot.binX(filtered_data, {})
viewof min_fish = Range([0, 10000000], { label: "Min. Fish to be considered" })
Plot.dot(data, Plot.binX({ x: "mean" }, { y: "common" })).plot({
marginLeft: 160,
height: 500,
color: { scheme: "blues" }
})
Table(data_with_avg)
Plot.text(filtered_data, {
x: "total",
y: "common",
opacity: 0.1,
fontSize: (d) => 8 + d.total / 200000,
text: (d) => (d.year === "avg" ? "🐡" : "🐟")
}).plot({
marginLeft: 160,
height: 500,
opacity: 0.1,
color: { scheme: "blues" }
})
// Plot library
Plot = require("@observablehq/plot@0.1.0/dist/plot.umd.min.js")
// Tidy functions
import {
tidy,
max,
nDistinct,
groupBy,
mutate,
filter,
summarize,
first,
last,
distinct,
count,
n,
arrange,
mutateWithSummary,
desc,
debug,
sum,
slice,
mean,
deviation,
variance,
meanRate,
median,
min,
total,
sliceMax,
innerJoin, leftJoin,
} from "@pbeshai/tidyjs"
// D3 library (might come in handy?)
d3 = require("d3@6") //version pinning prevents accidental breakages later
harvest = FileAttachment("harvest.csv").csv({ typed: true })
import { Table, Range, Select, Search } from "@observablehq/inputs"
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.
