The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Apr 19, 2022
2 stars
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:
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:
// type your code here:
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:
import { Pack } from "@d3/pack"
// type your code here:
bardata = Array.from(rolled.values())
import { BarChart } from "@d3/bar-chart-transitions"
// type your code here:
viewof country = Inputs.select(new Set(data.map(d => d.country)), { label: "Select country:" })
// type your code here:
// type your code here:
// 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.
