45:["$","title",null,{"children":"Fatal Police Shooting Choropleth | yuchens1 | Observable"}] 4d:T669,megaSvg = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 8; const overwidth = maxX - minX + margin.left + margin.right; const path = d3.geoPath().projection(projection); const mega = d3.create("div"); mega.append("svg") .attr("width", width/2) .attr("height", height) .style("position", "absolute") .style("z-index", 1) .call(svg => svg.append("g").call(whiteSquare)) .call(svg => ready(svg)); const parent = mega.append("svg") .attr("transform", `translate(${width/ 2},0)`) .attr("width", width/2) .attr("height", height) .style("position", "absolute") .style("pointer-events", "none") .style("display", "block") .style("z-index", 1) .call(svg => svg.append("g").call(yAxis)) .call(svg => svg.append("g").call(leg)) //yield parent.node(); const body = mega.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); let svg = body.append("svg") .attr("transform", `translate(${width/ 2},0)`) .attr("width", overwidth) .attr("height", height/1.5) .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()) yield mega.node(); }4e: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')); }4f:T5c9,percent_demographics_by_city = { let counts = []; for (const [key, value] of Object.entries(city_totals)) { for (const [key2, value2] of Object.entries(city_racial_data)) { if (key == value2["City"] && value["state"]==value2["State"]){ counts.push({ city: key, total: value["total"], White: value2["White"] * 100 , Black: value2["Black"] * 100, Hispanic: value2["Hispanic"] * 100, Asian: value2["Asian"] * 100, "Native American": value2["Native American"] * 100, state: value["state"], stateOrCity: "city" // Other: value2["O"]* 100, }); } } // if the city was unmatched, substitute with state level data if (!(counts.find((element) => {return (element.city === key) && (element.state === value.state)}))){ const s = state_racial_data.find((element)=>{return (element.State === value.state)}) counts.push({ city: key, total: value["total"], White: s["White"] * 100 , Black: s["Black"] * 100, Hispanic: 0, Asian: (s["Asian"] + s["Islander"])* 100, "Native American": s["Native American"] * 100, state: value["state"], stateOrCity: "state", Other: (s["Other"] + s["Multiple"] ) * 100, }); } } return counts.sort((a, b) => b.total - a.total); }50: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 }51:T857,ready = (svg) => { const path = d3.geoPath().projection(projection); svg.append("g") .attr("transform", `translate(${(width/2 - 200) / 2},${330})`) .append(() => legend({ color: legend_scale, title: "Shooting Count", width: 250})); svg.append("text") .attr("font-family", "sans-serif") .attr("x", width/4) .attr("y", 30) .style("fill", "black") .text("Fatal Police Shootings by State From 2015-2019") .attr("text-anchor", "middle") .style("alignment-baseline", "middle") // draw the states svg.selectAll("path") .data(topojson.feature(states, states.objects.usStates).features) .join("path") .attr("fill", d=> { if (state_totals[d.properties.STATE_ABBR]){ return legend_scale(state_totals[d.properties.STATE_ABBR].total) }else{ return "lightGray" }}) .attr("class", "states") .attr("transform", "translate(0,60)") .attr("d", path) .on("click", (event, d) => { let value = d.properties.STATE_ABBR if (viewof state.value === value){ viewof state.value = "any" outline.attr("d", null); //update when you click it viewof state.dispatchEvent(new Event("input")); }else{ viewof state.value = value outline.attr("d", value ? path(d) : null); //update when you click it viewof state.dispatchEvent(new Event("input")); } }) .append("title") .text((d) => { if (state_totals[d.properties.STATE_ABBR]){ return stateAbbrToName(d.properties.STATE_ABBR) + ": " + state_totals[d.properties.STATE_ABBR].total + " victims" }else{ return stateAbbrToName(d.properties.STATE_ABBR) + ": " + 0 + " victims" }}) const outline = svg.append("path") .attr("fill", "none") .attr("transform", "translate(0,60)") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path(getPath(viewof state.value))); //update when you rerender due to another filter }52:T603,viewof state = html``53:[{"id":"8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","href":"https://static.observableusercontent.com/files/8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","name":"us-state-centroids.json","type":"application/json","lastModified":1622581939917.398,"size":10591},{"id":"490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","href":"https://static.observableusercontent.com/files/490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","name":"states.json","type":"application/json","lastModified":1622581939917.398,"size":29516},{"id":"8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","href":"https://static.observableusercontent.com/files/8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","name":"state_racial_data.csv","type":"text/csv","lastModified":1622581939917.398,"size":2766},{"id":"aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","href":"https://static.observableusercontent.com/files/aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","name":"cities_race_breakdown.csv","type":"text/csv","lastModified":1622581939917.398,"size":65827},{"id":"b94de5134eef88de2a226578cb292a279617cd0140c6cd066c664838c11f59f2822a0527e02070afc6548386f01f160c9e1d7fd7031e8ab496dcf9593aa66eab","href":"https://static.observableusercontent.com/files/b94de5134eef88de2a226578cb292a279617cd0140c6cd066c664838c11f59f2822a0527e02070afc6548386f01f160c9e1d7fd7031e8ab496dcf9593aa66eab","name":"fatal-police-shootings-data@1.csv","type":"text/csv","lastModified":1622582427947.656,"size":120391},{"id":"c41745cc7b35b49ac329cf33ff6d7e19ea6439efa720c38dff39045915eb2a65975d0e8af33b4a7ec2d045aabbee212ac9579e33fab42ad70e16c50db39fac4d","href":"https://static.observableusercontent.com/files/c41745cc7b35b49ac329cf33ff6d7e19ea6439efa720c38dff39045915eb2a65975d0e8af33b4a7ec2d045aabbee212ac9579e33fab42ad70e16c50db39fac4d","name":"fatal-police-shootings-data@2.csv","type":"text/csv","lastModified":1622869229352.54,"size":498287}] 49:{"id":"5196d62c3f805297","slug":"fatal-police-shooting-choropleth","title":"Fatal Police Shooting Choropleth","thumbnail":"fe84f22584edf79841cf896cf5f06f301641ead663b92bd210aa7aa6edabbc9f","access_level":"public","create_time":"$D2021-06-01T21:12:19.917Z","update_time":"$D2021-06-06T02:06:21.557Z","view_time":null,"first_public_time":"$D2021-06-01T21:31:52.599Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"87ca0046cf58a127","login":"yuchens1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6221fa95282004679ab5e82301444021d1138ed8ffbf2c4f02e5d1e703bdd97a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1760,"publish_version":1760,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7cb304983e2341a","login":"yuchens1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6221fa95282004679ab5e82301444021d1138ed8ffbf2c4f02e5d1e703bdd97a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d7cb304983e2341a","login":"yuchens1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6221fa95282004679ab5e82301444021d1138ed8ffbf2c4f02e5d1e703bdd97a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fatal Police Shooting Choropleth","cells":[{"id":0,"value":"md`# Fatal Police Shooting Choropleth`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"viewof form = {\n const form = html``;\n form.oninput = () => form.value = [\n form.gender.value, \n form.manner.value, \n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"leg = g => g\n .call(g => g.selectAll(\"mydots\")\n .data(races)\n .join(\"circle\")\n .attr(\"transform\", `translate(10, 10)`)\n .attr(\"cx\", (d,i)=> i < 3 ? i*170 : (i-3) * 170)\n .attr(\"cy\", (d,i)=> i < 3 ?0:20)\n .attr(\"r\", 7)\n .style(\"fill\", d=> color(d)))\n \n .call(g => g.selectAll(\"mylabels\")\n .data(races)\n .join(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"transform\", `translate(10, 10)`)\n .attr(\"x\", (d,i)=> i < 3 ? 20 + i*170 : 20 + (i-3) * 170)\n .attr(\"y\", (d,i)=> i < 3 ?0:20)\n .style(\"fill\", d=> color(d))\n .text(d =>d)\n .attr(\"text-anchor\", \"left\")\n .style(\"alignment-baseline\", \"middle\"))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"armed = \"any\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"manner=form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"gender = form[0]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"races = [\"Black\",\"White\", \"Hispanic\",\"Asian\",\"Native American\",\"Other\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n const data = await FileAttachment(\"fatal-police-shootings-data@2.csv\").csv({typed: true});\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"city_racial_data = {\n const city_racial_data = await FileAttachment(\"cities_race_breakdown.csv\").csv({typed: true});\n return city_racial_data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"function stateFilter(v){\n return state === 'any' || state === v.state;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"state_totals = {\n var counts = {};\n const state_filtered_data = data.filter(genderFilter)\n .filter(raceFilter)\n .filter(mannerFilter)\n .filter(armedFilter)\n state_filtered_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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"city_totals = {\n var counts = {};\n filtered_data.forEach((v) =>{\n if((!(v.city in counts)) || (counts[v.city][\"state\"] != v.state)){\n counts[v.city] = {\"W\":0,\"B\":0,\"H\":0,\"A\":0,\"N\":0,\"O\":0,\"total\":0, \"state\":v.state}\n }\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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 if (counts.length === 0){\n return [{\n city: \"\",\n total: 0,\n White: 0,\n Black: 0,\n Hispanic: 0,\n Asian: 0,\n \"Native American\": 0,\n state: \"\",\n stateOrCity: \"state\",\n Other: 0,\n }]\n }\n return counts.sort((a, b) => b.total - a.total);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"state_racial_data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"state_racial_data = {\n const state_racial_data = await FileAttachment(\"state_racial_data.csv\").csv({typed: true});\n return state_racial_data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"subgroups = {return [\"Black\",\"White\",\"Hispanic\", \"Asian\", \"Native American\", \"Other\"]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":" //stack the data? --> stack per subgroup\nstackedData = {\n return d3.stack().keys(subgroups)(total_by_city).map(d => (d.forEach(v => v.key = d.key), d))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"percent_stacked_demographicsData = {return d3.stack().keys(subgroups)(percent_demographics_by_city).map(d => (d.forEach(v => v.key = d.key), d))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Object.keys(city_totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"Object.values(city_totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(total_by_city, d => d.total)]).nice()\n .range([height/2 - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"percent_y = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height/2 - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height/2 - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"percent_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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"percent_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},${height/2})`)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"whiteSquare = g => g\n .call(g => g.append(\"rect\")\n .attr(\"width\", width/2)\n .attr(\"height\", height)\n .attr(\"fill\", \"white\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"color = d3.scaleOrdinal(d3.schemeCategory10).domain(races);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"margin = ({top: 60, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"topojson = require('https://d3js.org/topojson.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"topojson.feature(states, states.objects.usStates)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"centroid = await FileAttachment(\"us-state-centroids.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"projection = d3.geoAlbersUsa().fitSize([width/2, height/2], topojson.feature(states, states.objects.usStates));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"getPath = (state) =>{\n if (state === \"any\") return null\n \n return topojson.feature(states, states.objects.usStates).features\n .find((feature)=>feature.properties.STATE_ABBR === state)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"legend_scale = d3.scaleSequentialSqrt([d3.min(Object.values(state_totals), s => s.total), d3.max(Object.values(state_totals), s => s.total)], d3.interpolateReds);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof race = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"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":1319,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"logTail = n => log.slice(-n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"logTail(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 44:null