EJ Fox & Ian Johnson
streaming data, code, acid, design
circles
nytPres.meta.version
nytPres = d3.json(
"https://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/national-map-page/national/president.json"
)
numformat = d3.format(",d")
tooltip = html`<div id="svg-tip" style="position:fixed; pointer-events: none; background: rgba(255,255,255,0.8); padding: 5px;">
Name: <span class="county-name"></span> County, <span class="state"></span><br>
Votes 2020: <span class="county-votes2020"></span><br>
Expected: <span class="county-expected"></span><br>
Votes 2016: <span class="county-votes2016"></span><br>
</div>`
mapSizedByVote = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// svg.append("g").attr("transform", "translate(${height},20)");
// .append(() => legend({ ramp, title: data.title, width: 260 }));
svg
.append("g")
.selectAll("circle")
.data(circles.filter(d => !!d.winner))
.join("circle")
.attr("fill", d => {
let tt = nytPresCountiesByFIPS.get(d.id);
if (!tt) return "lightgray";
if (tt.results.trumpd < tt.results.bidenj) {
return blue;
} else if (tt.results.trumpd > tt.results.bidenj) {
return red;
}
return "lightgray";
})
.attr("stroke", d => {
let problem = shirleyDataByFIPS.get(d.id);
if (problem) {
return "orange";
}
return "none";
})
.attr("opacity", d => {
let tt = nytPresCountiesByFIPS.get(d.id);
if (!tt) return 0.1;
return (
0.2 + tt.votes / (tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016)
);
})
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => {
let tt = nytPresCountiesByFIPS.get(d.id);
if (!tt) return false;
let r = tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016;
r = Math.sqrt(r * 0.001) * 0.4 + 1;
return r;
})
.on("click", (event, d) => {
let tt = nytPresCountiesByFIPS.get(d.id);
console.log("county", d, tt);
})
.append("title")
.text(d => d.properties.name);
return svg.node();
// return html`<div style='color:#111'};'>${svg.node()}</div>`;
}
map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// svg.append("g").attr("transform", "translate(${height},20)");
// .append(() => legend({ ramp, title: data.title, width: 260 }));
svg
.append("g")
.selectAll("circle")
.data(circles.filter(d => !!d.winner))
.join("circle")
.attr("fill", d => {
let tt = nytPresCountiesByFIPS.get(d.id);
if (!tt) return "lightgray";
if (tt.results.trumpd < tt.results.bidenj) {
return blue;
} else if (tt.results.trumpd > tt.results.bidenj) {
return red;
}
return "lightgray";
})
.attr("stroke", d => {
let problem = shirleyDataByFIPS.get(d.id);
if (problem) {
return "orange";
}
return "none";
})
.attr("opacity", d => {
let tt = nytPresCountiesByFIPS.get(d.id);
if (!tt) return 0.1;
return (
0.2 + tt.votes / (tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016)
);
})
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.p)
.on("click", (event, d) => {
let tt = nytPresCountiesByFIPS.get(d.id);
console.log("county", d, tt);
})
.append("title")
.text(d => d.properties.name);
return svg.node();
// return html`<div style='color:#111'};'>${svg.node()}</div>`;
}
import {
flData,
gaData,
miData,
ncData,
ohData,
paData,
txData
} from "@philipnelson/election-night-results"
nytPresCounties = {
let data = [];
nytPres.data.races.forEach(r => {
data = data.concat(r.counties);
});
return data;
}
ky = nytPresCounties.filter(d => d.fips.slice(0, 2) == "21")
nytPresStatesByAbbr = new Map(nytPres.data.races.map(d => [d.state_id, d]))
nytPresCountiesByFIPS = new Map(nytPresCounties.map(d => [d.fips, d]))
// import { circles } from "@codingwithfire/force-bubble-map-with-textures-js"
circles = FileAttachment("circles2016.json").json()
lightBlue = "#52b2e8"
lightRed = "#ee448a"
blue = "#002868"
red = "#bf0a30"
height = 600
import { data as shirleyData } from "@sxywu/7-voting-problems-on-election-day"
shirleyData
shirleyDataByFIPS = new Map(shirleyData.map(d => [d.FIPS, d]))
// nytSummary = d3.json(
// "https://static01.nyt.com/elections-assets/2020/data/liveModel/2020-11-03/president/summary.json"
// )
[flData, gaData, miData, ncData, ohData, paData, txData]
d3 = require("d3")
cnnData = d3.json(
"https://politics-elex-results.data.api.cnn.io/results/view/2020-national-races-PG.json"
)
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.
