Data and Digital Storytelling Lead @ 360info.org, hosted by Monash University. ❤️ making things for fun and for social good!
Public
Edited
Mar 18, 2024
mydata = [
{ team: "Alpha", response: "1-2", freq: 10 },
{ team: "Alpha", response: ">3", freq: 5 },
{ team: "Alpha", response: "<1", freq: 30 },
{ team: "Alpha", response: "0", freq: 8 },
{ team: "Alpha", response: "2-3", freq: 12 },
{ team: "Beta", response: "2-3", freq: 10 },
{ team: "Beta", response: "<1", freq: 20 },
{ team: "Beta", response: "1-2", freq: 20 },
{ team: "Beta", response: "0", freq: 4 },
{ team: "Beta", response: ">3", freq: 8 },
{ team: "Gamma", response: ">3", freq: 10 },
{ team: "Gamma", response: "0", freq: 15 },
{ team: "Gamma", response: "1-2", freq: 5 },
{ team: "Gamma", response: "2-3", freq: 20 },
{ team: "Gamma", response: "<1", freq: 15 }
]
Plot.plot({
marks: [
Plot.barX(mydata, {
y: "team",
x: "freq",
fill: "response",
offset: "normalize"
})
],
color: {
legend: true,
type: "ordinal",
}
})
freqLevels = ['0', '<1', '1-2', '2-3', '>3']
Plot.plot({
marks: [
Plot.barX(mydata, {
y: "team",
x: "freq",
fill: "response",
offset: "normalize"
})
],
color: {
legend: true,
type: "ordinal",
domain: freqLevels
}
})
Plot.plot({
marks: [
Plot.barX(mydata, {
y: "team",
x: "freq",
fill: "response",
order: "response",
offset: "normalize"
})
],
color: {
legend: true,
type: "ordinal",
domain: freqLevels
}
})
sortOn = function(z, levels) {
return (a, b) =>
levels.indexOf(a[z]) - levels.indexOf(b[z])
}
Plot.plot({
marks: [
Plot.barX(mydata, {
y: "team",
x: "freq",
fill: "response",
order: sortOn("response", freqLevels),
offset: "normalize"
})
],
color: {
legend: true,
type: "ordinal",
domain: freqLevels
}
})
Plot.plot({
marks: [
Plot.barX(mydata, {
y: "team",
x: "freq",
fill: "response",
order: freqLevels,
offset: "normalize"
})
],
color: {
legend: true,
type: "ordinal",
domain: freqLevels
}
})
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.
