2b:null 2c:["$","title",null,{"children":"Week 4: Task Prompt | falakjalali | Observable"}] 31:T4a1,Here, you need to map the csv data, which you defined as "csv" previously. Upon mapping the csv, you will need to identify the attributes that you want to keep and, for the sake of making things easier for later coding, you will want to rename these attributes. Most importantly, since the csv data encoded the fips values as numeric values, you will need to convert these to string values and add a leading 0 when there is only one number. Finally, you need to make sure to convert all of the margin differences to positive values. Read through the code below, understand it, then paste it into a new JavaScript code block and run. ```js // Iterate through the csv values data_raw = csv.map( ({ // Identify the desired attributes state_fips, state_name, per_gop, per_dem, per_point_diff, total_votes }) => ({ // Give them more manageable names id: state_fips.toString().padStart(2, '0'), // Change to a two character string when only one digit is present name: state_name, gopv: per_gop, demv: per_dem, margin: Math.abs(per_point_diff), // Make sure to convert all to positive numbers totalv: total_votes }) ); ```32:Tff6,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,0.5], d3.schemeBlues[5]); // [0,0.5] sets the scale between 0 and 50% 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: "GOP 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: "DEM Margin →", width: 260, tickFormat: ".0%"})); // Create empty objects for holding data const nameS = {}; // State names const voteD = {}; // Percent support for Biden const voteR = {}; // Percent support for Trump const voteM = {}; // Percent favoring the state winner const voteT = {}; // Total votes const voteE = {}; // Electoral votes // Define the objects with the processed data from the csv (data_raw) data_raw1.forEach(d => (nameS[d.id] = d.name)); data_raw1.forEach(d => (voteD[d.id] = +d.demv)); data_raw1.forEach(d => (voteR[d.id] = +d.gopv)); data_raw1.forEach(d => (voteM[d.id] = +d.margin)); data_raw1.forEach(d => (voteT[d.id] = +d.totalv)); data_raw1.forEach(d => (voteE[d.id] = +d.electoralv)); // Append a group () element to the existing SVG svg.append("g") .selectAll("path") .data(topojson.feature(usTopo1, usTopo1.objects.states).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 support 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", "purple").raise() // Change boundaries to yellow .attr("stroke-width", 2); // 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 state... .each(function (d) { // Set the tooltip content as follows... tippy(this, { content: `${nameS[d.id]}` + '
Total Votes: ' + `${voteT[d.id]}`+ '
Trump: ' + `${Math.round(voteR[d.id] * 100)}` + '%
Biden: ' + `${Math.round(voteD[d.id] * 100)}` + '%' + '
Electoral Votes: ' + `${voteE[d.id]}`, allowHTML: true, theme: "light", }); }); // Append a new SVG path element to define the nation object svg.append("path") .datum(topojson.feature(usTopo1, usTopo1.objects.nation)) // Convert into GeoJSON format .attr("fill", "none") // Leave the fill empty .attr("stroke", "grey") // 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) return svg.node(); }33:Tfdf,county_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) county_data_raw.forEach(d => (nameC[d.id] = d.name)); county_data_raw.forEach(d => (voteD[d.id] = +d.demv)); county_data_raw.forEach(d => (voteR[d.id] = +d.gopv)); county_data_raw.forEach(d => (voteM[d.id] = +d.margin)); county_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(usTopo1, usTopo1.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] ? countyColorDEM(voteM[d.id]) : countyColorGOP(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(); }34:[{"id":"e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","href":"https://static.observableusercontent.com/files/e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","name":"counties-10m.json","type":"application/json","lastModified":1712640029095.868,"size":842143},{"id":"451ea1b1c34249628bb4f0292754a8d153626dcdb1b7f7f9910152fd6f4a920422ec2bc5dcf21fa9c95a7f10c1cd17a5c4f1943a2d5f845bee3c939c7e171e96","href":"https://static.observableusercontent.com/files/451ea1b1c34249628bb4f0292754a8d153626dcdb1b7f7f9910152fd6f4a920422ec2bc5dcf21fa9c95a7f10c1cd17a5c4f1943a2d5f845bee3c939c7e171e96","name":"counties-2020-election.csv","type":"text/csv","lastModified":1712640029095.868,"size":278120},{"id":"36a919bc719ef962decedf53ab3757ef0142e523581f830b0e6b059ec173e4507d35f5b759d7db208c4ecebd30c78b4d7143a29221dd53b034398cce10cba046","href":"https://static.observableusercontent.com/files/36a919bc719ef962decedf53ab3757ef0142e523581f830b0e6b059ec173e4507d35f5b759d7db208c4ecebd30c78b4d7143a29221dd53b034398cce10cba046","name":"state-data-2020.csv","type":"text/csv","lastModified":1712640029095.868,"size":4350}] 2f:{"id":"8d28aac90c8a2e56","slug":null,"title":"Week 4: Task Prompt","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-04-09T05:20:29.095Z","update_time":"$D2024-04-09T06:21:46.946Z","view_time":null,"first_public_time":"$D2024-04-09T06:22:30.078Z","has_unpublished_edits":null,"fork":{"id":"dabf32cf628cea4e","slug":null,"title":"Week 4: Task Prompt","owner":{"id":"5f9b9f6b044aa68d","login":"studiodvm","name":"Studio Data Vis & Mapping"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7bc7ae4529df01f8","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":"starter_2024","bio":""},"version":289,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":null,"bio":""}],"members":[{"type":"team","id":"7bc7ae4529df01f8","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":"starter_2024","role":"editor"},{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 4: Task Prompt","cells":[{"id":0,"value":"# Week 4: Task Prompt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## In-Class Activity: Build a State Election Choropleth Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Step 1: Insert CSV Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"Using the notebook file attachments to the right, click the \"insert into notebook\" icon next to \"state-data-2020.csv\" to bring in the spreadsheet data. Make sure to define this as \"csv.\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"csv = await FileAttachment(\"state-data-2020.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"csv","database":"$undefined"},{"id":236,"value":"countiesCsv = await FileAttachment(\"counties-2020-election.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"countiesCsv","database":"$undefined"},{"id":266,"value":"csv1=FileAttachment(\"state-data-2020.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"countiescsv1=FileAttachment(\"counties-2020-election.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"### Step 2: Insert the TopoJSON Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"Using the same process described above for inserting and renaming the csv data, do the same for the counties-10m.json file and redefine as \"usTopo.\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"usTopo1=FileAttachment(\"counties-10m.json\").json()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"features1=new Map(topojson.feature(usTopo1,usTopo1.objects.counties).features.map(d => [d.id, {...d, position: d3.geoCentroid(d.geometry)}]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"usTopo = FileAttachment(\"counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### Step 3: Import the Necessary JavaScript Libraries for Building the Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"Using JavaScript code blocks below, you will want to add the following libraries: d3, topojson, tippy, and legend. D3 is for interactive data visualization, topojson is for processing topojson data, tippy is for building tooltips, and legend is for making a legend for the map. To do this, you will want to use \"import\" in JavaScript and define them in the following ways:\n\nd3:\n```js\nd3 = require(\"d3@6\")\n```\ntopojson:\n```js\ntopojson = require(\"topojson-client@3\")\n```\ntippy:\n```js\ntippy = require('tippy.js@6')\n```\nlegend:\n```js\nimport {legend} from \"@d3/color-legend\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"tippy = require('tippy.js@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### Step 4: Set the Projection and Path","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"Again, using JavaScript code blocks, you will need to define the map projection (Albers USA) and the path constants to make sure your topojson geometries are passed to the map using the desired projection.\n\nProjection can be defined as follows where scale is set at 1300 and the center is [487.5, 305]. You can change some of these values later to see their effect on the map.\n```js\nprojection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])\n```\n\nPath should then be defined as shown below:\n```js\npath = d3.geoPath().projection(projection)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"### Step 5: Set the Color Scale for the Vote Margins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"Now, set the color scales for the percentage points in favor of either the Democrat or the Republican candidate. Since very few states have margins of victory that are larger than 50 points, you can set the ranges from 0 to 0.5 for a more effective color scale.\n\nFor the Democrats, you can call the scale \"colorDEM\", [0,0.5] are the minimum and maximum values of the scale, and [5] is used to set the number of hues at 5:\n```js\ncolorDEM = d3.scaleQuantile([0,0.5], d3.schemeBlues[5])\n```\nFor the Republicans, you can call the scale \"colorGOP\" using a red scheme as shown below:\n```js\ncolorGOP = d3.scaleQuantile([0,0.5], d3.schemeReds[5])\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"colorDEM = d3.scaleQuantile([0,0.5], d3.schemeBlues[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"colorGOP = d3.scaleQuantile([0,0.5], d3.schemeReds[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"countyColorDEM = d3.scaleQuantile([0,1], d3.schemeBlues[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"countyColorGOP = d3.scaleQuantile([0,1], d3.schemeReds[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"### Step 6: Retrieve the Desired CSV Data and Rename Attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"data_raw1 = csv1.map(\n ({ \n // Identify the desired attributes \n state_fips,\n state_name,\n per_gop, \n per_dem, \n per_point_diff, \n total_votes,\n electoral_votes\n }) => ({\n // Give them more manageable names\n id: state_fips.toString().padStart(2, '0'), // Change to a two character string when only one digit is present\n name: state_name,\n gopv: per_gop,\n demv: per_dem,\n margin: Math.abs(per_point_diff), // Make sure to convert all to positive numbers\n totalv: total_votes,\n electoralv: electoral_votes\n })\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"county_data_raw = countiesCsv.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 // Give them more manageable names\n id: county_fips.toString().padStart(5, '0'), // Change to a five character string when only four digits are present\n name: county_name + \", \" + state_name,\n gopv: per_gop,\n demv: per_dem,\n margin: Math.abs(per_point_diff), // Make sure to convert all to positive numbers\n totalv: total_votes\n })\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Step 7: Make the Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"If you have executed the JavaScript mentioned in the previous steps, the following code should build the interactive choropleth map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## In-Class Discussion and Tasks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"1. Consider the map and describe some of its shortcomings and some ways in which it could lead to erroneous conclusions.\n2. Edit the code to change the legend titles to \"GOP Margin\" or \"Dem Margin\" where appropriate.\n3. Can you edit the code to add each state's electoral college vote total to the tippy tooltip content?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## Assisted Task (Graded)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"### I will set this up in class with your input, allow you to edit the code with my help, and you may finish at home if needed. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"Use county election data in csv format and our topojson file package to replicate the process documented above to produce a county map of 2020 election result.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"## Assignment (Graded)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"### Answer the following:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"1. Read about the [Modifiable Areal Unit Problem (MAUP)](https://gisgeography.com/maup-modifiable-areal-unit-problem/). What is it and how might it inform election mapping?\n2. Consider the county map. What are its shortcomings and what wrong assumptions might be derived from it?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"//MAUP is a problem of bias. Depending on how you aggregate your data or at what scale you decide to represent the data can tell different stories. It can inform election mapping when we want to represent voting patterns. We can maipulate electoral boundaries to declare majority in favour of the chosen party. There are two ways to do this: Gerrymandering and Redistricting. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"//The short coming is that it isnt suitable for people who are colorblind. The gradation can be difficult to clearly interpret who has majority in the region. A wrong assumption can be about the number of people for the party. It does not clearly define the state boundary, which is the scale at which election results are declared.Looking at the county data one would think there is majority of red votes in all states. However, at the scale of the state the story is different with very close margin between the two parties.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Appendix: Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"counties10m = FileAttachment(\"counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"counties2020Election = await FileAttachment(\"counties-2020-election.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"counties2020Election","database":"$undefined"},{"id":102,"value":"stateData2020 = await FileAttachment(\"state-data-2020.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"stateData2020","database":"$undefined"},{"id":264,"value":"stateData20201 = await FileAttachment(\"state-data-2020.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"stateData20201","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"