countryCartogram = Plot.plot({
color: {
legend: true
},
marks: [
Plot.cell(COUNTRY_CARTOGRAM, {
x: "x",
y: "y",
fill: "state",
tip: true,
title: "electorate"
}),
Plot.text(COUNTRY_CARTOGRAM, {
x: "x",
y: "y",
text: "abbreviation"
})
]
})
gridCartogram = Plot.plot({
width: 800,
color: {
legend: true
},
marks: [
Plot.cell(GRID_CARTOGRAM, {
x: "x",
y: "y",
fill: "state",
tip: true,
title: "electorate"
}),
Plot.text(GRID_CARTOGRAM, {
x: "x",
y: "y",
text: "abbreviation"
})
]
})
COUNTRY_CARTOGRAM.map((d) => d.electorate)
joinedData = [...divisionInformality2022].map((d) => {
const cell = COUNTRY_CARTOGRAM.find((c) => d.DivisionNm === c.electorate);
return {
...d,
...cell
};
})
cartogram = Plot.plot({
title: "Divisions by informal voting rate",
color: {
domain: [0, 15],
scheme: "viridis",
label: "Informal voting (%) →",
legend: true
},
marks: [
Plot.cell(joinedData, {
x: "x",
y: "y",
fill: "InformalPercent"
}),
Plot.text(joinedData, {
x: "x",
y: "y",
fill: "black",
text: "abbreviation",
tip: true,
title: (d) =>
`${d.DivisionNm} (${d.StateAb})\nInformal: ${(
d.InformalPercent || 0
).toFixed(1)}%\nInformal swing: ${d.InformalSwing}%`
})
]
})
function makeCartogram(layout) {
return Object.entries(STATES_ELECTORATES_CELLS)
.flatMap(([state, electorates]) =>
Object.entries(electorates).map(([abbreviation, [x, y]]) => ({
state,
abbreviation,
x: x + layout[state][0],
y: y + layout[state][1]
}))
)
.map((cell, i) => ({
...cell,
electorate: DIVISIONS[i]
}));
}
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.
