incomeBySuburb2017 = aq
.fromCSV(
await FileAttachment("8a7bfe9e-ad35-4a0a-be52-52058fea1bca.csv").text()
)
.select(
"Postcode2",
// yes, those are newlines in the field names. Thanks for nothing ABS.
`Median3 taxable income 2016-17
$`,
`Average3 taxable income 2016-17
$`
)
.rename(aq.names(["PostCode", "MedianIncome", "AverageIncome"]))
.derive({
MedianIncome: (d) => aq.op.parse_float(d.MedianIncome),
AverageIncome: (d) => aq.op.parse_float(d.AverageIncome)
})
// .objects() // Uncomment to return an array of objects
/**
* Helper method for cleaning AEC CSVs.
*/
async function cleanAecCsv(file) {
// strip metadata on the 0th row
const text = await file.text();
const cleaned = text.split("\n").slice(1).join("\n");
// cram into Aquero
return aq.fromCSV(cleaned);
}
getDivisions = (pollingPlaces) => [
...pollingPlaces.groupby("DivisionNm").rollup().values("DivisionNm")
]
mergeFirstPreferenceTables = async (tables) => {
const australiaTable = tables.reduce((a, b) => a.concat(b));
return (
australiaTable
.join(pollingPlaces2019, ["PollingPlaceID"])
// cull outliers with data assertions
.filter((d) => d.Latitude < 90)
.filter((d) => 0 < d.Longitude)
.derive({
Group: (d) => {
switch (d.PartyAb) {
case "CLP":
case "LNP":
case "LP":
case "NP":
return "Coalition";
case "ALP":
return "ALP";
case "GRN":
return "GRN";
}
return "Minor party / independent";
}
})
);
}
culori.parse(MAJOR_PARTY_COLORS["ALP"])
function partyAbbreviation(abbr) {
return html`<abbr style="color: ${MAJOR_PARTY_COLORS[abbr]}; font-weight: bold">${abbr}</span>`;
}
partyAbbreviation("ALP")
makePartyScale = (data) => {
// This is a bit of a gnarly hack to set custom categorical colors
// If there's a better way then I'd love to hear it
const plot = Plot.plot({
marks: [
Plot.tickX(selectedElection.majorPartyFirstPreference, {
stroke: (d) => d.PartyAb
})
]
});
const scale = plot.scale("color");
scale.range = scale.domain.map((d) => MAJOR_PARTY_COLORS[d]);
return scale;
}
getPartyColor = (d) => {
const { r, g, b } = culori.parse(MAJOR_PARTY_COLORS[d.PartyAb]);
return [r * 255, g * 255, b * 255];
}
function getTooltip(d) {
return `${d.Swing}% ${d.Swing > 0 ? "to" : "from"} ${d.GivenNm} ${
d.Surname
} (${d.PartyAb})
Division: ${d.DivisionNm_1} (${d.PremisesStateAb})
Votes at polling place for candidate: ${d.OrdinaryVotes}
Elected?: ${d.Elected}
Previously elected?: ${d.HistoricElected}
Median income: $${d.MedianIncome}
Average income: $${d.AverageIncome}`;
}
plotMap = ({ data, showNegativeSwings, scaleBooth }) => {
return Plot.plot({
color: { ...makePartyScale(data), legend: true, label: "Party" },
projection: {
type: "mercator",
rotate: [-133, 27],
domain: {
type: "MultiPoint",
coordinates: [
[113, -24],
[154, -28],
[141, -10.5],
[146, -44]
]
}
},
caption:
"Swings away from a candidate point left, swings to a candidate point right. Hover for more details.",
marks: [
Plot.graticule(),
Plot.sphere(),
Plot.geo(land),
Plot.geo(divisionGeojson2022, { strokeOpacity: 0.5 }),
Plot.vector(data, {
x: "Longitude",
y: "Latitude",
filter: (d) => (showNegativeSwings ? true : d.Swing > 0),
// if Swing is 100 point right, if Swing is 0, point up, if Swing is -100 point left
rotate: (d) => (d.Swing / 100) * 90,
// arrow length should match the magnitude of the swing,
length: (d) =>
scaleBooth ? Math.abs(d.Swing) * d.OrdinaryVotes : Math.abs(d.Swing),
stroke: (d) => d.PartyAb,
title: enableTooltips ? getTooltip : undefined
})
]
});
}
plotDeckMap = ({ data, getArrowLength, showNegativeSwings, scaleBooth }) => {
data = showNegativeSwings ? data : data.filter((d) => d.Swing > 0);
const iconLayer = new deck.IconLayer({
id: `icon-layer-${Date.now()}`,
data: data.objects(),
pickable: true,
// iconAtlas and iconMapping are required
iconAtlas: FileAttachment("arrow@1.png").url(),
iconMapping: {
arrow: { x: 0, y: 0, width: 128, height: 128, mask: true }
},
getIcon: (d) => "arrow",
sizeScale: 2,
getPosition: (d) => [d.Longitude, d.Latitude],
getAngle: (d) => (d.Swing / 100) * -90,
getSize: (d) =>
// We want arrows to be all the same size across all maps
getArrowLength(
scaleBooth ? Math.abs(d.Swing) * d.OrdinaryVotes : Math.abs(d.Swing)
),
getColor: getPartyColor
});
const geojsonLayer = new deck.GeoJsonLayer({
id: "geojson-layer",
data: selectedElection.divisionGeojson,
opacity: 1,
filled: false,
stroked: true,
wireframe: true,
lineWidthMinPixels: 2
});
const layers = [iconLayer, geojsonLayer];
const container = html`<div style="height:700px"></div>`;
// https://deck.gl/docs/api-reference/core/deckgl
const deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: "",
mapboxApiAccessToken:
"pk.eyJ1IjoibWF4Ym8iLCJhIjoiY2lsd2JnZDRyMDFxNHZna3MwZDZmN2R0ZCJ9.32XWATCazaiDzdW6bXvBxw",
mapStyle: "mapbox://styles/mapbox/light-v10",
layers,
initialViewState: {
longitude: 135,
latitude: -26,
zoom: 3
},
controller: true,
getTooltip: ({ object }) => object && getTooltip(object)
});
deckgl.setProps({
layers
});
return container;
}
makeMapSettings = () =>
Inputs.form({
showNegativeSwings: Inputs.toggle({
label: "Show negative swings",
value: false
}),
scaleBooth: Inputs.select(
new Map(
[
["Arrow size proportional to swing magnitude at booth", false],
["Arrow size proportional to votes gained or lost at booth", true]
],
{ value: false, label: "Arrow sizing scheme" }
)
)
})
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.
