Mathematical engineer. Software developer at Act Now Coalition.
data = FileAttachment("bandcamp-oneday.csv").csv({typed: true})
Inputs.table(data)
d3.group(data, d => d.country)
d3.rollup(data, v => v, d => d.country)
d3.rollup(data, v => v.length, d => d.country)
d3.rollup(data, v => d3.sum(v, val => val.amount_paid), d => d.country)
import {Treemap} from "@d3/treemap"
Now we can actually render our treemap
// type your code here:
Treemap(
d3.rollup(
data,
(v) => v.length,
(d) => d.country
),
{ value: (d) => d[1], label: (d) => d[0] }
)
rolled = d3.rollup(data, v => {
return {
count: v.length,
total_paid: d3.sum(v, o => o.amount_paid),
type: v[0].type
}},
d => d.type)
// type your code here:
treemap = Treemap(rolled, {
value: (d) => d[1].count,
group: (d) => d[1].type,
label: (d) => d[1].type,
title: (d) => `${d[1].type} ${d[1].count}`,
fillOpacity: 1
})
// type your code here:
Plot.legend({
color: {
domain: treemap.scales.color.domain(),
range: treemap.scales.color.range()
},
legend: "swatches"
})
rolled2 = d3.rollup(data,
v => {
return {
count: v.length,
total_paid: d3.sum(v, o => o.amount_paid),
type: v[0].type,
account: v[0].account
}
},
d => d.type,
d => d.account,
)
Treemap(rolled2, {
value: d => d[1].count,
group: d => d[1].type,
label: d => d[1].account,
title: d => `${d[1].type} ${d[1].count}`,
fillOpacity: 1
})
import { BubbleChart } from "@d3/bubble-chart"
// type your code here:
BubbleChart(rolled, {
value: (d) => d[1].count,
group: (d) => d[1].type,
label: (d) => d[1].type,
title: (d) => `${d[1].type} ${d[1].count}`
})
import { Pack } from "@d3/pack"
// type your code here:
Pack(rolled2, {
value: (d) => d[1].count,
group: (d) => d[1].type,
label: (d) => d[1].type,
title: (d) => `${d[1].account} ${d[1].type} ${d[1].count}`,
fill: (d) => d[1].type,
width,
height: 600
})
bardata = Array.from(rolled.values())
import { BarChart } from "@d3/bar-chart-transitions"
// type your code here:
chart = BarChart(bardata, {
x: (d) => d.type,
y: (d) => d.count,
xDomain: typelist,
width: 600,
height: 400,
color: "steelblue",
duration: 750
})
viewof country = Inputs.select(new Set(data.map(d => d.country)), { label: "Select country:" })
// type your code here:
bycountry = d3.rollup(
data.filter((d) => d.country === country),
(v) => ({ count: v.length, type: v[0].type }),
(d) => d.type
)
// type your code here:
chart.update(Array.from(bycountry.values()), { xDomain: typelist })
// we will end up wanting to keep the order of the x domain the same
typelist = ["bundle", "merch", "track", "album"]
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.
