The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Nov 13, 2020
9 stars
datedFilename = `https://raw.githubusercontent.com/kerryrodden/nc-absentee-votes/main/versions/absentee_20201103_aggregated_${formatYYYYMMDD(selectedDateParsed)}.csv`
data = {
const csv = await d3.csv(datedFilename, d3.autoType);
return csv.columns.includes("ballot_req_type") ? csv.filter(d => d.ballot_req_type === "MAIL") : csv;
}
table(data)
raceSubset = ["BLACK or AFRICAN AMERICAN", "WHITE"]
statusSubset = ["ACCEPTED", "ACCEPTED - CURED", "PENDING CURE", "RETURNED UNDELIVERABLE", "SPOILED", "WITNESS INFO INCOMPLETE"] // others will be categorized "OTHER"
notAcceptedByRace = d3.rollups(data, v => d3.sum(v, d => d.count), d => d.race, d => d.ballot_rtn_status)
.map(([race, entries]) => {
const total = d3.sum(entries, ([status, value]) => value);
const notAccepted = d3.sum(entries, ([status, value]) => status.startsWith("ACCEPTED") ? 0 : value);
return {race, total, notAccepted, percentage: total ? notAccepted / total : 0};
});
rejectionRatio = {
const black = notAcceptedByRace.find(d => d.race === "BLACK or AFRICAN AMERICAN");
const white = notAcceptedByRace.find(d => d.race === "WHITE");
if (black && white && white.percentage > 0) {
return black.percentage / white.percentage;
} else {
return 0;
}
}
totalRejected = d3.sum(data.filter(d => !d.ballot_rtn_status.startsWith("ACCEPTED")), d => d.count)
rollupByRaceAndStatus = data => {
const dataWithOther = data.map(d => ({ ...d, status: statusSubset.includes(d.ballot_rtn_status) ? d.ballot_rtn_status : "OTHER"}));
return d3.rollups(dataWithOther, v => d3.sum(v, d => d.count), d => d.race, d => d.status)
.flatMap(([race, entries]) => {
const total = d3.sum(entries, d => d[1]);
return entries.map(([status, sum]) => ({race, status, sum, percentage: total ? sum / total : 0}));
})
}
raceStatusSummary = rollupByRaceAndStatus(data)
selectedByCounty = new Map(d3.groups(data, d => d.county_desc)
.map(([county, entries]) => {
const selectedData = rollupByRaceAndStatus(entries)
.filter((d => d.race === selectedRace && selectedStatus.includes(d.status)));
return [county, selectedData];
})
.filter(([county, selectedData]) => selectedData.length > 0))
today = d3.timeFormat("%Y-%m-%d")(Date.now())
selectedDateParsed = parseDate(selectedDate)
parseDate = d3.timeParse("%Y-%m-%d")
formatDate = d3.timeFormat("%B %-e, %Y");
formatYYYYMMDD = d3.timeFormat("%Y%m%d")
barChartData = Object.assign(notAcceptedByRace.filter(({total}) => total >= 100).map(({race, percentage}) => ({name: race, value: percentage})).sort((a, b) => d3.descending(a.value, b.value)), {format: "%"})
margin = ({top: 30, right: 0, bottom: 10, left: 200})
import {chart as horizontalBarChart} with { barChartData as data, margin} from "@d3/horizontal-bar-chart"
countiesNC = new Map((await FileAttachment("NC_FIPS.csv").csv()).map(({code, county}) => [code, county]))
counties = ({type: "FeatureCollection", features: topojson.feature(us, us.objects.counties).features.filter(d => countiesNC.has(d.id))})
cities = (await FileAttachment("Cities_NC.csv").csv({typed: true}))
.map(({name, population, latitude, longitude}) => ({
name, population, coordinates: projection([longitude, latitude])
}))
mapHeight = Math.max(150, width / 3)
path = d3.geoPath(projection)
projection = d3
.geoAlbers()
.rotate([0, 62, 0])
.fitSize([width, mapHeight], counties)
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
color = d3.scaleSequential()
.domain([0, selectedStatus.includes("ACCEPTED") ? 1.0 : 0.3])
.range([0.15, 0.75].map(d3.interpolateBlues))
percentageFormat = d3.format(".2%")
d3 = require("d3@6")
topojson = require("topojson-client@3")
import {vl} from "@vega/vega-lite-api"
import {date, radio, select} from "@jashkenas/inputs"
import {table} from "@tmcw/tables/2"
import {legend} from "@d3/color-legend"
import {percentageLineChart, ratioLineChart} from "aabc88a9cc02c606"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.