The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Nov 13, 2020
9 stars
2
Equality
2021 Pride Month and LGBTQIA+ EqualityWomen in the German Bundestag by PartyAnti-Trans Legislation TrackerThe Racial Wealth GapHow much money does MTC owe Mississippi for vacant guard jobs?George Floyd Protests: Press Freedom Violations Per DayRacial demographic dot-density mapA Growing Threat to Life: Taser usage by Greater Manchester PoliceThe Woman Citizen's Wheel of Progress, 1917
Rejected Mail Ballots in North Carolina
Pride Month and LGBTQIA+ EqualityBlack Lives Matter and Anti-RacismJuneteenth: History and ResourcesBlack Lives Matter and Racial Equality Resources
Also listed in…
Elections
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datedFilename = `https://raw.githubusercontent.com/kerryrodden/nc-absentee-votes/main/versions/absentee_20201103_aggregated_${formatYYYYMMDD(selectedDateParsed)}.csv`
Insert cell
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;
}
Insert cell
Insert cell
table(data)
Insert cell
Insert cell
raceSubset = ["BLACK or AFRICAN AMERICAN", "WHITE"]
Insert cell
statusSubset = ["ACCEPTED", "ACCEPTED - CURED", "PENDING CURE", "RETURNED UNDELIVERABLE", "SPOILED", "WITNESS INFO INCOMPLETE"] // others will be categorized "OTHER"
Insert cell
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};
});
Insert cell
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;
}
}
Insert cell
totalRejected = d3.sum(data.filter(d => !d.ballot_rtn_status.startsWith("ACCEPTED")), d => d.count)
Insert cell
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}));
})
}
Insert cell
raceStatusSummary = rollupByRaceAndStatus(data)
Insert cell
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))
Insert cell
today = d3.timeFormat("%Y-%m-%d")(Date.now())
Insert cell
selectedDateParsed = parseDate(selectedDate)
Insert cell
parseDate = d3.timeParse("%Y-%m-%d")
Insert cell
formatDate = d3.timeFormat("%B %-e, %Y");
Insert cell
formatYYYYMMDD = d3.timeFormat("%Y%m%d")
Insert cell
Insert cell
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: "%"})
Insert cell
margin = ({top: 30, right: 0, bottom: 10, left: 200})
Insert cell
import {chart as horizontalBarChart} with { barChartData as data, margin} from "@d3/horizontal-bar-chart"
Insert cell
Insert cell
countiesNC = new Map((await FileAttachment("NC_FIPS.csv").csv()).map(({code, county}) => [code, county]))
Insert cell
counties = ({type: "FeatureCollection", features: topojson.feature(us, us.objects.counties).features.filter(d => countiesNC.has(d.id))})
Insert cell
cities = (await FileAttachment("Cities_NC.csv").csv({typed: true}))
.map(({name, population, latitude, longitude}) => ({
name, population, coordinates: projection([longitude, latitude])
}))
Insert cell
mapHeight = Math.max(150, width / 3)
Insert cell
path = d3.geoPath(projection)
Insert cell
projection = d3
.geoAlbers()
.rotate([0, 62, 0])
.fitSize([width, mapHeight], counties)
Insert cell
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
Insert cell
color = d3.scaleSequential()
.domain([0, selectedStatus.includes("ACCEPTED") ? 1.0 : 0.3])
.range([0.15, 0.75].map(d3.interpolateBlues))
Insert cell
percentageFormat = d3.format(".2%")
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
topojson = require("topojson-client@3")
Insert cell
import {vl} from "@vega/vega-lite-api"
Insert cell
import {date, radio, select} from "@jashkenas/inputs"
Insert cell
import {table} from "@tmcw/tables/2"
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
import {percentageLineChart, ratioLineChart} from "aabc88a9cc02c606"
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