Public
Edited
Dec 4, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
p1 = {
const mgmData = d3.csvParse('province,type,mgm\nNL,Rural,48488\nNL,Urban,50931\nPE,Rural,49056\nPE,Urban,51033\nNS,Rural,48476\nNS,Urban,52439\nQC,Rural,43545\nQC,Urban,46027\nON,Rural,46636\nON,Urban,55262\nMB,Rural,45233\nMB,Urban,50942\nSK,Rural,46049\nSK,Urban,52018\nAB,Rural,52156\nAB,Urban,55771\nBC,Rural,47554\nBC,Urban,55727')

return Plot.plot({
marginTop: 50,
marginLeft: 80,
marginBottom: 50,
style: {backgroundColor: "#fff5cb", fontFamily: "IBM Plex Mono", fontSize: "14px"},
y: {
grid: true,
nice: true
},
fx: {
padding: .1,
tickRotate: 0,
tickSize: 10,
label: null,
axis: "bottom",
},
x: {
label: null,
tickFormat: null,
tickSize: 0
},
color: {
legend: true,
scheme: "Accent"
},
marks: [
Plot.barY(mgmData, {y: "mgm", x: "type", fx: "province", fill: "type", ry:10}),
Plot.ruleY([0]),
Plot.axisY({anchor: "left", label: "MBM ($ CAD)", labelArrow: "none", labelOffset: 60})
]
})
}
Insert cell
Insert cell
Insert cell
p2 = {
const coLData = await FileAttachment("MBM_diffs_by_province-2.csv").csv();
const populationData = await FileAttachment("pop_stdevs_by_province.csv").csv();

const combinedData = populationData.map(populationObj => {
const provinceCode = populationObj.province;

// Extract the years and convert them to an array
const years = Object.keys(populationObj).filter(key => key === "2017" || key === "2022");

// Map over the years to create an array of combined data
const combinedDataPerProvince = years.map(year => {
const stdDev = parseFloat(populationObj[year]);
const costDifferenceObj = coLData.find(costObj => costObj.province === provinceCode);
const costDifference = costDifferenceObj ? costDifferenceObj[year] : null;

return {
province: provinceCode,
year: year,
stdDev: parseInt(stdDev),
costDifference: costDifference !== null ? parseInt(costDifference) : null,
};
});

return combinedDataPerProvince;
}).flat(); // Flatten the array to get a single array of objects

return Plot.plot({
marginTop: 50,
marginBottom: 40,
marginLeft: 60,
style: {backgroundColor: "#fff5cb", fontFamily: "IBM Plex Mono", fontSize: "14px"},
color: {
domain: ["NL", "PE", "NS", "NB", "QC", "ON", "MB", "SK", "AB", "BC"],
range: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#a4d5e4", "#f0027f", "#bf5b17", "#666666", "#1f78b4", "#33a02c"],
legend: true
},
symbol: {
domain: ["2017", "2022"],
range: ["circle", "star"],
legend: true
},
marks: [
Plot.ruleY([0]),
Plot.ruleX([0]),
Plot.arrow(
combinedData.filter(d => d.year === "2017"),
{
x1: d => d.stdDev,
y1: d => d.costDifference,
x2: d => {
const correspondingPoint = combinedData.find(
point => point.province === d.province && point.year === "2022"
);
return correspondingPoint ? correspondingPoint.stdDev : d.stdDev;
},
y2: d => {
const correspondingPoint = combinedData.find(
point => point.province === d.province && point.year === "2022"
);
return correspondingPoint ? correspondingPoint.costDifference : d.costDifference;
},
stroke: "black",
strokeWidth: 1,
headLength: 0
}
),
Plot.dot(combinedData, {
x: "stdDev",
y: "costDifference",
r: 4,
fill: "province",
symbol: "year",
stroke: "black"
}),
],
x: {
label: "Population spread",
},
y: {
label: "Rural v. urban cost of living difference ($ CAD / year)",
nice: true
},
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
p3 = {
const popDensityData = d3.csvParse('city,density\nSt. John\'s,228.2\nCharlottetown,876.6\nHalifax,64\nMoncton,61.5\nMontreal,919\nToronto,1050.7\nWinnipeg,157.9\nSaskatoon,54.1\nCalgary,290.6\nVancouver,918')

return Plot.plot({
marginTop: 50,
marginLeft: 70,
marginBottom: 65,
style: {backgroundColor: "#fff5cb", fontFamily: "IBM Plex Mono", fontSize: "10px"},
y: {
grid: true,
nice: true
},
x: {
padding: .1,
tickRotate: 20,
tickSize: 10,
label: null,
axis: "bottom",
},
color: {
domain: ["Charlottetown", "St. John\'s", "Calgary", "Halifax", "Moncton", "Montreal", "Saskatoon", "Toronto", "Vancouver", "Winnipeg"],
range: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#a4d5e4", "#f0027f", "#bf5b17", "#666666", "#1f78b4", "#33a02c"],
},
marks: [
Plot.barY(popDensityData, {y: "density", x: "city", fill: "city", ry:15}),
Plot.ruleY([0]),
//Plot.axisX({anchor:"top", label: null, tickSpacing: 100, tickRotate: 0}),
Plot.axisY({anchor: "left", label: "Population density (/km²)", labelArrow: "none", labelOffset: 60})
]
})
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more