Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
May 12, 2021
2 forks
4 stars
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)
// how do I take out the average bar and plot it as a big gray bar behind the three others
Plot.barY(filtered_data, {filter: d => d.year !== "avg", x: "year", y: "total"}).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", fill: "gray"})
]
})
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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.