The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Jul 14, 2021
Plot = require(await FileAttachment("plot.umd.min.js").url())
data = FileAttachment("riaa-us-revenue.csv").csv({typed: true})
let's sort by the value
Plot.barX(data, Plot.groupY({ x: "sum" }, {
x: "revenue",
y: "group",
fill: "group",
sortY: true
}))
.plot({
marginLeft: 100
})
Plot.barX(data, Plot.groupY({ x: "sum" }, {
x: "revenue",
y: "group",
fill: "group",
sortY: false
}))
.plot({
marginLeft: 100
})
Plot.barX(data, Plot.groupY({ x: "sum" }, {
x: "revenue",
y: "format",
fill: "group",
sortY: true
}))
.plot({
marginLeft: 250,
})
Plot.barY(data, {
x: "year",
y: "revenue",
fill: "group",
}).plot({
facet: {
data,
y: "group",
marginLeft: 70
},
fy: { label: null },
y: { axis: false },
x: { tickRotate: 90, tickFormat: d => d.getFullYear() },
marks: [ Plot.ruleY([0])],
grid: true,
marginBottom: 70,
width,
height: 400
})
Maybe i want to sort by the maximum of one of the series?
Plot.plot({
marks: [
Plot.barY(data, Plot.stackY({
x: "year",
y: "revenue",
z: "format",
fill: "format",
order: "appearance",
reverse: true,
})),
Plot.ruleY([0])
],
grid: true,
facet: {
data,
y: "group",
marginLeft: 70
},
fy: { label: null },
y: { axis: false },
x: { tickRotate: 90, tickFormat: d => d.getFullYear() },
marginBottom: 70,
width,
})
groups = d3.groupSort(data, v => d3.sum(v, d=> -d.revenue), d => d.group)
formats = d3.groupSort(data, v => d3.sum(v, d=> -d.revenue), d => d.format)
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.
