Published unlisted
Edited
May 15, 2022
data = [
{ package: "a", added: 10, removed: -4, changes: 14 },
{ package: "a", added: 9, removed: -2, changes: 11 },
{ package: "a", added: 2, removed: -4, changes: 6 },
{ package: "b", added: 3, removed: -3, changes: 6 },
{ package: "b", added: 10, removed: -5, changes: 15 },
{ package: "c", added: 1, removed: -4, changes: 5 },
{ package: "c", added: 9, removed: 0, changes: 9 },
{ package: "c", added: 12, removed: -1, changes: 13 },
{ package: "d", added: 8, removed: -4, changes: 12 }
]
Plot.plot({
y: {
domain: d3
.groupSort(
data,
(v) => d3.sum(v, (d) => d.changes),
(d) => d.package
)
.reverse()
},
marks: [
Plot.barX(
data,
Plot.groupY(
{ x: "sum" },
{
x: "added",
y: "package",
fill: "blue",
sort: { y: "x" }
}
)
),
Plot.barX(
data,
Plot.groupY(
{ x: "sum" },
{
x: "removed",
y: "package",
fill: "red"
}
)
),
Plot.ruleX([0])
]
})
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.
