Published
Edited
Jan 11, 2022
getPlot(reserve_trt)
function getPlot(data) {
const gray25 = "#444444";
const gray50 = "#888888";
const gray75 = "#cccccc";
const ecb = "#800030";
const fonts = "DecimaMono,Consolas,Monaco,monospace";
const xmin = d3.min(data, d => d.Election);
const xmax = d3.max(data, d => d.Election);
const titX = (xmin+xmax)/2;
const titY = 1.05; //d3.max(data, d => d.Turnout);
const svg = Plot.plot({
marginTop: 50,
width: 800,
x: {grid: false},
y: {grid: false},
facet: {
data: data,
x: "column",
y: "row",
//marginRight: 80,
label: null
},
marks: [
Plot.area(data, {x1: "Election", y1: "Turnout_lo", y2: "Turnout_hi", fill: "#d2b2c1"}),
Plot.ruleX([xmin, xmax], {y1: d=>0, y2: d=>1, stroke: gray75}),
Plot.ruleY([.5], {x1:xmin, x2:xmax, stroke: gray75, strokeDasharray: 1}),
Plot.ruleY([0, 1]),
Plot.ruleY(data, {y: [0,.5,1], x1: d=>xmax, x2: d=>xmax+.25, stroke: gray75}),
Plot.text(data, {text: "Province", x: d => titX, y: d => titY, fill: gray25, fontFamily: fonts}),
Plot.text(data, {text: ["0%", "50%", "100%"], x: d=>xmax+.75, y: [0,.5,1], fill: "gray", fontFamily: fonts}),
Plot.text(data, {text: ["2004", "2021"], x: [xmin,xmax], y: [-0.05,-0.05], fill: "gray", fontFamily: fonts}),
Plot.line(data, {x: "Election", y: "Turnout", stroke: ecb}),
],
style : {background: "white", color: "white"}
})
svg.id = "PlotFacet";
d3.select("#PlotFacet")
.append("text")
.attr("x", 200)
.attr("y", 200)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("text-decoration", "bold")
.style("color", "black")
.text("On-reserve turnout (2004-2021)");
return svg;
}
positions = Object({
60: {"row": 1, "column": 1},
61: {"row": 1, "column": 2},
62: {"row": 1, "column": 3},
10: {"row": 1, "column": 6},
11: {"row": 1, "column": 7},
59: { "row": 2, "column": 1},
48: {"row": 2, "column": 2},
47: {"row": 2, "column": 3},
46: {"row": 2, "column": 4},
35: {"row": 2, "column": 5},
24: {"row": 2, "column": 6},
13: {"row": 2, "column": 7},
12: {"row": 3, "column": 7},
99: {"row": 3, "column": 1},
})
title_dat = Array.from(d3.rollup(reserve_trt, data => Object({"Province": d3.max(data, d => d.Province), "row": d3.max(data, d => d.row), "column": d3.max(data, d => d.column)}), d => d.Province).values())
reserve_trt = d3.csv("https://gist.githubusercontent.com/mbarison/e0ca6ca867e5232ad75fa60f48e548f7/raw/f92031320afa9bd3edea262841730ebd5c29a93a/bargiel_long.csv").then(data => data.map(d => {
d.prov_id = parseInt(d.prov_id);
d.Election = parseInt(d.Election);
d.Turnout = parseFloat(d.Turnout);
d.Turnout_lo = parseFloat(d.Turnout_lo);
d.Turnout_hi = parseFloat(d.Turnout_hi);
d.Province = provinceCodes[d.prov_id];
d.row = positions[d.prov_id].row;
d.column = positions[d.prov_id].column;
return d;}))
provinceCodes = Object({
10: "Newf. and Labr.",
11: "Pr. Edward Isl.",
12: "Nova Scotia",
13: "New Brunswick",
24: "Quebec",
35: "Ontario",
46: "Manitoba",
47: "Saskatchewan",
48: "Alberta",
59: "British Columbia",
60: "Yukon",
61: "Northwest Territory",
62: "Nunavut",
99: "Canada"
})
function addTitle(plot) {
const plot_id = plot.id;
var svg = d3.select("#"+plot_id);
svg.selectAll("title")
.append("text")
.attr("x", 350)
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("text-decoration", "bold")
.style("color", "black")
.text("On-reserve turnout (2004-2011)");
return svg.node();
}
// d3.select("#PlotFacet")
// .selectAll("title")
// .append("text")
// .attr("x", 350)
// .attr("y", 25)
// .attr("text-anchor", "middle")
// .style("font-size", "24px")
// .style("text-decoration", "bold")
// .style("color", "black")
// .text("On-reserve turnout (2004-2011)");
console.log(plt)
plt.id
d3.select("#PlotFacet").node()
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.
