2b:null 2c:["$","title",null,{"children":"2020 Federal Elections by County | JEB's Workspace | Observable"}] 31:Tfa7,chart = { // This code uses the D3.js library to create an SVG (Scalable Vector Graphics) element and set its viewBox attribute. const svg = d3.create("svg") // The parameters of the viewbox are a min-x of 0, a min-y of -30, a width of 975, and a height of 660 .attr("viewBox", [0, -30, 975, 660]); // Define the color scales for the legends const color = d3.scaleQuantile(d3.schemeReds[5]); const color2 = d3.scaleQuantile([0,1], d3.schemeBlues[5]); // [0,1] sets the scale between 0 and 100% victory margins // Append a group () element to the existing SVG svg.append("g") // 610 units to the right and 10 units down .attr("transform", "translate(610,10)") // Create a legend with the red color scale, add a title, and set the width .append(() => legend({color, title: "Trump Margin →", width: 260})); svg.append("g") // 610 units to the right and 40 units down .attr("transform", "translate(610,40)") // Create a legend with the blue color scale, add a title, set the width, and use percentages .append(() => legend({color: color2, title: "Biden Margin →", width: 260, tickFormat: ".0%"})); // Create empty objects for holding data const nameC = {}; // County names const voteD = {}; // Percent support for Biden const voteR = {}; // Percent support for Trump const voteM = {}; // Percent favoring the county winner const voteT = {}; // Total votes // Define the objects with the processed data from the csv (data_raw) data_raw.forEach(d => (nameC[d.id] = d.name)); data_raw.forEach(d => (voteD[d.id] = +d.demv)); data_raw.forEach(d => (voteR[d.id] = +d.gopv)); data_raw.forEach(d => (voteM[d.id] = +d.margin)); data_raw.forEach(d => (voteT[d.id] = +d.totalv)); // Append a group () element to the existing SVG svg.append("g") .selectAll("path") .data(topojson.feature(usTopo, usTopo.objects.counties).features) .join("path") .attr("stroke", "white") // Set the color of the boundaries to white .attr("stroke-linejoin", "round") // Round the vertices .attr("stroke-width", 0.5) // Set the width of the boundaries to 0.5 // This function asks if the dem suppor is higher than gop. If so, provide the colorDEM scheme using the margin as the parameter // If not, use the colorGOP scheme with the margin as the parameter (This is why all margin values can be positive) .attr("fill", d => voteD[d.id] > voteR[d.id] ? colorDEM(voteM[d.id]) : colorGOP(voteM[d.id])) .attr("d", path) // Define hover effects .on("mouseover", function() { d3.select(this) .attr("stroke", "yellow").raise() // Change boundaries to yellow .attr("stroke-width", 1.0); // Widen the boundaries }) .on("mouseout", function() { d3.select(this) .attr("stroke", "white").lower() // Change boundaries back to white .attr("stroke-width", 0.5); // Change the width back to 0.5 }) // For each county... .each(function (d) { // Set the tooltip content as follows... tippy(this, { content: `${nameC[d.id] + '
Total Votes: ' + `${voteT[d.id]}`+ '
Trump: ' + `${Math.round(voteR[d.id] * 100)}` + '%
Biden: ' + `${Math.round(voteD[d.id] * 100)}` + '%'}`, allowHTML: true, theme: "light", }); }); svg.append("path") .datum(topojson.feature(usTopo, usTopo.objects.nation)) .attr("fill", "none") //#e0e0e0 .attr("stroke", "gray") .attr("fill-opacity", .25) .attr("stroke-linejoin", "round") .attr("stroke-width", 0.75) .attr("d", path); svg.append("path") .datum(topojson.mesh(usTopo, usTopo.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("fill-opacity", 1) .attr("stroke-linejoin", "round") .attr("stroke-width", 0.75) .attr("d", path); return svg.node(); }32:T123c,cartoMap = { // This code uses the D3.js library to create an SVG (Scalable Vector Graphics) element and set its viewBox attribute. const svg = d3.create("svg") // The parameters of the viewbox are a min-x of 0, a min-y of -30, a width of 975, and a height of 660 .attr("viewBox", [0, -30, 975, 660]); // Define the color scales for the legends const color = d3.scaleQuantile( d3.schemeReds[5]); const color2 = d3.scaleQuantile([0,1], d3.schemeBlues[5]); // [0,1] sets the scale between 0 and 100% victory margins // Define a scale for mapping totalv values to radius values const radiusScale = d3.scaleLinear() .domain([d3.min(data_raw, d => d.totalv), d3.max(data_raw, d => d.totalv)]) .range([2, 50]); // Adjust the range of radius values as needed svg.append("g") // 610 units to the right and 10 units down .attr("transform", "translate(610,10)") // Create a legend with the red color scale, add a title, and set the width .append(() => legend({color, title: "Trump Margin →", width: 260})); svg.append("g") // 610 units to the right and 40 units down .attr("transform", "translate(610,40)") // Create a legend with the blue color scale, add a title, and set the width .append(() => legend({color: color2, title: "Biden Margin →", width: 260, tickFormat: ".0%"})) .text; // Append a new SVG path element to define the nation object svg.append("path") .datum(topojson.feature(usTopo, usTopo.objects.nation)) // Convert into GeoJSON format .attr("fill", "none") // Leave the fill empty .attr("stroke", "gray") // Make the border gray .attr("stroke-linejoin", "round") // Round the vertices .attr("stroke-width", 0.75) // Set the border width .attr("d", path); // Set the d attribute of the path, containing the path data (commands and coordinates) // Append a new SVG path element to define the states object svg.append("path") .datum(topojson.feature(usTopo, usTopo.objects.states)) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.75) .attr("d", path); // Filter out data points with null coordinates const validData = data_raw.filter(d => d.position && d.position.length === 2 && projection(d.position) !== null); // Create a force simulation const simulation = d3.forceSimulation(validData) .force("x", d3.forceX(d => projection(d.position)[0]).strength(0.1)) .force("y", d3.forceY(d => projection(d.position)[1]).strength(0.1)) .force("collide", d3.forceCollide(d => radiusScale(d.totalv) + 1)) // Add a buffer to avoid tight packing .stop(); // Stop the simulation to manually set initial positions // Manually set initial positions in a circular arrangement const radius = 200; const center = [500, 300]; // Adjust the center based on your visualization const angleIncrement = (2 * Math.PI) / validData.length; validData.forEach((d, i) => { const angle = i * angleIncrement; d.x = center[0] + radius * Math.cos(angle); d.y = center[1] + radius * Math.sin(angle); }); // Run the simulation for a few ticks to resolve collisions and finalize positions for (let i = 0; i < 300; ++i) simulation.tick(); // Create circles based on the simulation const circles = svg.selectAll("circle") .data(validData) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => radiusScale(d.totalv)) .attr("stroke", "gray") .attr("stroke-width", 0.5) .attr("fill-opacity", 0.75) .style("fill", d => d.demv > d.gopv ? colorDEM(d.margin) : colorGOP(d.margin)) // Define hover effects .on("mouseover", function() { d3.select(this) .attr("stroke", "yellow") // Change boundaries to yellow .attr("stroke-width", 1.0) // Widen the boundaries .attr("fill-opacity", 0.95); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "gray") // Change boundaries back to white .attr("stroke-width", 0.5) // Change the width back to 0.5 .attr("fill-opacity", 0.75); }) // For each county... .each(function (d) { // Set the tooltip content as follows... tippy(this, { content: `${d.name}` + '
Total Votes: ' + `${d.totalv}` + '
Trump: ' + `${Math.round(d.gopv * 100)}` + '%
Biden: ' + `${Math.round(d.demv * 100)}` + '%', allowHTML: true, theme: "light", }); }); return svg.node(); }33:[{"id":"451ea1b1c34249628bb4f0292754a8d153626dcdb1b7f7f9910152fd6f4a920422ec2bc5dcf21fa9c95a7f10c1cd17a5c4f1943a2d5f845bee3c939c7e171e96","href":"https://static.observableusercontent.com/files/451ea1b1c34249628bb4f0292754a8d153626dcdb1b7f7f9910152fd6f4a920422ec2bc5dcf21fa9c95a7f10c1cd17a5c4f1943a2d5f845bee3c939c7e171e96","name":"counties-2020-election@3.csv","type":"text/csv","lastModified":1706659672039.03,"size":278120},{"id":"5d83b18325a86d7af69ce78ee29691839ff8808b133ae4eadea8592a36c188d1372c6f21de8e0a636946e2965ffc03356d5fe484b278f71b82ed4fd224e74ac0","href":"https://static.observableusercontent.com/files/5d83b18325a86d7af69ce78ee29691839ff8808b133ae4eadea8592a36c188d1372c6f21de8e0a636946e2965ffc03356d5fe484b278f71b82ed4fd224e74ac0","name":"counties-10m@2.json","type":"application/json","lastModified":1706069694380.738,"size":3095409}] 2f:{"id":"a44a721984fe3871","slug":null,"title":"2020 Federal Elections by County","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-01-16T20:55:43.802Z","update_time":"$D2024-02-01T15:53:02.500Z","view_time":null,"first_public_time":"$D2024-02-01T17:14:37.829Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"de47faddfbc74b53","login":"jeb2-ws","name":"JEB's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e3b3f6f8c2f3604921c8602260163dfae8e185cd053ff69659f189cf1573222a","tier":"starter_2024"},"version":745,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4694d658d2e4f1c7","login":"jeb2","name":"JEB","avatar_url":"https://avatars-next.observableusercontent.com/62d68a0219349ddadeba5bde2a3f994dbae6f9aa8588f1c9c22bacd2cedbb0eb","tier":null}],"members":[{"type":"individual","id":"4694d658d2e4f1c7","login":"jeb2","name":"JEB","avatar_url":"https://avatars-next.observableusercontent.com/62d68a0219349ddadeba5bde2a3f994dbae6f9aa8588f1c9c22bacd2cedbb0eb","tier":null,"role":"editor"},{"type":"team","id":"de47faddfbc74b53","login":"jeb2-ws","name":"JEB's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e3b3f6f8c2f3604921c8602260163dfae8e185cd053ff69659f189cf1573222a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"7783c78af2cae78f","reply_to_id":null,"content":"vUQtLbd4WxhPZUSc6_FT","create_time":"$D2024-01-24T19:43:44.166Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4694d658d2e4f1c7","login":"jeb2","name":"JEB","avatar_url":"https://avatars-next.observableusercontent.com/62d68a0219349ddadeba5bde2a3f994dbae6f9aa8588f1c9c22bacd2cedbb0eb","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2020 Federal Elections by County","cells":[{"id":0,"value":"# 2020 Federal Elections by County","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"While the state map of election results does make an affordance for differences in the margins of victory for both candidates, it glosses over the local variations in candidate support within each state. This tends to present an image of US politics where entire states are dominated by the positions of one party - a geography of red states versus blue states. Building from the attempt to lessen this impression with a color scale, it is possible to go a step farther by mapping election results by county. This map aims to tease out the local complexity of candidate support across the United States.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"## Attach Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":584,"value":"Again, you need to attach some data in the form of a csv file of vote returns for Biden and Trump. This time, the csv data will be for each county in the United States. Since the topojson file already includes county geometries, you can attach that same file again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"### CSV","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"csv = await FileAttachment(\"counties-2020-election@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"csv","database":"$undefined"},{"id":590,"value":"### Topojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"usTopo = FileAttachment(\"counties-10m@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"features = new Map(topojson.feature(usTopo,usTopo.objects.counties).features.map(d => [d.id, {...d, position: d3.geoCentroid(d.geometry)}]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"## Add JavaScript Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"Once again, you will add D3, Topojson, Legend, and Tippy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"### D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"For interactive data visualizations...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"### Topojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"For processing your topojson data and adding it to the map...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"For building the color scale legends...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"### Tippy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"For adding tooltip content...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":603,"value":"tippy = require('tippy.js@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"## Set Projection and Path","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"Again, you will use Albers USA.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"path = d3.geoPath().projection(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"## Set Color Scale for Vote Margins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"Again, set the color scales for the percentage points in favor of either Biden or Trump. This time, since quite a few counties have margins of victory that are larger than 50 points, you can set the ranges from 0 to 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"colorDEM = d3.scaleQuantile([0,1], d3.schemeBlues[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"colorGOP = d3.scaleQuantile([0,1], d3.schemeReds[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"## Retrieve the Desired CSV Data and Rename Attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"Once again, you will process the tabular data to filter the data needed for the map and to rename the attributes to something easier to type. This time, be sure that you are using county-specific variables (county_fips, county_name) and that you change the county_fips variable to a five character string when only four digits are present.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"// Iterate through the csv values and add \"position\" property based on feature ID\ndata_raw = csv.map(\n ({ \n // Identify the desired attributes\n county_fips, \n county_name, \n state_name, \n per_gop, \n per_dem, \n per_point_diff, \n total_votes \n }) => {\n const id = county_fips.toString().padStart(5, '0');\n const feature = features.get(id);\n if (feature) {\n return {\n id,\n name: county_name + ', ' + state_name,\n gopv: per_gop,\n demv: per_dem,\n margin: Math.abs(per_point_diff),\n totalv: total_votes,\n position: feature.position // Add the \"position\" property from the features Map\n };\n } else {\n return null; // Handle cases where there is no corresponding feature in the TopoJSON\n }\n }\n).filter(item => item !== null); // Filter out null values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"map url: https://observablehq.com/embed/a44a721984fe3871@549?cells=chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"embed code: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"# Cartograms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"## Dorling Cartogram with Proportional Circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"map url: https://observablehq.com/embed/a44a721984fe3871@464?cells=cartogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"embed code: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"