2d:null 2e:["$","title",null,{"children":"Texas Voter Turnout by County in 2020 | Matt | Observable"}] 33:Tc18,legend = { let lw = 320; let lh = 150; let margin = { top: 35, bottom: 100, left: 0, right: 0 } const svg = d3.create("svg") .attr("width", lw) .attr("height", lh) .attr("viewBox", [0, 0, lw, lh]) .style("overflow", "visible") .style("display", "block"); svg.append('style').html( `.legend-label { font-family: 'Helvetica Neue', sans-serif; font-weight: 400; font-size: 14px; } .legend-title { font-family: 'Helvetica Neue', sans-serif; font-weight: bold; font-size: 18px; } `); const n = Math.min(colorScale.domain().length, colorScale.range().length); const xScale = d3.scaleLinear() .domain(d3.extent(colorScale.domain())) .range([0, lw]); const rect = svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', lw) .attr('height', lh) .style('fill', '#FFF') // create the clipping path mask for rounded corners // let defs = svg.append("defs") // defs.append('rect') // .attr('id', 'mask') // .attr("x", margin.left) // .attr("y", margin.top) // .attr('rx', 10) // .attr("width", lw - margin.left - margin.right) // .attr("height", lh - margin.top - margin.bottom) // defs.append('clipPath') // .attr('id', 'clip') // .append('use') // .attr('xlink:href', '#mask'); svg.append("image") .attr("x", margin.left) .attr("y", margin.top) .attr("width", lw - margin.left - margin.right) .attr("height", lh - margin.top - margin.bottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(colorScale.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()) .attr('clip-path', 'url(#clip)'); // Title svg.append('text') .attr('text-anchor', 'start') .attr('x', xScale(30)) .attr('y', 20) .attr('class', 'legend-title') .text('2020 Election Turnout Rates'); // --- Ticks // National Average line svg.append('line') .attr('x1', xScale(66.8)) .attr('x2', xScale(66.8)) .attr('y1', 29) .attr('y2', 56) .style('stroke-width', 1.5) .style('stroke', 'black'); svg.append('text') .attr('text-anchor', 'start') .attr('alignment-baseline', 'hanging') .style('fill', colorScale(30)) .attr('x', xScale(30)) .attr('y', 63) .attr('class', 'legend-label') .text('<30%'); svg.append('text') .attr('text-anchor', 'end') .attr('alignment-baseline', 'hanging') .style('fill', colorScale(80)) .attr('x', xScale(80)) .attr('y', 63) .attr('class', 'legend-label') .text('>80%'); svg.append('text') .attr('text-anchor', 'middle') .attr('alignment-baseline', 'hanging') .attr('x', xScale(66.8)) .attr('y', 63) .attr('class', 'legend-label') .text('66.8%'); svg.append('text') .attr('text-anchor', 'middle') .attr('alignment-baseline', 'hanging') .attr('x', xScale(66.8)) .attr('y', 85) .attr('class', 'legend-label') .text("Nat'l Average"); return svg.node() }34:T88c,viewof countyMap = { // center and scale state const projection = d3.geoIdentity() .fitSize([width, height], topojson.feature(geo, geo.objects.states.geometries.find(f => f.id === "48"))); const path = d3.geoPath(); path.projection(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewbox", [0, 0, width, height]); // draw counties svg.append("g") .selectAll("path") .data(topojson.feature(geo, geo.objects.counties).features.filter(d => d.id.slice(0, 2) === "48")) .join("path") .attr("fill", d => colorScale(turnoutPerc.get(d.id))) .attr("d", path) .on('mousemove', (event,d) => { d3.select(event.currentTarget) .raise() .style('stroke', "#000") .style('stroke-width', 2) .style('cursor', 'pointer'); event.preventDefault(); let [x,y] = d3.pointer(event) let ttPos = positionTooltip(x,y); let countyData = { showTT: true, FIPS: d.id, mouse: {x: ttPos.x, y: ttPos.y} } updateCurrentCounty(countyData); }) .on('mouseout', (event, d) => { updateCurrentCounty({ showTT: false, FIPS: null }); d3.select(event.currentTarget).style('stroke', 'none').style('cursor', 'default'); }) .on('mousedown', (event,d) => { event.preventDefault(); let url = `https://howto.vote/vote/en/${stateAbbrevByFIPS.get(d.id).toLowerCase()}.html`; window.open(url, '_blank'); }); function updateCurrentCounty(d){ // emit the id of the current hovered county svg.node().value = d; svg.node().dispatchEvent(new CustomEvent("input")); } updateCurrentCounty({ showTT: false, FIPS: null }); // draw states svg.append("path") .datum(topojson.mesh(geo, geo.objects.states.geometries.find(f => f.id === "48"), (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("d", path); // wrap the svg node in a div to make the whole tooltip thing work return document.createElement("div").appendChild(svg.node()); }35:T6c2,ttText = { if (!countyMap.showTT) return; if (!countyProps) return; let {turnoutPerc, nNonVote, VAP, countyName, percFromMean, state} = countyProps; let popFmt = d3.format(",") let percFmt = d3.format(".1f") if (state == 'Alaska'){ return ` *Note:County-level voter turnout rates for Alaska are unavailable for the 2020 presidential election. Across the entire state, voter turnout was ${percFmt(turnoutPerc)}%, which was roughly ${percFmt(Math.abs(percFromMean))}% above the national average. That means ${popFmt(nNonVote)} people were old enough to vote but didn't. Make a plan. Encourage your family, friends, and neighbors. Turn it up, ${countyName}!` } if (turnoutPerc == 100){ return `In the 2020 presidential election, voter turnout in ${countyName} was ${percFmt(turnoutPerc)}%. All ${popFmt(VAP)} of you voted. Keep doing your thing, ${countyName}. You're a model to the rest of us!` } return percFromMean > 0 ? `In the 2020 presidential election, voter turnout in ${countyName} was ${percFmt(turnoutPerc)}%, which was roughly ${percFmt(percFromMean)}% above the national average. Good work, but that still means ${popFmt(nNonVote)} people were old enough to vote but didn't. Make a plan. Encourage your family, friends, and neighbors. Turn it up, ${countyName}!` : `In the 2020 presidential election, voter turnout in ${countyName} was ${percFmt(turnoutPerc)}%, which was roughly ${percFmt(Math.abs(percFromMean))}% below the national average. That means ${popFmt(nNonVote)} people were old enough to vote but didn't. Make a plan. Encourage your family, friends, and neighbors. Turn it up, ${countyName}!` }36:T568,tooltip = { if (!countyMap.showTT) return; if (!countyProps) return; const container = d3.create('div') .attr('id', 'tooltip-container') // container.append('style').text(ttStyle); // Header const header = container.append('div') .attr('class', 'tt-header'); const location = header.append('div') .attr('class', 'tt-location') location.append('h1') .attr('class','tt-county') .html(countyProps.countyName); location.append('h2') .attr('class', 'tt-state') .html(countyProps.state); const percLabel = header.append('div') .attr('class', 'perc-label-container') .style('background-color', colorScale(countyProps.turnoutPerc)); percLabel.append('h1') .attr('class', 'tt-perc-label') .style('color', (countyProps.turnoutPerc > 40 && countyProps.turnoutPerc < 70) ? '#000' : '#FFF') .html(`${Math.round(countyProps.turnoutPerc)}%`) // chart let svg = generateTooltipChart(countyProps.turnoutPerc); container.append(() => svg.node()) // text container.append('div') .attr('class', 'tt-text') .html(ttText) // link container.append('div') .attr('class', 'tt-link-container') .append('h1') .attr('class', 'tt-link') .html(`click anywhere in ${countyProps.state} to learn how to vote here`); return document.createElement('div').appendChild(container.node()); }37:T4e4,ttStyle = html` `38:T893,generateTooltipChart = (countyPerc) => { // set the dimensions and margins of the graph let margin = {top: 40, right: 1, bottom: 10, left: 1}; let h = 100 - margin.top - margin.bottom; let w = 300 - margin.left - margin.right; let svg = d3.create('svg') .attr("width", 300) .attr("height", 100) .attr("viewbox", [0, 0, w, h]) let g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let histHeight = 30; let xScale = d3.scaleLinear() .domain([8, 102]) .range([0, w]); let xAxis = d3.axisBottom(xScale) .tickValues([20, 50, 66.8, 90]) .tickFormat(x => `${x}%`) .tickSizeOuter(0); g.append('g') .attr('class', 'x-axis') .attr('transform', `translate(0, ${histHeight})`) .call(xAxis) .call(g => { g.selectAll('.tick text') .attr('dx', '5px') .attr('class', 'tt-tick-labels'); }); // set up the histogram let hist = d3.histogram() .value(d => d.turnoutPerc) .domain(xScale.domain()) .thresholds(xScale.ticks(15)); let bins = hist(data); // y-axis let yScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([histHeight,0]); // rects for histogram g.selectAll('rect') .data(bins) .enter() .append('rect') .attr('x', 1) .attr('transform', d => `translate( ${xScale(d.x0)}, ${yScale(d.length)})`) .attr('width', d => xScale(d.x1) - xScale(d.x0) - 1) .attr('height', d => histHeight - yScale(d.length)) .style('fill', '#ccc'); // National Average g.append('line') .attr('x1', xScale(66.8)) .attr('x2', xScale(66.8)) .attr('y1', -10) .attr('y2', histHeight + 6) .style('stroke-width', 1.5) .style('stroke', 'black'); g.append('text') .attr('text-anchor', 'middle') .attr('x', xScale(66.8)) .attr('y', -15) .attr('class', 'tt-natl-avg-label') .text('National Average'); // Current county g.append('circle') .attr('cx', xScale(countyPerc)) .attr('cy', histHeight) .attr('r', 7) .style('fill', colorScale(countyPerc)) .style('stroke', 'black'); return svg }39:T75f,state = () => { const w = width; const h = .75 * w; const path = d3.geoPath(); const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewbox", [0, 0, w, h]) .style("position", "absolute"); var filter = svg.append("defs") .append("filter") .attr("id", "blur") .append("feGaussianBlur") .attr("stdDeviation", 1) .append("feOffset") .attr("dx", 5) .attr("dy", 5) // if a county has been selected let FIPS = countyMap.FIPS ; if (FIPS){ let stateGeo = topojson .feature(geo, geo.objects.states) .features.filter(d => d.id === FIPS.slice(0,2))[0]; let countyGeo = topojson .feature(geo, geo.objects.counties) .features.filter(d => d.id === FIPS)[0]; // center and scale state const projection = d3.geoIdentity() .fitSize([w * .5, h], stateGeo); path.projection(projection); // show state svg.append("g") .append("path") .datum(stateGeo) .attr("d", path) .attr("fill", "#EEEEEE") .attr("stroke", "#ccc") .attr("stroke-linejoin", "round") // show county-shadow svg.append("g") .append("path") .datum(countyGeo) .attr("d", path) .attr("transform", "translate(-3 3)") .attr("fill", "rgba(0,0,0,.2)") .attr("stroke", "none") .attr("filter", "url(#blur)"); // show county svg.append("g") .append("path") .datum(countyGeo) .attr("d", path) .attr("fill", "#D8C06F") .attr("stroke", "#999") .attr("stroke-linejoin", "round") // draw text const text = svg.append("g") text.append("text") .attr("x", width * .5) .attr("y", height * .1) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("fill", "#f00"); } return svg.node(); }3a:[{"id":"b0de465837e0bf1ec8105ceeb5e78e6b9d09f928ff920ae143f8a6626991bedf83ac347e9810d9ae3402eebface356723faa82968589b567ed685ae53930fb41","href":"https://static.observableusercontent.com/files/b0de465837e0bf1ec8105ceeb5e78e6b9d09f928ff920ae143f8a6626991bedf83ac347e9810d9ae3402eebface356723faa82968589b567ed685ae53930fb41","name":"counties-albers-10m-topo@1.json","type":"application/json","lastModified":1623026591178.432,"size":795406},{"id":"014b8d5e0e5a8be53fa2e29c270dc6b9cafc3d08699364b5dac0d82971cbaf5d1dd4909ba7d1d5e479f381632d70dcc68491053c0153a131b6b2b62b535b59e3","href":"https://static.observableusercontent.com/files/014b8d5e0e5a8be53fa2e29c270dc6b9cafc3d08699364b5dac0d82971cbaf5d1dd4909ba7d1d5e479f381632d70dcc68491053c0153a131b6b2b62b535b59e3","name":"tx_turnout_2020_county@1.csv","type":"text/csv","lastModified":1623027065143.416,"size":18195}] 31:{"id":"a5cdab844404a746","slug":"texas-voter-turnout-by-county-in-2020","title":"Texas Voter Turnout by County in 2020","thumbnail":"ad5073c0aa0b03f6abe612884d965916a32e7b8104f52e4c32119d39c9450184","access_level":"public","create_time":"$D2021-06-07T00:43:11.178Z","update_time":"$D2021-06-12T01:53:04.247Z","view_time":null,"first_public_time":"$D2021-06-09T18:32:45.191Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e7495b5c45db3d06","login":"theemattoliver","name":"Matt","avatar_url":"https://avatars-next.observableusercontent.com/9a2e923f745e29954869f11104eafeb68070394516deab18c0e3aa2fe2ee9b0d","tier":"starter_2024"},"version":1326,"publish_version":1326,"role":null,"authored":false,"authors":[{"type":"individual","id":"d04c9396fb981b62","login":"theemattoliver","name":"Matt","avatar_url":"https://avatars-next.observableusercontent.com/9a2e923f745e29954869f11104eafeb68070394516deab18c0e3aa2fe2ee9b0d","tier":null}],"members":[{"type":"individual","id":"d04c9396fb981b62","login":"theemattoliver","name":"Matt","avatar_url":"https://avatars-next.observableusercontent.com/9a2e923f745e29954869f11104eafeb68070394516deab18c0e3aa2fe2ee9b0d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Texas Voter Turnout by County in 2020","cells":[{"id":0,"value":"md`# Texas Voter Turnout by County in 2020\n\nAn interactive choropleth to show voter turnout by Texas county in the 2020 presidential election. \n\nVoter turnout within each county was defined as the total votes divided by the voting-age population (VAP). Using VAP as the denominator is less accurate than using voting-eligible population (VEP), however county-level VEP data was not available. For more information on this distinction, please see [US Elections Project](http://www.electproject.org/2016g).\n\nCounty-level presidential vote totals from [MIT Election Data + Science Lab](https://electionlab.mit.edu/data). County-level voting age population estimates were taken from the 2012-2016 American Community Survey administered by the [US Census Bureau]( https://www.census.gov/programs-surveys/decennial-census/about/voting-rights/cvap.2016.html). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"chart = html`\n

\n ${viewof countyMap}\n ${tooltip ? html`

${tooltip}

` : \"\"}\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"countyProps = getCountyProps(countyMap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"positionTooltip = (x,y) => {\n let xOffset = 20;\n let ttWidth = 300;\n if ((x + xOffset + ttWidth) > width){\n x = x - ttWidth - (2 * xOffset); \n } else {\n x = x + xOffset\n }\n \n let ttHeight = 400;\n if (y < ttHeight/2) {\n y = y;\n } else if (y >= ttHeight/2 && y < height - ttHeight/2) {\n y = y - ttHeight/2;\n } else {\n y = y - ttHeight; \n }\n \n \n \n return {x:x, y:y}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"d3.min(data, d => d.turnoutPerc)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"colorScale = d3.scaleDivergingPow([30, 55.5, 80], d3.interpolateRdYlGn).unknown('#fff');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"getCountyProps = (countyData) => {\n if (countyData.FIPS){\n let FIPS = countyData.FIPS;\n return data.filter(d => d.FIPS === FIPS)[0]\n } else {\n return null\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"turnoutPerc = new Map(data.map(d => [d.FIPS, d.turnoutPerc]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"stateAbbrevByFIPS = new Map(data.map(d => [d.FIPS, d.stateAbbrev]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"height = .65 * width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`### data sources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"data = d3.csvParse(await FileAttachment(\"tx_turnout_2020_county@1.csv\").text(), d => {\n d.totalVotes = +d.totalVotes;\n d.VAP = +d.VAP;\n d.turnoutPerc = +d.turnoutPerc;\n d.nNonVote = +d.nNonVote;\n d.percFromMean = +d.percFromMean;\n \n return d;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"geoTexasCounties = geo.objects.counties.geometries.filter(f => f.id.includes(\"48\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"geo = FileAttachment(\"counties-albers-10m-topo@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md `### imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"import {ramp} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"