Public
Edited
Sep 6, 2024
Plot.plot({
marginLeft: 60,
marginTop: 30,
marginBottom: 70,
width: 700,
height: 400,
x: {
label: "Unilateral Givers",
labelOffset: 60,
fontVariant: 1.1,
domain: giveBack.participants.map(d => d.name),
},
y: {
label: "$100 per block",
tickFormat: d => d.toLocaleString('en-US', {style: 'currency', currency: 'USD', minimumFractionDigits: 0,
maximumFractionDigits: 0}),
grid: true,
},
color: {
legend: true,
labelOffset: 15,
domain: giveBack.participants.map(d => d.name),
},
marks: [
Plot.waffleY(giveBack.participants, {x: "name", y: "gave", fill: "name", unit: 100, fillOpacity: 0.6}),
Plot.text(giveBack.participants, {
text: d => d.gave.toLocaleString('en-US', {style: 'currency', currency: 'USD', minimumFractionDigits: 0,
maximumFractionDigits: 0}) + '\n' + d.color,
x: "name",
frameAnchor: "bottom",
lineAnchor: "top",
lineHeight: 1.1,
dy: 22,
fill: "grey"
}),
Plot.waffleY(giveBack.participants, {x: "name", y: "received", fill: "name", rx: "100%", unit: 100}),
Plot.text(giveBack.participants, {
text: d => {
if (d.multipleFilled != null) { // Check if the value exists
return Number.isInteger(d.multipleFilled)
? `${d.multipleFilled} x`
: `${d.multipleFilled.toFixed(2)} x`; // Show two decimals if not an integer
} else {
return ''; // Return an empty string if the value does not exist
}
},
y: "received",
x: "name",
textAnchor: "end",
dy: -20,
fill: "black"
})
]
})
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.
