2b:null 2c:["$","title",null,{"children":"Voter Particplation Map 2020 | Bob Kerns | Observable"}] 31:T6e6,vote_map = { const group = ageGroup === 'Total' ? 'over the age of 18' : ageGroup; const legend_node = legend({ color: d3.scaleSequential([0.3, 0.9], p => colorScale(p)), tickFormat: "%", title: `Percent of citizens ${group} voting` }); const height = (width * 5) / 8; const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", "0 0 960 600") .style("width", "100%") .style("height", "auto"); // render map const path = d3.geoPath(projection); // Function from state data to SVG path const fill_state = n => { n.append("path") .attr("fill", state =>state.properties.votes.percentVotedCitizens ? colorScale( (state.properties.votes.percentVotedCitizens / 100 - 0.3) / 0.6 ) : "#aaaaaa" ) .attr("d", path); }; const textLabel = n => { const offset_x = d => -10 + (state_label_offsets?.[d.abbreviation]?.x ?? 0); const offset_y = d => 5 + (state_label_offsets?.[d.abbreviation]?.y ?? 0); n .append('text') .attr('x', d => d.properties.centroid[0] + offset_x(d)) .attr('y', d => d.properties.centroid[1] + offset_y(d)) .text(d => d.abbreviation); }; svg .append("g") .selectAll("g.state") .data(states) .enter() .append('g') .classed('state', true) .call(fill_state) .call(mouseover) .call(textLabel); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.5) .attr("d", path); return md`

${legend_node}${svg.node()}

Percent of citizens ${group} voting by state.

`; }32:T61b,vote_map_population_spread_bubble = { const brange = range(d => d.properties.radius + 1)(spreadStates); const legend_node = legend({ color: d3.scaleSequential([0.3, 0.9], p => colorScale(p)), tickFormat: "%", title: `Percent of citizens ${ ageGroup === "Total" ? "over the age of 18" : ageGroup } voting` }); const height = (width * 5) / 8; const svg = d3 .select(DOM.svg(width, height)) .attr( "viewBox", `${brange.xmin} ${brange.ymin} ${brange.xmax - brange.xmin} ${brange.ymax - brange.ymin}` ) .style("width", "100%") .style("height", "auto"); // render map const path = d3.geoPath(projection); const bubble = n => n .append("circle") .attr("fill", d => d.properties.votes.percentVotedCitizens ? colorScale( (d.properties.votes.percentVotedCitizens / 100 - 0.3) / 0.6 ) : null_color ) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.properties.radius) .style("stroke", "white"); svg .append("g") .selectAll("g.bubble") .data(spreadStates) .enter() .append("g") .classed("bubble", true) .call(bubble) .call(mouseover) .call(textLabel); return md`

${legend_node}${svg.node()}

Same as the map above, but as bubbles sized by the number of citizens of each age group in the state. The size scale is consistent between age ranges, so you can compare the relative sizes of the groups.

`; }33:T847,vote_map_population_spread_bubbleTotal = { const brange = range(d => d.properties.radiusTotal + 1)(spreadStatesTotal); const legend_node = legend({ color: d3.scaleSequential([0.3, 0.9], p => colorScale(p)), tickFormat: "%", title: `Percent of citizens ${ ageGroup === "Total" ? "over the age of 18" : ageGroup } voting, vs all ages` }); const height = (width * 5) / 8; const svg = d3 .select(DOM.svg(width, height)) .attr( "viewBox", `${brange.xmin} ${brange.ymin} ${brange.xmax - brange.xmin} ${brange.ymax - brange.ymin}` ) .style("width", "100%") .style("height", "auto"); // render map const path = d3.geoPath(projection); const bubble = n => n .append("circle") .attr("fill", d => colorScale( d.properties.totalVotes.percentVotedCitizens ? (d.properties.totalVotes.percentVotedCitizens / 100 - 0.3) / 0.6 : null_color ) ) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.properties.radiusTotal) .style("stroke", "white"); const bubbleAge = n => n .append("circle") .attr("fill", d => d.properties.votes.percentVotedCitizens ? colorScale( (d.properties.votes.percentVotedCitizens / 100 - 0.3) / 0.6 ) : null_color ) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.properties.radiusAge) .style("stroke", "red") .style("stroke-width", 3); svg .append("g") .selectAll("g.bubble") .data(spreadStatesTotal) .enter() .append("g") .classed("bubble", true) .call(bubble) .call(bubbleAge) .call(mouseover) .call(textLabel); return md`

${legend_node}${svg.node()}

Same as the map above, but as bubbles sized by the total number of citizens total in the state. The inner circle is the selected age group.

The size scale is consistent between age ranges, so you can compare the relative sizes of the groups.

`; }34:T762,vote_map_population_spread_bubble_ec = { const brange = range(d => d.properties.radiusEC + 1)(spreadStatesEC); const legend_node = legend({ color: d3.scaleSequential([0.3, 0.9], p => colorScale(p)), tickFormat: "%", title: `Percent of citizens ${ ageGroup === "Total" ? "over the age of 18" : ageGroup } voting` }); const height = (width * 5) / 8; const svg = d3 .select(DOM.svg(width, height)) .attr( "viewBox", `${brange.xmin} ${brange.ymin} ${brange.xmax - brange.xmin} ${brange.ymax - brange.ymin}` ) .style("width", "100%") .style("height", "auto"); // render map const path = d3.geoPath(projection); const bubble = n => n .append("circle") .attr("fill", d => d.properties.votes.percentVotedCitizens ? colorScale( (d.properties.votes.percentVotedCitizens / 100 - 0.3) / 0.6 ) : null_color ) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.properties.radiusEC) .style("stroke", "white"); const bubblePop = n => n .append("circle") .attr("fill", "none") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.properties.radiusTotal) .style("stroke", "red") .style("stroke-width", 3); svg .append("g") .selectAll("g.bubble") .data(spreadStatesEC) .enter() .append("g") .classed("bubble", true) .call(bubble) .call(bubblePop) .call(mouseover) .call(textLabel); return md`

${legend_node}${svg.node()}

Same as the map above, but as bubbles sized by the number of Electoral College for the state. The red circles indicate the relative size of the population. For example, Wyoming is substantially over-represented, while DC is not represented at all.

`; }35:T498,election = { const election = {}; let current_state = null; const num = n => n && Number(n.replace(/,/g, '')); for (const row of raw_election) { if (row.STATE && row.STATE !== current_state?.state) { election[row.STATE] = current_state = {state: row.STATE, byAge: {}}; } current_state.byAge[row.Age] = { state: state_names[current_state.state], age: row.Age, population: num(row['Total population']), citizens: num(row['Total citizen population']), registered: num(row['Total registered']), percentRegisteredTotal: num(row[`Percent registered (Total)`]), marginRegisteredTotal: num(row['Margin of error registered total']), percentRegisteredCitizens: num(row['Percent registered (Citizen)']), marginRegisteredCitizens: num(row['Margin of error registered citizen']), voted: num(row['Total voted']), percentVotedTotal: num(row['Percent voted (Total)']), marginVotedTotal: num(row['Margin of error voted total']), percentVotedCitizens: num(row['Percent voted (Citizen)']), marginVotedCitizens: num(row['Margin of error voted citizen']), }; } return election; }36:T75f,states = topojson .feature(us, us.objects.states) .features.filter((state) => election[state.properties.name.toUpperCase()]) .map((state) => { const name = state.properties.name; const abbreviation = state_names[name].abbreviation; const idx = state.properties.name.toUpperCase(); const totalVotes = election[idx]?.byAge?.Total; const { population: populationTotal, citizens: citizensTotal} = totalVotes; const votes = election[idx]?.byAge?.[ageGroup] ?? Throw(`Could not find ${idx} for ${ageGroup}`); const { population, citizens} = votes; const reps = state_representation[abbreviation] ?? 0; return { idx, abbreviation, ...state, properties: { name, idx: state.properties.name.toUpperCase(), votes, totalVotes, citizens, population, citizensTotal, populationTotal, citizensTotal, centroid: projection( turf.centroid(state.geometry).geometry.coordinates ), radius: radiusScale(citizens), radiusAge: radiusScaleTotal(citizens), radiusTotal: radiusScaleTotal(citizensTotal), radiusEC: radiusScaleEC(reps ? reps + 2 : 0) } }; }) .filter((c) => c.properties.centroid) //.filter(c => c.geometry.type === "MultiPolygon") .sort((a, b) => a.abbreviation === 'DC' ? 1 : a.properties.centroid[0] < b.properties.centroid[0] ? -1 : 1 ) .map((d, i) => { let geometry; if (d.geometry.type !== "MultiPolygon") { geometry = d.geometry; } else { geometry = { type: d.geometry.type, coordinates: d.geometry.coordinates .sort((a, b) => turf.area(turf.polygon(a)) > turf.area(turf.polygon(b)) ? -1 : 1 ) .slice(0, 1) }; } return { ...d, rank: i, geometry }; })37:T432,applySimulation = size_fn => nodes => { const simulation = d3 .forceSimulation(nodes) .force( "cx", d3 .forceX() .x(d => width / 2) .strength(forces.center) ) .force( "cy", d3 .forceY() .y(d => (width * (5 / 8)) / 2) .strength((forces.center * 8) / 5) ) .force( "x", d3 .forceX() .x(d => (d.properties.centroid ? d.properties.centroid[0] : 0)) .strength(forces.position) ) .force( "y", d3 .forceY() .y(d => (d.properties.centroid ? d.properties.centroid[1] : 0)) .strength((forces.position * 8) / 5) ) .force("charge", d3.forceManyBody().strength(forces.charge)) .force( "collide", d3 .forceCollide() .radius(size_fn) .strength(forces.collision) ) .stop(); let i = 0; while (simulation.alpha() > 0.001 && i < 300) { simulation.tick(); i++; console.log(`${Math.round((100 * i) / 300)}%`); } return simulation.nodes(); }38:[{"id":"cf547e997644ca308dc3ba1c50a3861522f3d8cc0a332e59e158cb78b0359b091e580b642a0fb78aabb53655f41fb13292a9c131a34b74c3d9cfd0c09382c1d8","href":"https://static.observableusercontent.com/files/cf547e997644ca308dc3ba1c50a3861522f3d8cc0a332e59e158cb78b0359b091e580b642a0fb78aabb53655f41fb13292a9c131a34b74c3d9cfd0c09382c1d8","name":"voter-participation-2020-by-age@3.csv","type":"text/csv","lastModified":1619846264316.249,"size":22464},{"id":"f457728d88f0e66e8588fc96734133855532c96a5cd8d3bf0a5c23ea6ac6c583c656351315ec32dc857691850a2176171073592cabc9b0eebcd6d20c548e41d8","href":"https://static.observableusercontent.com/files/f457728d88f0e66e8588fc96734133855532c96a5cd8d3bf0a5c23ea6ac6c583c656351315ec32dc857691850a2176171073592cabc9b0eebcd6d20c548e41d8","name":"state_names.json","type":"application/json","lastModified":1620113796339.612,"size":26335},{"id":"21c719777b978086924edceea01c2f0cc5ac61d8a53c7c790e1af4dcc96855d24a3ed93b4f7157c21ba9473de9f249a017dc993ec918b2571049a2f024bbc3e4","href":"https://static.observableusercontent.com/files/21c719777b978086924edceea01c2f0cc5ac61d8a53c7c790e1af4dcc96855d24a3ed93b4f7157c21ba9473de9f249a017dc993ec918b2571049a2f024bbc3e4","name":"state_representation@1.json","type":"application/json","lastModified":1620121957192.982,"size":1049}] 2f:{"id":"bd7ed290f1d8b23e","slug":"voter-particplation-map-2020","title":"Voter Particplation Map 2020","thumbnail":"14a16db13dc61069fa5dc324dca96a0d6ad35b391dffe115056aca656a9b497d","access_level":"public","create_time":"$D2021-05-01T01:31:35.498Z","update_time":"$D2021-05-04T13:54:01.022Z","view_time":null,"first_public_time":"$D2021-05-01T07:13:18.087Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a2a391e81ef70f60","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":"starter_2024"},"version":915,"publish_version":915,"role":null,"authored":false,"authors":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null}],"members":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Voter Particplation Map 2020","cells":[{"id":0,"value":"md`# Voter Particplation Map 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof ageGroup = select({\n title: \"Age Group\",\n description: \"Please pick the age group.\",\n options: [\"Total\", \"18 to 24\", \"25 to 34\", \"35 to 44\", \"45 to 64\", \"65+\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"viewof forces = {\n const collision = slider({\n min: 0.1,\n value: 2,\n max: 3,\n precision: 3,\n description: \"Collision Force\"\n });\n const center = slider({\n min: -0.025,\n value: 0.02,\n max: 4,\n precision: 3,\n description: \"Centering Force\"\n });\n const charge = slider({\n min: -5,\n value: 0.2,\n max: 5,\n precision: 3,\n description: \"Charge Force\"\n });\n const position = slider({\n min: 0,\n value: 0.5,\n max: 10,\n precision: 3,\n description: \"Position Force\"\n });\n const padding = slider({\n min: 0,\n value: 0.5,\n max: 10,\n precision: 3,\n description: \"Node padding\"\n });\n return form({\n collision,\n center,\n charge,\n position,\n padding\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`### Footnote:\n* Gray indicates data not published due to small size and accuracy considerations for this age group.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`Per state 2020 election data, from the [US Census Bureau, Table 4C](https://www.census.gov/data/tables/time-series/demo/voting-and-registration/p20-585.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"raw_election = FileAttachment(\"voter-participation-2020-by-age@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`Reformat the data, parse numbers, rename fields.\n\nThe fields:\n* \\`state\\`: Name of the state, all caps.\n* \\`age\\`: Age range, or \"Total\"\n* \\`population\\`: Total population\n* \\`citizens\\`: Citizen population\n* \\`registered\\`: Number of registered voters\n* \\`percentRegisteredTotal\\`: Percent of population registered\n* \\`marginRegisteredTotal\\`: Margin of error for \\`percentRegisteredTotal\\`\n* \\`percentRegisteredCitizens\\`: Percent of citizens registered\n* \\`marginRegisteredCitizens\\`: Margin of error for \\`percentRegisteredCitizens\\`\n* \\`voted\\`: Number of people voting\n* \\`percentVotedTotal\\`: Percent of population voting\n* \\`marginVotedTotal\\`: Margin of error for \\`percentVotedTotal\\`\n* \\`percentVotedCitizens\\`: Percent of citizens voting\n* \\`marginVotedCitizens\\`: Margin of error for \\`percentVotedCitizens\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"state_names = FileAttachment(\"state_names.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`### Map data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"null_color = '#bbbbbb'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"colorScale = d3.interpolateRgbBasis([\"#ff0000\", \"#ffff00\", \"#00ff00\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"us = {\n const url =\n \"https://gist.githubusercontent.com/jake-low/bd39a072eb4c0822d2c32473816e1c11/raw/5a3296a2049d6719d38b66d0b77c9359b81b8c4c/us-10m-unprojected.json\";\n const us = await d3.json(url);\n\n const state_fips_codes = await d3.tsv(\n \"https://gist.githubusercontent.com/jake-low/f9857e7b5c9a30000dc87cfaf9330ab5/raw/4471d6bbbfb098f27fae5dfc8d9b4ada10dc58e3/state_fips_table.tsv\"\n );\n\n const states = us.objects.states;\n\n states.geometries = states.geometries.map((state) => ({\n ...state,\n properties: {\n ...state.properties,\n name: state_fips_codes.find((row) => row.STATE === state.id).STATE_NAME\n }\n }));\n\n return us;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"maxRadius = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"maxCitizens = Object.keys(election).reduce((a, k) => {\n const citizens = election[k].byAge[ageGroup]?.citizens ?? 0;\n return k === 'US' ? a : a < citizens ? citizens : a;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"maxCitizensTotal = Object.keys(election).reduce((a, k) => {\n const citizens = election[k].byAge.Total?.citizens ?? 0;\n return k === 'US' ? a : a < citizens ? citizens : a;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"maxEC = Object.keys(state_representation).reduce((a, k) => {\n const ec = state_representation[k] + 2;\n return k === 'US' ? a : a < ec ? ec : a;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"radiusScale = {\n return d3\n .scaleSqrt()\n .domain([0, maxCitizens])\n .range([1, maxRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"radiusScaleTotal = {\n return d3\n .scaleSqrt()\n .domain([0, maxCitizensTotal])\n .range([1, maxRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"radiusScaleEC = {\n return d3\n .scaleSqrt()\n .domain([0, maxEC])\n .range([1, maxRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"Throw = (e) => {\n throw typeof e === \"string\" ? new Error(e) : e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"spreadStates = applySimulation((d) => d.properties.radius + nodePadding)(\n clone(states)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"spreadStatesTotal = applySimulation(\n d => d.properties.radiusTotal + nodePadding\n)(clone(states))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"spreadStatesEC = applySimulation(\n d =>\n Math.max(d.properties.radiusEC, d.properties.radiusTotal) + nodePadding + 3\n)(clone(states))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"range = (size_fn) => (nodes) =>\n nodes.reduce(\n (a, s) => ({\n xmin: Math.min(a.xmin, s.x - size_fn(s)),\n xmax: Math.max(a.xmax, s.x + size_fn(s)),\n ymin: Math.min(a.ymin, s.y - size_fn(s)),\n ymax: Math.max(a.ymax, s.y + size_fn(s))\n }),\n {\n xmin: Number.MAX_SAFE_INTEGER,\n xmax: Number.MIN_SAFE_INTEGER,\n ymin: Number.MAX_SAFE_INTEGER,\n ymax: Number.MIN_SAFE_INTEGER\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"clone = (obj) => obj.map((v) => ({ ...v }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"format = ({\n density: (x) => (x > 1000 ? d3.format(\".2s\")(x) : d3.format(\".3r\")(x)),\n percent: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"bubble_text_size = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"state_text_size = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`Offsets for the labels in the states so they are aesthetically and unconfusingly placed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"state_label_offsets = ({\n AK: { x: -30, y: -50 },\n AL: { x: 3, y: -5 },\n AR: { x: -10 },\n AZ: { x: 29, y: 2 },\n CA: { x: 10 },\n CO: { x: -6 },\n CT: { y: -2 },\n DC: { x: -5, y: 2 },\n DE: { x: 8, y: 5 },\n FL: { x: 28, y: -5 },\n HI: { x: 35, y: 23 },\n IA: { y: -2 },\n ID: { y: 30 },\n IL: { x: 3, y: -20 },\n IN: { x: 5, y: -15 },\n KS: { x: -6, y: -2 },\n KY: { x: 14 },\n LA: { x: -20, y: -20 },\n MA: { x: -3, y: -6 },\n MD: { y: -11 },\n ME: { y: -10 },\n MI: { x: 25, y: 45 },\n MN: { x: -10 },\n MO: { x: -2 },\n MS: { x: 7, y: 2 },\n MT: { x: 30, y: -15 },\n ND: { x: -10, y: -3 },\n NE: { x: -4, y: -3 },\n NH: { x: 3, y: 6 },\n NJ: { x: 7 },\n NM: { x: -10, y: -10 },\n NV: { y: -15 },\n NY: { y: -10 },\n OK: { x: 10 },\n OR: { y: 15 },\n SC: { x: 8 },\n SD: { x: -18, y: -8 },\n TX: { y: -20 },\n VT: { x: 2, y: -6 },\n WA: { x: 23, y: 3 },\n WI: { x: -2, y: 3 },\n WV: { x: -5, y: 10 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"state_representation = FileAttachment(\"state_representation@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## Appendix\nLibraries and utility funvtions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"nodePadding = forces.padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"mouseover = n =>\n n\n .append(\"title\")\n .text(d =>\n d.properties.votes.percentVotedTotal\n ? [\n d.properties.name,\n `${format.percent(\n d.properties.votes.percentVotedTotal / 100\n )} Population ${ageGroup} Voted`,\n `${format.percent(\n d.properties.votes.percentVotedCitizens / 100\n )} Citizens ${ageGroup} Voted`\n ].join(\"\\n\")\n : `${d.properties.name}\\n* Data not availble, for this group, see footnote`\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"textLabel = n =>\n n\n .append(\"text\")\n .attr(\"x\", d => d.x - 40)\n .attr(\"y\", d => d.y + 20)\n .text(d => d.abbreviation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"projection = d3\n .geoAlbersUsa()\n .fitSize([960, 600], topojson.feature(us, us.objects.states))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"import { form } from '@bobkerns/form-handler'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"