2e:null 2f:["$","title",null,{"children":"Texas Voter Turnout by Congressional District in 2020 | Matt | Observable"}] 34: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(40)) .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(40)) .attr('x', xScale(40)) .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() }35:Td38,viewof districtMap = { const features = topojson.feature(usCongress, usCongress.objects.districts).features.filter(d => d.id.toString().slice(0,2) === '48') const projection = d3.geoConicConformal() .parallels([30 + 7 / 60, 31 + 53 / 60]) .rotate([100 + 20 / 60, 0]) .fitSize([width, height], { type: "FeatureCollection", features }) let path = d3.geoPath() .projection(projection); let svg = d3.select(DOM.element('svg')) .attr("width", width) .attr("height", height); svg.append("defs").append("path") .attr("id", "land") .data(topojson.feature(usTopo, usTopo.objects.states).features.filter(d => d.id === 48)) .attr("d", path); svg.append("clipPath") .attr("id", "clip-land") .append("use") .attr("xlink:href", "#land"); // draw districts svg.append("g") .attr("class", "districts") .attr("clip-path", "url(#clip-land)") .selectAll("path") .data(topojson.feature(geo, geo.objects["116thcongress"]) .features.filter(d => d.properties.STFIPS === "48")) .enter().append("path") .attr("d", path) // .attr('fill', d => { // console.log('d.properties: ', d.properties) // return 'inherit' // }) .attr('stroke', d => 'inherit') .attr("fill", d => { console.log('d.properties: ', d.properties) return colorScale(turnoutPerc.get(d.properties.DISTRICTID)) }) // .attr("stroke", d => colorScale(turnoutPerc.get(d.properties.DISTRICTID))) .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 districtData = { showTT: true, FIPS: d.properties.DISTRICTID, mouse: {x: ttPos.x, y: ttPos.y} } updateCurrentDistrict(districtData); }) .on('mouseout', (event, d) => { updateCurrentDistrict({ showTT: false, FIPS: null }); d3.select(event.currentTarget).style('stroke', 'none').style('cursor', 'default'); }) .on('mousedown', (event,d) => { event.preventDefault(); let url = `https://google.com`; window.open(url, '_blank'); }); function updateCurrentDistrict(d){ // emit the id of the current hovered county svg.node().value = d; console.log('svg.node().value: ', svg.node().value) svg.node().dispatchEvent(new CustomEvent("input")); } updateCurrentDistrict({ showTT: false, FIPS: null }); svg.append("path") .attr("class", "district-boundaries") .datum(topojson.mesh(geo, geo.objects['116thcongress'], function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })) .attr("d", path); svg.append("path") .attr("class", "state-boundaries") .datum(topojson.mesh(usTopo, usTopo.objects.states, function(a, b) { return a !== b; })) .attr("d", path); // wrap the svg node in a div to make the whole tooltip thing work return document.createElement("div").appendChild(svg.node()); // return svg.node(); }36:T639,ttText = { if (!districtMap.showTT) return; if (!districtProps) return; let {turnoutPerc, nNonVote, VAP, districtName, percFromMean, state} = districtProps; let popFmt = d3.format(",") let percFmt = d3.format(".1f") console.log('districtProps: ', districtProps) 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 in ${districtName}!` } if (turnoutPerc == 100){ return `In the 2020 presidential election, voter turnout in ${districtName} was ${percFmt(turnoutPerc)}%. All ${popFmt(VAP)} of you voted. Keep doing your thing, ${districtName}. You're a model to the rest of us!` } return percFromMean > 0 ? `In the 2020 presidential election, voter turnout in ${districtName} 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 in ${districtName}!` : `In the 2020 presidential election, voter turnout in ${districtName} 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 in ${districtName}!` }37:T57e,tooltip = { if (!districtMap.showTT) return; if (!districtProps) 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(districtProps.districtName); location.append('h2') .attr('class', 'tt-state') .html(districtProps.state); const percLabel = header.append('div') .attr('class', 'perc-label-container') .style('background-color', colorScale(districtProps.turnoutPerc)); percLabel.append('h1') .attr('class', 'tt-perc-label') .style('color', (districtProps.turnoutPerc > 40 && districtProps.turnoutPerc < 70) ? '#000' : '#FFF') .html(`${Math.round(districtProps.turnoutPerc)}%`) // chart let svg = generateTooltipChart(districtProps.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 ${districtProps.state} to learn how to vote here`); return document.createElement('div').appendChild(container.node()); }38:T4e4,ttStyle = html` `39:T899,generateTooltipChart = (districtPerc) => { // 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(districtPerc)) .attr('cy', histHeight) .attr('r', 7) .style('fill', colorScale(districtPerc)) .style('stroke', 'black'); return svg }3a:[{"id":"76e3b93fe193af1e214f7522dd0ae234ebe4e7647ff154ac2c8e7b2e26766e03e76e5daa294fa779f28497d8114b436d772a2041538adf486cf94aac62ed4bcc","href":"https://static.observableusercontent.com/files/76e3b93fe193af1e214f7522dd0ae234ebe4e7647ff154ac2c8e7b2e26766e03e76e5daa294fa779f28497d8114b436d772a2041538adf486cf94aac62ed4bcc","name":"116thcongress.topo@1.json","type":"application/json","lastModified":1623454837246.974,"size":477004},{"id":"e9ec3d9a193a9c2ce87ed1c1e897427bffba7351c5971a3c23df75eb16af7c2346a6fa498d3cdb8307943e72d8a6935a1011a93146e41dccd11cad9c8f1efa65","href":"https://static.observableusercontent.com/files/e9ec3d9a193a9c2ce87ed1c1e897427bffba7351c5971a3c23df75eb16af7c2346a6fa498d3cdb8307943e72d8a6935a1011a93146e41dccd11cad9c8f1efa65","name":"tx_turnout_2020_cd@1.csv","type":"text/csv","lastModified":1623465031008.128,"size":5318}] 32:{"id":"15bde6b87197183c","slug":"texas-voter-turnout-by-congressional-district-in-2020","title":"Texas Voter Turnout by Congressional District in 2020","thumbnail":"070d584faf5e06e4e69c37fff16fbee28e998b083c18a94fd82df859ed631fc4","access_level":"public","create_time":"$D2021-06-11T23:40:37.246Z","update_time":"$D2021-06-17T17:24:23.619Z","view_time":null,"first_public_time":"$D2021-06-13T15:09:06.588Z","has_unpublished_edits":null,"fork":{"id":"fd8ab20fe344aca8","slug":"texas-congressional-districts","title":"Texas Congressional Districts","owner":{"id":"e7495b5c45db3d06","login":"theemattoliver","name":"Matt"}},"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":194,"publish_version":194,"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":0,"collection":null,"type":"notebook","body":{"title":"Texas Voter Turnout by Congressional District in 2020","cells":[{"id":0,"value":"md`# Texas Voter Turnout by Congressional District in 2020 `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"chart = html`\n

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

${tooltip}

` : \"\"}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"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 return {x:x, y:y}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"d3.min(data, d => d.turnoutPerc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"colorScale = d3.scaleDivergingPow([40, 60, 80], d3.interpolateRdYlGn).unknown('#fff');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"getDistrictProps = (districtData) => {\n if (districtData.FIPS){\n let FIPS = districtData.FIPS;\n return data.filter(d => d.FIPS === FIPS)[0]\n } else {\n return null\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"turnoutPerc = new Map(data.map(d => [d.FIPS, d.turnoutPerc]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"height = .65 * width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"districtProps = getDistrictProps(districtMap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"data = d3.csvParse(await FileAttachment(\"tx_turnout_2020_cd@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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"usCongress = (await fetch(`https://cdn.rawgit.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us-congress-113.json`)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"/* via https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_116th_Congressional_Districts/FeatureServer/0/query?where=1=1&outFields=*&returnGeometry=true&f=pgeojson */\ngeo = FileAttachment(\"116thcongress.topo@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"usTopo = (await fetch('https://cdn.rawgit.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json')).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {ramp} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"