25:null 26:["$","title",null,{"children":"Assignment 3 | fobkid20 | Observable"}] 2b:T715,chart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city); const overwidth = maxX - minX + margin.left + margin.right; const parent = d3.create("div"); parent.append("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("pointer-events", "none") .style("z-index", 1) .call(svg => svg.append("g").call(yAxis)); yield parent.node(); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const maxY = d3.max(total_by_city, d => d.total); let color = d3.scaleOrdinal(d3.schemeCategory10) color.domain(["Black","White", "Hispanic","Asian","Native American","Other"]); /* const color = (race) =>{ if (race == "Black") return "blue"; if (race == "White") return "pink"; if (race == "Hispanic") return "orange"; if (race == "Asian") return "green"; if (race == "Native American") return "purple"; if (race == "Other") return "red"; }*/ let svg = body.append("svg") .attr("width", overwidth) .attr("height", height) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .selectAll("g") .attr("class", "bars") .data(stackedData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d) => x(d.data.city)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .text(d => `${d.key}: ${d.data[d.key]}`); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }2c:T600,percentChart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city); const overwidth = maxX - minX + margin.left + margin.right; const parent = d3.create("div"); parent.append("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("pointer-events", "none") .style("z-index", 1) .call(svg => svg.append("g").call(percent_yAxis)); yield parent.node(); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const maxY = 100; let color = d3.scaleOrdinal(d3.schemeCategory10) color.domain(["Black","White", "Hispanic","Asian","Native American","Other"]); let svg = body.append("svg") .attr("width", overwidth) .attr("height", height) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .selectAll("g") .attr("class", "bars") .data(percent_stackedData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d) => x(d.data.city)) .attr("y", d => percent_y(d[1])) .attr("height", d => percent_y(d[0]) - percent_y(d[1])) .attr("width", x.bandwidth()) .append("title") .text(d => `${d.key}: ${d.data[d.key]}`); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }2d:Tb63,function armedFilter(v){ return armed === 'any' || armed === v.armed || (armed === 'armed' && (v.armed === 'gun' || v.armed === 'toy weapon' || v.armed === 'air conditioner' || v.armed === 'air pistol' || v.armed === 'Airsoft pistol' || v.armed === 'ax' || v.armed === 'barstool' || v.armed === 'baseball bat' || v.armed === 'baseball bat and bottle' || v.armed === 'baseball bat and fireplace poker' || v.armed === 'baseball bat and knife' || v.armed === 'baton' || v.armed === 'bayonet' || v.armed === 'BB gun' || v.armed === 'BB gun and vehicle' || v.armed === 'bean-bag gun' || v.armed === 'beer bottle' || v.armed === 'binoculars' || v.armed === 'blunt object' || v.armed === 'bottle' || v.armed === 'bow and arrow' || v.armed === 'box cutter' || v.armed === 'brick' || v.armed === 'car, knife and mace' || v.armed === 'carjack' || v.armed === 'chain' || v.armed === 'chain saw' || v.armed === 'chainsaw' || v.armed === 'chair' || v.armed === 'claimed to be armed' || v.armed === 'contractor\'s level' || v.armed === 'cordless drill' || v.armed === 'crossbow' || v.armed === 'crowbar' || v.armed === 'fireworks' || v.armed === 'flagpole' || v.armed === 'flashlight' || v.armed === 'garden tool' || v.armed === 'glass shard' || v.armed === 'grenade' || v.armed === 'gun and car' || v.armed === 'gun and knife' || v.armed === 'gun and machete' || v.armed === 'gun and sword' || v.armed === 'gun and vehicle' || v.armed === 'guns and explosives' || v.armed === 'hammer' || v.armed === 'hand torch' || v.armed === 'hatchet' || v.armed === 'hatchet and gun' || v.armed === 'ice pick' || v.armed === 'incendiary device' || v.armed === 'knife' || v.armed === 'lawn mower blade' || v.armed === 'machete' || v.armed === 'machete and gun' || v.armed === 'meat cleaver' || v.armed === 'metal hand tool' || v.armed === 'metal object' || v.armed === 'metal pipe' || v.armed === 'metal pole' || v.armed === 'metal rake' || v.armed === 'metal stick' || v.armed === 'microphone' || v.armed === 'motorcycle' || v.armed === 'nail gun' || v.armed === 'oar' || v.armed === 'pellet gun' || v.armed === 'pen' || v.armed === 'pepper spray' || v.armed === 'pick-axe' || v.armed === 'piece of wood' || v.armed === 'pipe' || v.armed === 'pitchfork' || v.armed === 'pole' || v.armed === 'pole and knife' || v.armed === 'railroad spikes' || v.armed === 'rock' || v.armed === 'samurai sword' || v.armed === 'scissors' || v.armed === 'screwdriver' || v.armed === 'sharp object' || v.armed === 'shovel' || v.armed === 'spear' || v.armed === 'stapler' || v.armed === 'straight edge razor' || v.armed === 'sword' || v.armed === 'Taser' || v.armed === 'tire iron' || v.armed === 'vehicle' || v.armed === 'vehicle and gun' || v.armed === 'vehicle and machete' || v.armed === 'walking stick' || v.armed === 'wasp spray' || v.armed === 'wrench')) || (armed === 'unknown' && (v.armed === 'undetermined' || v.armed === 'unknown weapon')); }2e:T577,// from nandorojo at https://gist.github.com/calebgrove/c285a9510948b633aa47 function stateAbbrToName(acronym) { const states = { AZ: 'Arizona', AL: 'Alabama', AK: 'Alaska', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DC: 'District of Columbia', DE: 'Delaware', FL: 'Florida', GA: 'Georgia', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MS: 'Mississippi', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PA: 'Pennsylvania', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming', AS: 'American Samoa', GU: 'Guam', MP: 'Northern Mariana Islands', PR: 'Puerto Rico', VI: 'U.S. Virgin Islands', UM: 'U.S. Minor Outlying Islands', } return states[acronym] ?? acronym }2f:T57c,ready = (svg) => { const path = d3.geoPath().projection(projection); // draw the states svg.selectAll("path") .data(topojson.feature(states, states.objects.usStates).features) .join("path") .attr("fill", d=> colorDiverge(state_totals[d.properties.STATE_ABBR].total)) .attr("class", "states") .attr("d", path) .on("click", (event, d) => { const value = d.properties.STATE_ABBR viewof state.value = value outline.attr("d", value ? path(d) : null); viewof state.dispatchEvent(new Event("input")); }) .append("title") .text((d) => stateAbbrToName(d.properties.STATE_ABBR) + ": " + state_totals[d.properties.STATE_ABBR].total + " victims") // draw the symbols on top /* svg.selectAll(".symbol") .data(centroid.features.sort((a, b) =>a.properties.population - b.properties.population)) .enter().append("path") .attr("class", "symbol") .attr("fill", "steelblue") .attr("d", path.pointRadius(function (d) { return 10 })) .append("title") .text(function (d, i) { return d.properties.name + "\nPopulation: " + d.properties.population ; }); */ const outline = svg.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none"); } 30:T603,viewof state = html``31:[{"id":"91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","href":"https://static.observableusercontent.com/files/91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","name":"fatal-police-shootings-data.csv","type":"text/csv","lastModified":1615594833000.147,"size":677118},{"id":"490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","href":"https://static.observableusercontent.com/files/490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","name":"states.json","type":"application/json","lastModified":1615594833000.147,"size":29516},{"id":"8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","href":"https://static.observableusercontent.com/files/8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","name":"us-state-centroids.json","type":"application/json","lastModified":1615594833000.147,"size":10591},{"id":"aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","href":"https://static.observableusercontent.com/files/aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","name":"cities_race_breakdown.csv","type":"text/csv","lastModified":1615600432909.779,"size":65827}] 29:{"id":"7da20be32965afcf","slug":"assignment-3/2","title":"Assignment 3","thumbnail":"90090b9e314a9e5845fbe9a1cbfd6b61723e51ef8e87faa42350c3f458662795","access_level":"public","create_time":"$D2021-03-13T00:20:33.000Z","update_time":"$D2021-03-13T01:57:17.133Z","view_time":null,"first_public_time":"$D2021-03-13T00:20:43.643Z","fork":{"id":"f4746d117b79f269","slug":"assignment-3","title":"Assignment 3","owner":{"id":"f7ebf7ad29187bbe","login":"hesslern","name":"Nicole Hessler"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fa74a8b2b329d6c1","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":"starter_2024"},"version":920,"publish_version":920,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6b65183c928336e","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":null}],"members":[{"type":"individual","id":"e6b65183c928336e","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Assignment 3","cells":[{"id":0,"value":"md`# Assignment 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`Use the dropdowns and map to filter the victims of police shootings shown in the stacked bar chart and percent stacked bar chart below. The cities are displayed along the x-axis. The color mapping is available through title text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"viewof gender = html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"viewof manner = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"viewof armed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"{ \n const node = DOM.svg(width, 600)\n const svg = d3.select(node)\n \n //const path = d3.geoPath().projection(projection);\n ready(svg);\n //recolor(svg, \"blue\");\n //popMap(svg);\n popSize(svg);\n \n svg\n \n // Finally, the block returns the SVG element, which is made\n // available via the d3 `node` function.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"// chart = {\n// const svg = d3.create(\"svg\")\n// .attr(\"viewBox\", [0, 0, width, height]);\n\n// svg.append(\"g\")\n// .attr(\"fill\", color)\n// .selectAll(\"rect\")\n// .data(total_by_city)\n// .join(\"rect\")\n// .attr(\"x\", (d, i) => x(i))\n// .attr(\"y\", d => y(d.total))\n// .attr(\"height\", d => y(0) - y(d.total))\n// .attr(\"width\", x.bandwidth());\n\n// svg.append(\"g\")\n// .call(xAxis);\n\n// svg.append(\"g\")\n// .call(yAxis);\n\n// return svg.node();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width},0)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = {\n const data = await FileAttachment(\"fatal-police-shootings-data.csv\").csv({typed: true});\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"filtered_data = { \n let victims = data;\n return victims.filter(genderFilter)\n .filter(raceFilter)\n .filter(mannerFilter)\n .filter(armedFilter)\n .filter(stateFilter);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"city_racial_data = {\n const city_racial_data = await FileAttachment(\"cities_race_breakdown.csv\").csv({typed: true});\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"function genderFilter(v){\n return gender === 'any' || gender === v.gender;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"function raceFilter(v){\n return race === 'any' || race === v.race;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"function mannerFilter(v){\n return manner === 'any' || manner === v.manner_of_death;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"function stateFilter(v){\n return state === 'any' || state === v.state;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"state_totals = {\n var counts = {};\n data.forEach((v) =>{\n if(!(v.state in counts)){counts[v.state] = {\"W\":0,\"B\":0,\"H\":0,\"A\":0,\"N\":0,\"O\":0,\"total\":0}}\n counts[v.state][v.race] = counts[v.state][v.race] + 1;\n if(!v.race){\n counts[v.state][\"O\"] = counts[v.state][\"O\"] + 1;\n }\n counts[v.state][\"total\"] = counts[v.state][\"total\"] + 1;\n });\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"city_totals = {\n var counts = {};\n filtered_data.forEach((v) =>{\n if(!(v.city in counts)){counts[v.city] = {\"W\":0,\"B\":0,\"H\":0,\"A\":0,\"N\":0,\"O\":0,\"total\":0}}\n counts[v.city][v.race] = counts[v.city][v.race] + 1;\n if(!v.race){\n counts[v.city][\"O\"] = counts[v.city][\"O\"] + 1;\n }\n counts[v.city][\"total\"] = counts[v.city][\"total\"] + 1;\n });\n return counts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"total_by_city = {\n let counts = [];\n for (const [key, value] of Object.entries(city_totals)) {\n counts.push({\n city: key,\n total: value[\"total\"],\n White: value[\"W\"],\n Black: value[\"B\"],\n Hispanic: value[\"H\"],\n Asian: value[\"A\"],\n \"Native American\": value[\"N\"],\n Other: value[\"O\"],\n });\n }\n return counts.sort((a, b) => b.total - a.total);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":456,"value":"percent_by_city = {\n let counts = [];\n for (const [key, value] of Object.entries(city_totals)) {\n counts.push({\n city: key,\n total: value[\"total\"],\n White: value[\"W\"] /value[\"total\"] * 100 ,\n Black: value[\"B\"] /value[\"total\"] * 100,\n Hispanic: value[\"H\"] /value[\"total\"] * 100,\n Asian: value[\"A\"] /value[\"total\"] * 100,\n \"Native American\": value[\"N\"] /value[\"total\"] * 100,\n Other: value[\"O\"] /value[\"total\"] * 100,\n });\n \n }\n return counts.sort((a, b) => b.total - a.total);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"subgroups = {return [\"Black\",\"White\",\"Hispanic\", \"Asian\", \"Native American\", \"Other\"]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"percent_stackedData = {return d3.stack().keys(subgroups)(percent_by_city).map(d => (d.forEach(v => v.key = d.key), d))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":" //stack the data? --> stack per subgroup\nstackedData = {return d3.stack().keys(subgroups)(total_by_city).map(d => (d.forEach(v => v.key = d.key), d))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"Object.keys(city_totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Object.values(city_totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"x = d3.scaleBand()\n .domain(total_by_city.map(d => d.city))\n .range([margin.left, width * (total_by_city.length / 10) - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(total_by_city, d => d.total)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"percent_y = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, filtered_data.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(filtered_data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"percent_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(percent_y).ticks(null, percent_stackedData.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(percent_stackedData.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"color = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"margin = ({top: 60, right: 0, bottom: 60, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"topojson = require('https://d3js.org/topojson.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"// load files async; store the values so we can use them later\nstates = await FileAttachment(\"states.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"centroid = await FileAttachment(\"us-state-centroids.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"projection = d3.geoAlbersUsa();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"getRandomColor = () => {\n var letters = '0123456789ABCDEF';\n var color = '#';\n for (var i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":797,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"getPop = (state) => {\n return centroid.features.find((feature)=>feature.properties.name === state).properties.population\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"colorDiverge = d3.scaleLinear()\n .domain([d3.min(Object.values(state_totals), s => s.total),\n d3.median(Object.values(state_totals), s => s.total),\n d3.max(Object.values(state_totals), s => s.total)])\n .range([\"rgb(255,200,200)\", interpolator(0.5), \"#8a0303\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":890,"value":"interpolator = d3.interpolate(\"rgb(255,200,200)\",\"#8a0303\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":478,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"popSize = (svg) => {\n const path = d3.geoPath().projection(projection);\n let size = d3.scaleSqrt()\n .domain([d3.min(centroid.features, d => d.properties.population),\n d3.max(centroid.features, d => d.properties.population)])\n .range([5, 20])\n\n svg.selectAll(\".symbol\")\n .data(centroid.features, (d) => d.properties.population)\n .attr(\"d\", path.pointRadius((p) => size(p.properties.population)))\n } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"popMap = (svg) => {\n let colorDiverge = d3.scaleLinear()\n .domain([d3.min(centroid.features, d => d.properties.population),\n d3.median(centroid.features, d => d.properties.population),\n d3.max(centroid.features, d => d.properties.population)])\n .range([\"green\", \"white\", \"blue\"])\n\n svg.selectAll(\".symbol\")\n .data(centroid.features, (d) => d.properties.population)\n .attr(\"fill\",(p)=>colorDiverge(p.properties.population))\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":" reset = (svg, color) => {\n svg.selectAll(\".symbol\")\n .attr(\"fill\", color)\n //.attr(\"d\", ()=>{return path.pointRadius(5)})\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"recolor = (svg, color) => {\n // grab the symbol objects and modify their color \n // notice we don't need \"enter\" or \"append\" the objects are already there\n svg.selectAll(\".symbol\")\n .attr(\"fill\", color);\n }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof race = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2a:"$29:body"