Software Developer, Guardium Guy, Dad
Published
Edited
Oct 7, 2021
{
deckgl.setProps({
layers: [getMaplayer(currentParty)]
});
return "Update on Switch";
}
deckgl = {
let zoom = 4.5;
return new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: "",
mapboxApiAccessToken: token,
mapStyle: "mapbox://styles/mapbox/light-v10",
layers: [],
initialViewState: {
longitude: -84.243,
latitude: 48.836,
zoom: zoom,
minZoom: 3,
maxZoom: 15,
pitch: 0
},
controller: true,
tooltip: true,
getTooltip: ({ object }) => object && JSON.stringify(object.properties)
});
}
min = d3.min(
processed2021RidingsData.filter((d) => d.englishCode === currentParty),
(d) => d.diff
)
max = d3.max(
processed2021RidingsData.filter((d) => d.englishCode === currentParty),
(d) => d.diff
)
getAreaColorScale(min, max)(-0.03)
getMaplayer = (party) => {
let min = d3.min(
processed2021RidingsData.filter((d) => d.englishCode === party),
(d) => d.diff
);
let max = d3.max(
processed2021RidingsData.filter((d) => d.englishCode === party),
(d) => d.diff
);
let scale = getAreaColorScale(min, max);
return new deck.GeoJsonLayer({
id: "geojson",
data: processedGeojson,
opacity: 0.7,
stroked: false,
filled: true,
extruded: true,
wireframe: true,
getElevation: 0,
getFillColor: (d) =>
d.properties.diffs[party]
? scale(d.properties.diffs[party])
: [20, 20, 20],
getLineColor: [100, 100, 100],
updateTriggers: {
getFillColor: [party]
},
pickable: true
//pickable: true,
//autoHighlight: true
});
}
partyMap = {
return {
LIB: "Liberal",
CON: "Conservative",
NDP: "NDP",
BQ: "Bloc Québécois",
GRN: "Green",
PPC: "People's Party of Canada"
};
}
processedGeojson = {
let newGeo = JSON.parse(JSON.stringify(geojson));
for (let riding of newGeo.features) {
riding.properties.diffs = {};
let name = riding.properties.ENNAME;
for (let party in partyMap) {
if (diffMap[name] !== undefined) {
riding.properties.diffs[party] = diffMap[name][party];
}
}
}
newGeo.features = newGeo.features.filter((d) => d.geometry);
return newGeo;
}
diffMap = processed2021RidingsData.reduce((accum, d) => {
if (accum[d.riding] === undefined) {
accum[d.riding] = {};
}
accum[d.riding][d.englishCode] = d.diff;
return accum;
}, {})
data2019Ridings = data2019.data.ridings.reduce((accum, d) => {
accum[d["englishName"]] = d.parties.reduce((accum2, party) => {
accum2[party.englishCode] = party.votesPercentage;
return accum2;
}, {});
return accum;
}, {})
geojson = FileAttachment("FED_CA_2019_EN@2.json").json()
areaColorScale = getAreaColorScale(-0.1, 0.1)
getAreaColorScale = (min, max) => (d) => {
if (d === null) {
return [20, 20, 20];
}
let func = d3
.scaleDiverging()
.domain([min, 0, max])
.interpolator(d3.interpolateRdYlGn)
.nice();
let col = d3.color(func(d));
return [col.r, col.g, col.b];
}
token = {
// Don't use this token. It will be rotated frequently. Get your own at https://mapbox.com
return "pk.eyJ1Ijoiam9obmhhbGRlbWFuIiwiYSI6ImNrMjIxNnBrdTAxN3Mzb3BmbWFzbnV6OGoifQ.HrfAiASrw9EQetZn13xAPg";
}
deck = require.alias({
// optional dependencjei
h3: {},
s2Geometry: {}
})("deck.gl@~8.0.0/dist.min.js")
mapboxgl = require("mapbox-gl@^1.4.1/dist/mapbox-gl.js")
data2021 = FileAttachment("2021Results.json").json()
data2019 = FileAttachment("2019Results.json").json()
import { legend } from "@johnhaldeman/color-legend-invertable"
vega = require("vega-embed@6")
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.
