32:Tf15,{ map.selectAll("svg > *").remove(); map .append("g") .attr( "transform", `translate(${dimensions.marginLeft}, ${dimensions.marginTop})` ) .selectAll("path") .data(mapWards.features) .enter() .append("path") .attr("d", path) .attr("fill", d => chloropleth( dataRaceProportionPerWard("black", comparisonYear).get( d.properties.WARD ) ) ) .attr("stroke", d => chloropleth( dataRaceProportionPerWard("black", comparisonYear).get( d.properties.WARD ) ) ) // .attr("stroke", "#fff") .attr("stroke-width", 1); map .append("g") .attr( "transform", `translate(${dimensions.marginLeft}, ${dimensions.marginTop})` ) .attr("stroke-width", 1) .attr("fill-opacity", 1) .selectAll("path") .data(mapWards.features) .enter() .append("path") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("d", d => spike( arrestsPerCapita( dataArrestsPerWardPerCapita("total", comparisonYear).get( d.properties.WARD ) ), dimensions.spikeWidth ) ) .attr("stroke", "#000") .attr("fill", d => chloropleth( dataRaceProportionPerWard("black", comparisonYear).get( d.properties.WARD ) ) ); // Building the legend: const legend = map .append("g") .attr( "transform", `translate(${dimensions.marginLeft * 3} ${dimensions.marginTop + dimensions.chartHeight + 50})` ) .attr("font-family", "sans-serif") .attr("font-size", 10); const defs = map.append('defs'); const gradient = defs.append('linearGradient').attr('id', 'gradient'); gradient .append('stop') .attr('stop-color', colorLight) .attr('offset', '0'); gradient .append('stop') .attr('stop-color', colorBright) .attr('offset', '1'); const legendSpikes = legend .append("g") .attr("transform", `translate(${dimensions.spikeWidth / 2} -20)`); legendSpikes .append("g") .selectAll("path") .data(dataSpikeLegend) .enter() .append("path") .attr("d", d => spike(arrestsPerCapita(d), dimensions.spikeWidth)) .attr( "transform", (d, i) => `translate(${i * (dimensions.spikeWidth * 2)} 0)` ) .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", "none"); legendSpikes .selectAll("text") .data(dataSpikeLegend) .enter() .append("text") .attr("x", (d, i) => i * (dimensions.spikeWidth * 2)) .attr("y", d => -arrestsPerCapita(d) - 5) .attr("text-anchor", "middle") .attr("fill", "#000") // .text((d, i) => // i == dataSpikeLegend.length - 1 ? d + " arrests per capita" : d // ) .text(d => d); legendSpikes .append("text") .attr("text-anchor", "start") .attr( "x", dimensions.spikeWidth * 2 * dataSpikeLegend.length - dimensions.spikeWidth ) .attr("y", -5) .text("arrests per capita"); const legendGradient = legend.append("g"); legendGradient .append("rect") .attr( "width", dimensions.spikeWidth * 2 * dataSpikeLegend.length - dimensions.spikeWidth ) .attr("height", 15) .attr("transform", "translate(0 -15)") .attr("fill", "url(#gradient)"); legendGradient .append("text") .attr("text-anchor", "start") .attr( "x", dimensions.spikeWidth * 2 * dataSpikeLegend.length - dimensions.spikeWidth + 5 ) .attr("y", -3) .text("more Black residents"); legendGradient .append("text") .attr("text-anchor", "end") .attr("x", -5) .attr("y", -3) .text("more White residents"); return md`...herein lies the code for drawing the **map**...`; }33:T4c7,{ chartLine.selectAll("svg > *").remove(); const chartPlot = chartLine .append("g") .attr( "transform", `translate(${dimensions.width / 2 - dimensions.chartWidth / 2}, ${ dimensions.marginTop })` ); // Creating the axis: chartPlot .append("g") .attr("transform", `translate(0, ${dimensions.chartHeight})`) .call( d3 .axisBottom(years) .ticks(8) .tickFormat(d3.format("d")) ); chartPlot .append("g") .attr("transform", `translate(0, 0)`) .call(d3.axisLeft(arrests).ticks(4)); // Creating the line chartPlot .append("g") .append("path") .datum(dataArrestsPerYear) .attr("stroke", colorBright) .attr("stroke-width", 2) .attr("fill", "none") .attr( "d", d3 .line() .x(d => years(d.year)) .y(d => arrests(d.total)) ); chartPlot .append("g") .selectAll("circle") .data(dataArrestsPerYear) .enter() .append("circle") .attr("fill", colorBright) .attr("cx", d => years(d.year)) .attr("cy", d => arrests(d.total)) .attr("r", 3); return md`...and within here is the code for drawing the **line chart**...`; }34:T4e1,{ chartArea.selectAll("svg > *").remove(); // Some final data processing: const stack = d3 .stack() .keys(["black", "white"]) .offset(d3.stackOffsetExpand); // And then back to drawing the chart: const chartPlot = chartArea .append("g") .attr( "transform", `translate(${dimensions.width / 2 - dimensions.chartWidth / 2}, ${ dimensions.marginTop })` ); chartPlot .append("g") .selectAll("path") .data(stack(dataArrestsPerYear)) .join("path") .attr( "d", d3 .area() .x(d => years(d.data.year)) .y0(d => percentage(d[0] * 100)) .y1(d => percentage(d[1] * 100)) ) // .attr("stroke", d => color(d.index)) // .attr("stroke-width", 2) // .attr("fill-opacity", 0.25); .attr("fill", d => color(d.index)); chartPlot .append("g") .attr("transform", `translate(0, ${dimensions.chartHeight})`) .call( d3 .axisBottom(years) .ticks(8) .tickFormat(d3.format("d")) ); chartPlot .append("g") .attr("transform", `translate(0, 0)`) .call(d3.axisLeft(percentage).ticks(3)); return md`...and finally, here lies the code for drawing the **area chart**.`; }35:[{"id":"a2e3d225f6cd904d7738bce5ac95018fa35475249b4025731409268704ed8ea10618860a0e978ebeb58c316ce9213948d38728bc2ee49dab62bb53a56bbfbae1","href":"https://static.observableusercontent.com/files/a2e3d225f6cd904d7738bce5ac95018fa35475249b4025731409268704ed8ea10618860a0e978ebeb58c316ce9213948d38728bc2ee49dab62bb53a56bbfbae1","name":"wards-wgs84.topojson","type":"application/octet-stream","lastModified":1598674326520.585,"size":163974},{"id":"6c60a58940e2467d362aa67954b552a4fb589bbb8a6fce02e832d687f332f099eb750b6c0f0c5f57987038ab58874fce053d548a4fc4880aefcaaad34d3ca01a","href":"https://static.observableusercontent.com/files/6c60a58940e2467d362aa67954b552a4fb589bbb8a6fce02e832d687f332f099eb750b6c0f0c5f57987038ab58874fce053d548a4fc4880aefcaaad34d3ca01a","name":"WeedRelatedArrests-washpost@1.csv","type":"text/csv","lastModified":1598736154001.664,"size":2462942},{"id":"23d28a1db96aab0204910fa30045574d8165c569ba640241862c6b02e60a606ab58a188d79e6eaa90d34205345f077b60ac99bb79336df50118f51011a616808","href":"https://static.observableusercontent.com/files/23d28a1db96aab0204910fa30045574d8165c569ba640241862c6b02e60a606ab58a188d79e6eaa90d34205345f077b60ac99bb79336df50118f51011a616808","name":"dataPopulationByYear.json","type":"application/json","lastModified":1598925145272.72,"size":3606}] 30:{"title":"Visualizing disparities in marijuana related arrests within DC","cells":[{"id":0,"value":"md`# Visualizing disparities in marijuana related arrests within DC`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`Here's an excerpt from the article, read the full story by Paul Schwartzman and John D. Harden [here](https://www.washingtonpost.com/local/legal-issues/dc-marijuana-arrest-legal/2020/09/15/65c20348-d01b-11ea-9038-af089b63ac21_story.html#comments-wrapper):\n\n> *Police in D.C. are far more likely to arrest Blacks than Whites for marijuana-related offenses, five years after the city enacted reforms that proponents hoped would end racial disparities in enforcement.*\n\n> *Although marijuana arrests have declined by more than half, African Americans still account for just under 90 percent of those arrested on all pot-related charges, according to a Washington Post analysis, even as they make up 45 percent of the city’s population.*\n\n> *And while studies show that marijuana use is equally prevalent among Blacks and Whites, 84 percent of more than 900 people arrested for public consumption in the nation’s capital were African American in the four years after legalization.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1914,"value":"md`The data visualizations below show that, despite the legalization of marijuana in D.C. at the end of 2014 and a resulting drop in arrests, Black residents are still arrested disproportionately more than White residents. This occurs despite Black and White residents being about equal in both population and marijuana use within the District.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"md`The following line chart shows total marijuana-related arrests each year:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"weedLine = chartLine.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"html`And this area chart shows the portion of those arrests that were Black people and White people:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"weedChart = chartArea.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`Finally, the following map shows arrests per capita in each ward in **${comparisonYear}**. It also shows the effects of gentrification, keep an eye on how the colors change slightly over time. Use the slider below to change the year:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"viewof selectedYear = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"weedMap = map.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`*Population data from [ACS 5- year estimates from 2012 to 2018](https://data.census.gov/cedsci/table?q=dc&tid=ACSDP1Y2018.DP05&hidePreview=false), arrest data obtained by The Washington Post from the Metropolitan Police Department*`\n\n// *Note: Per capita calculations for 2019 arrest data done with latest available ACS data from 2018*","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`\n---\n## Configuring graphic container`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"dimensions = {\n let dms = {\n width: width,\n height: 500,\n marginTop: 50,\n marginLeft: 50\n };\n\n dms.marginBottom = dms.marginTop;\n dms.marginRight = dms.marginLeft;\n\n dms.chartWidth = d3.min([400, dms.width - dms.marginLeft - dms.marginRight]);\n dms.chartHeight = dms.height - dms.marginTop - dms.marginBottom;\n\n dms.spikeHeight = 30;\n dms.spikeWidth = 12;\n\n return dms;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"map = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"chartLine = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"chartArea = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## Building base map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"mapWards = {\n let attached = await FileAttachment(\"wards-wgs84.topojson\").json();\n let map = topojson.feature(attached, attached.objects[\"Ward_from_2012\"]);\n\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"projection = d3\n .geoAlbersUsa()\n .fitSize(\n [\n dimensions.width - dimensions.marginLeft - dimensions.marginRight,\n dimensions.height - dimensions.marginTop - dimensions.marginBottom\n ],\n mapWards\n )\n// .translate([10,10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Loading and transforming data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"comparisonYear = selectedYear","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"dataArrests = {\n let attached = await FileAttachment(\n \"WeedRelatedArrests-washpost@1.csv\"\n ).text();\n let dataRaw = d3.csvParse(attached);\n\n let dataProcessed = dataRaw.map(d => {\n return {\n ward: +d.WARD_ID,\n year: +d.ArrestYea,\n mjStatus: d.Marijuana_,\n race: d.Defendan_2\n };\n });\n\n return dataProcessed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"dataPopulation = {\n return await FileAttachment(\"dataPopulationByYear.json\").json();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"dataRacePopulationPerWard = function(race, year) {\n const population = dataPopulation.find(obj => +obj.year == year).demographics;\n const wards = [1, 2, 3, 4, 5, 6, 7, 8];\n\n switch (race) {\n case \"black\":\n return new Map(wards.map(d => [d, +population[d - 1].Black]));\n break;\n case \"white\":\n return new Map(wards.map(d => [d, +population[d - 1].White]));\n break;\n default:\n return new Map(wards.map(d => [d, +population[d - 1].Total]));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"dataRaceProportionPerWard = function(race, year) {\n const population = dataPopulation.find(obj => +obj.year == year).demographics;\n const wards = [1, 2, 3, 4, 5, 6, 7, 8];\n\n return new Map(\n wards.map(d => [\n d,\n dataRacePopulationPerWard(race, year).get(d) /\n (dataRacePopulationPerWard(\"black\", year).get(d) +\n dataRacePopulationPerWard(\"white\", year).get(d))\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"dataArrestsPerWard = function(race, year) {\n const years = dataPopulation.map(d => d.year);\n const wards = [1, 2, 3, 4, 5, 6, 7, 8];\n const arrests = dataArrests.filter(obj => +obj.year == year);\n\n const arrestsBlackPerWard = new Map(\n wards.map(d => [\n d,\n arrests.filter(obj => +obj.ward == d && obj.race == \"B\").length\n ])\n );\n const arrestsWhitePerWard = new Map(\n wards.map(d => [\n d,\n arrests.filter(obj => +obj.ward == d && obj.race == \"W\").length\n ])\n );\n const arrestsTotalPerWard = new Map(\n wards.map(d => [d, arrests.filter(obj => +obj.ward == d).length])\n );\n\n switch (race) {\n case \"black\":\n return arrestsBlackPerWard;\n break;\n case \"white\":\n return arrestsWhitePerWard;\n break;\n default:\n return arrestsTotalPerWard;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"dataArrestsPerWardPerCapita = function(race, year) {\n const wards = [1, 2, 3, 4, 5, 6, 7, 8];\n\n const arrestsPerCapita = arrestsPerWard => {\n return new Map(\n wards.map(d => [\n d,\n // arrestsPerWard.get(d)\n (arrestsPerWard.get(d) / dataRacePopulationPerWard(race, year).get(d)) *\n 1000\n ])\n );\n };\n\n return arrestsPerCapita(dataArrestsPerWard(race, year));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"dataSpikeLegend = [4, 2, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"dataAveragedArrestsPerWardPerCapita = function(race) {\n let isLegal = true;\n\n const wards = [1, 2, 3, 4, 5, 6, 7, 8];\n\n const legal = [2015, 2016, 2017, 2018];\n const illegal = [2012, 2013, 2014];\n const all = [...illegal, ...legal];\n\n let maps = [];\n if (isLegal == true) {\n for (let i = 0; i < legal.length; i++) {\n maps.push(dataArrestsPerWardPerCapita(race, legal[i]));\n }\n } else if (isLegal == false) {\n for (let i = 0; i < illegal.length; i++) {\n maps.push(dataArrestsPerWardPerCapita(race, illegal[i]));\n }\n } else {\n for (let i = 0; i < illegal.length; i++) {\n maps.push(dataArrestsPerWardPerCapita(race, all[i]));\n }\n }\n\n let output = [];\n for (let i = 0; i < wards.length; i++) {\n let sum = 0;\n for (let j = 0; j < maps.length; j++) {\n sum = sum + maps[j].get(wards[i]);\n }\n\n output.push(sum / maps.length);\n }\n\n // return output;\n return new Map(wards.map((d, i) => [d, output[i]]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"dataTotalArrestsAndPopulationPerYear = {\n const years = dataPopulation.map(d => +d.year);\n\n return new Map(\n years.map(d => [\n d,\n {\n arrests: {\n black: d3.sum(dataArrestsPerWard(\"black\", d).values()),\n white: d3.sum(dataArrestsPerWard(\"white\", d).values()),\n total: d3.sum(dataArrestsPerWard(\"total\", d).values())\n },\n population: {\n black: d3.sum(dataRacePopulationPerWard(\"black\", d).values()),\n white: d3.sum(dataRacePopulationPerWard(\"white\", d).values()),\n total: d3.sum(dataRacePopulationPerWard(\"total\", d).values())\n }\n }\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"dataArrestsPerYear = {\n const years = [...dataPopulation.map(d => +d.year), 2019];\n\n const data = years.map(d => {\n return {\n year: d,\n black: d3.sum(dataArrestsPerWard(\"black\", d).values()),\n white: d3.sum(dataArrestsPerWard(\"white\", d).values()),\n total: d3.sum(dataArrestsPerWard(\"total\", d).values())\n };\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"dataArrestsPerCapitaPerYear = {\n const years = dataPopulation.map(d => +d.year);\n\n const data = years.map(d => {\n return {\n year: d,\n black:\n (d3.sum(dataArrestsPerWard(\"black\", d).values()) /\n d3.sum(dataRacePopulationPerWard(\"black\", d).values())) *\n 1000,\n white:\n (d3.sum(dataArrestsPerWard(\"white\", d).values()) /\n d3.sum(dataRacePopulationPerWard(\"white\", d).values())) *\n 1000,\n total:\n (d3.sum(dataArrestsPerWard(\"total\", d).values()) /\n d3.sum(dataRacePopulationPerWard(\"total\", d).values())) *\n 1000\n };\n });\n\n return data;\n\n // black: d3.sum(dataRacePopulationPerWard(\"black\", d).values()),\n // white: d3.sum(dataRacePopulationPerWard(\"white\", d).values()),\n // total: d3.sum(dataRacePopulationPerWard(\"total\", d).values())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`## Creating scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"color = d3\n .scaleQuantize()\n .domain([0, 2])\n .range([colorBright, colorLight, colorGray])","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"chloropleth = d3\n .scaleSequential()\n // .domain([d3.min(dataRace.values()), d3.max(dataRace.values())])\n .domain([0, 1])\n .interpolator(d3.interpolate(colorLight, colorBright))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1237,"value":"years = d3\n .scaleLinear()\n .domain([2012, 2019])\n .range([0, dimensions.chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1683,"value":"yearsBand = d3\n .scaleBand()\n .domain([2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019])\n .range([0, dimensions.chartWidth])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"population = d3\n .scaleLinear()\n .domain([\n 0,\n dataTotalArrestsAndPopulationPerYear.get(comparisonYear).population.black +\n dataTotalArrestsAndPopulationPerYear.get(comparisonYear).population.white\n ])\n .range([0, dimensions.chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"arrests = d3\n .scaleLinear()\n .domain([0, 4000])\n .range([dimensions.chartHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"arrestsPerCapita = d3\n .scaleLinear()\n // .domain([0, d3.max(dataArrestsPerWard(false, \"black\").values())])\n .domain([0, d3.max(dataAveragedArrestsPerWardPerCapita(\"total\").values())])\n // .domain([0,500])\n .range([0, dimensions.spikeHeight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1508,"value":"percentage = d3\n .scaleLinear()\n .domain([0, 100])\n .range([dimensions.chartHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"md`## Drawing visualizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"md`I stopped pinning these code blocks because scrolling through them was getting pretty annoying. So...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"md`The following are some reusable visual elements that help draw the graphics:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"spike = (heightInput, widthInput) =>\n `M ${-widthInput / 2},0 Q ${-widthInput /\n 4},0 0,${-heightInput} Q ${widthInput / 4},0 ${widthInput / 2},0`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"colorBright = \"#A23294\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"colorLight = \"#F5D8F1\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"colorGray = \"#E2E2E2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`\n---\n## Libraries and packages\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}