31:[{"id":"8647233ddf17a9d87db18952880722f27f184b640aeec5e72676a6a2c609ab267a9bbd682f48dcade941917c617d995ba706d247a4eb440c7df4e81118d7c0aa","href":"https://static.observableusercontent.com/files/8647233ddf17a9d87db18952880722f27f184b640aeec5e72676a6a2c609ab267a9bbd682f48dcade941917c617d995ba706d247a4eb440c7df4e81118d7c0aa","name":"stops-sf-2015@2.csv","type":"text/csv","lastModified":1615123478161.039,"size":365167},{"id":"c56ca21e433b5faaccbd32e1bc3f4eb284a92b1d60929b9aa59c0342cdf671d589bcddb12e3993d1b549f7873e42e7eb4b422bd6190a3b07ec3bfc311faba29b","href":"https://static.observableusercontent.com/files/c56ca21e433b5faaccbd32e1bc3f4eb284a92b1d60929b9aa59c0342cdf671d589bcddb12e3993d1b549f7873e42e7eb4b422bd6190a3b07ec3bfc311faba29b","name":"stops-sf-2015@3.csv","type":"text/csv","lastModified":1615221372171.955,"size":252573},{"id":"04c0462d57a4eddf87bd8442bf4ac1fc8c67754e0d3c0d3265fac0256c4019a66045d2eb721b0eb43285b315357039319e2f569c451ba8887d5ad06f583b3c66","href":"https://static.observableusercontent.com/files/04c0462d57a4eddf87bd8442bf4ac1fc8c67754e0d3c0d3265fac0256c4019a66045d2eb721b0eb43285b315357039319e2f569c451ba8887d5ad06f583b3c66","name":"stops-sf-2015@5.csv","type":"text/csv","lastModified":1615233794496.939,"size":249857}] 2f:{"title":"The Veil-of-Darkness Test","cells":[{"id":0,"value":"md`# The Veil-of-Darkness Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`This notebook was inspired by the article [_A large-scale analysis of racial disparities in police stops across the United States_](https://5harad.com/papers/100M-stops.pdf) (Nature, 2020). Among other analysis, the authors test the veil-of-darkness hypothesis using a nation-wide dataset of traffic stops.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"md`The veil-of-darkness hypothesis relies on the assumption that officers who are engaged in racial profiling are less likely to identify a driver’s race after dark than during daylight. If the proportion of black drivers stopped after dark is smaller than the proportion of black drivers stopped during day time, it can suggest the presence of racial profiling. This notebook is an interactive version of the visualization published in the article, using data for San Francisco in 2015. \n\nThis notebook is an illustration of the concept, and **doesn't prove** the existence or the absence of any actual racial profiling. The statistical significance of the outcome of the test would need to be proven with a more robust statistical model.\n\nTo adjust for daily habits, the sample of traffic stops is limited to a time window that occurs before dark, in the period of the year when days are longer (closer to summer), and after dark when the days are shorter (closer to winter).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof timeWindowSlider = rangeSlider({\n min: d3.min(data, d => d.minute),\n max: d3.max(data, d => d.minute),\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [defaultWindowStart, defaultWindowEnd],\n precision: 0,\n separator: \" → \",\n format: v => `${minutesToTime(v)}`,\n title: 'Select time window',\n description: `Select a time window between ${minutesToTime(d3.min(data, d => d.minute))} (earliest time of dusk in San Francisco, Dec. 6th)
and ${minutesToTime(d3.max(data, d => d.minute))} (latest time of dusk in San Francisco, June 28th).
\nNote: in the original article, authors use 15-minute periods.`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`Showing **${formatThousands(timeWindowData.length)}** traffic stops that occurred between **${minutesToTime(timeWindowSlider[0])}** and **${minutesToTime(timeWindowSlider[1])}** in **San Francisco** in **2015**.\n\n| Period of the Day | Total number of stops | Proportion of stopped drivers who are black | \n| -------------- | -------------- | -------------- | -------------- | -------------- |\n| **Day** (before sunset)| ${formatThousands(dayData.totalNbOfStops)} | **${formatPercentage(dayData.propBlack)}** | \n| **Night** (after dusk)| ${formatThousands(nightData.totalNbOfStops)} | **${formatPercentage(nightData.propBlack)}** |`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"g\")\n .call(periods);\n \n svg.append(\"g\")\n .call(moments);\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(${bounds.margins.left}, ${bounds.margins.top})`)\n .selectAll(\"rect\")\n .data(chartData)\n .join(\"rect\")\n .attr(\"x\", d => xScale(d.start))\n .attr(\"y\", d => yScale(d.propBlack))\n .attr(\"width\", d => xScale(d.end) - xScale(d.start))\n .attr(\"height\", d => heightScale(d.nbStops))\n .attr(\"fill\", d => colorScale(d.isDark));\n\n svg.append(\"g\")\n .call(periodAverage);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"md`The rectangles represent the proportions of stopped drivers who are black, in stops that occurred **before sunset** and **after dark**, aggregated in periods of 10 minutes. They are sized according to the number of stops that occurred in each time bin. The stops that occurred during the ambiguous **twilight** period are removed as the level of visibility is difficult to assess. The dotted lines represent the overall proportion of stopped drivers who are black, before and after dark. For simplicity, the dataset only compares black and white drivers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`Like all technics used to test an hypothesis, the veil-of-darkness test comes with many **caveats and limitations**: it doesn't account for drivers' change of behaviors between seasons, it gives a global number that may generalize the behavior of only a few police officers, or depicts a situation that only happens in a few precincts. Furthermore, the presence of artifical lighting may weaken the relationship between sunlight and visibility in some places, which would lead to underestimating the outcome of the test. \n\nMore limitations and methodological considerations are detailed in the article [*A large-scale analysis of racial disparities in police stops across the United States*\n](https://www.nature.com/articles/s41562-020-0858-1) (2020), and in the original description of the test by Grogger and Ridgeway in [*Testing for Racial Profiling in Traffic Stops From Behind a Veil of Darkness*\n](https://www.rand.org/pubs/reprints/RP1253.html) (2006).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`The dataset was created by the [Stanford Open Policing Project](https://openpolicing.stanford.edu/), and pre-processed using R following this [tutorial](https://openpolicing.stanford.edu/tutorials/). The preprocessing code used to create the data used in this notebook is available on [github](https://github.com/lucguillemot/veil-of-darkness-test).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"dataset = d3.csvParse(await FileAttachment(\"stops-sf-2015@5.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"data = dataset","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"timeWindowData = data.filter(d => d.minute >= timeWindowSlider[0] && d.minute <= timeWindowSlider[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"bins = d3.bin()\n .thresholds([-80, -70, -60, -50, -40, -30, 0, 10, 20, 30, 40, 50])\n .value(d => d.minutes_after_dark)\n .domain([-90, 60])\n (timeWindowData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"chartData = bins.map(bin => ({ \n nbStops: d3.rollup(bin, v => v.length), \n start: bin.x0, \n end: bin.x1,\n nbBlack: d3.rollup(bin.filter(x => x.subject_race === \"black\"), v => v.length), \n isDark: bin.x1 > 0 }))\n// Add proportion of stopped drivers who are black\n.map(bin => ({...bin, propBlack: bin.nbBlack / bin.nbStops }))\n// Filter for NaN (twilight period)\n.filter(d => !isNaN(d.propBlack))","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"periodsData = d3.rollup(timeWindowData, x => x.length, d => d.period, d => d.subject_race)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"dayData = ({ \n period: \"day\",\n totalNbOfStops: periodsData.get(\"day\").get(\"white\") + periodsData.get(\"day\").get(\"black\"),\n start: -90,\n end: -30,\n propBlack: periodsData.get(\"day\").get(\"black\") / (periodsData.get(\"day\").get(\"white\") + periodsData.get(\"day\").get(\"black\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"nightData = ({ \n period: \"night\",\n totalNbOfStops: periodsData.get(\"night\").get(\"white\") + periodsData.get(\"night\").get(\"black\"),\n start: 0,\n end: 60,\n propBlack: periodsData.get(\"night\").get(\"black\") / (periodsData.get(\"night\").get(\"white\") + periodsData.get(\"night\").get(\"black\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"testPasses = nightData.propBlack <= dayData.propBlack","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"md`# Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"periodAverage = g => g\n .attr(\"transform\", `translate(${bounds.margins.left}, ${bounds.margins.top})`)\n .selectAll(\"line\")\n .data([dayData, nightData])\n .call(g => g\n .join(\"line\")\n .attr(\"x1\", d => xScale(d.start))\n .attr(\"y1\", d => yScale(d.propBlack))\n .attr(\"x2\", d => xScale(d.end))\n .attr(\"y2\", d => yScale(d.propBlack))\n .attr(\"stroke\", testPasses ? testPassesColor : testFailsColor)\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-dasharray\", \"6 4\")\n )\n .call(g => g\n .join(\"text\")\n .attr(\"x\", d => d.period === \"day\" ? xScale(d.end) + 22 : xScale(d.start) - 22)\n .attr(\"y\", d => yScale(d.propBlack))\n .attr(\"font-size\", 12)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", 600)\n .attr(\"fill\", testPasses ? testPassesColor : testFailsColor)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dominant-baseline\", \"middle\")\n .text(d => formatPercentage(d.propBlack))\n ) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"moments = g => g\n .attr(\"transform\", `translate(${bounds.margins.left}, 0)`)\n .selectAll(\"text\")\n .data(sunsetAndDusk)\n .call(g => g\n .join(\"text\")\n .attr(\"x\", d => xScale(d.time))\n .attr(\"y\", 0)\n .attr(\"dy\", 16)\n .attr(\"font-size\", 12)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", 600)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .text(d => d.moment)\n ).call(g => g\n .join(\"text\")\n .attr(\"x\", d => xScale(d.time))\n .attr(\"y\", 0)\n .attr(\"dy\", 32)\n .attr(\"font-size\", 16)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", 600)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .text(\"↓\")\n ) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"periods = g => g\n .attr(\"transform\", `translate(${bounds.margins.left}, ${bounds.margins.top})`)\n .selectAll(\"rect\")\n .data(sunsetToDuskPeriods)\n .call(g => g\n .join(\"rect\")\n .attr(\"x\", d => xScale(d.start))\n .attr(\"y\", 0)\n .attr(\"width\", d => xScale(d.end) - xScale(d.start))\n .attr(\"height\", bounds.chartHeight)\n .attr(\"fill-opacity\", .05)\n .attr(\"fill\", d => d.color)\n )\n .call(g => g\n .join(\"text\")\n .attr(\"x\", d => xScale(d.start) + ((xScale(d.end) - xScale(d.start)) /2 ))\n .attr(\"y\", 0)\n .attr(\"dy\", 20)\n .attr(\"font-size\", 12)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", 600)\n .attr(\"fill\", d => d.color)\n .attr(\"text-anchor\", \"middle\")\n .text(d => d.period)\n ) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"yScale = d3.scaleLinear()\n .domain([0, 1])\n .range([bounds.chartHeight, 0]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"xScale = d3.scaleLinear().domain([-90, 60]).range([0, bounds.chartWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"nbStopsExtent = d3.extent(chartData, d => d.nbStops)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"radiusScale = d3.scaleSqrt()\n .domain(nbStopsExtent)\n .range([4, 8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"heightScale = d3.scaleLinear().domain(nbStopsExtent).range([4, 15])","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"colorScale = d3.scaleOrdinal().domain([false, true]).range([sunsetColor, duskColor])","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"xAxis = g => g\n .attr(\"transform\", `translate(${bounds.margins.left}, ${bounds.margins.top + bounds.chartHeight})`)\n .call(d3.axisBottom(xScale)\n .ticks(width / 80))\n .call(g => g.append(\"text\")\n .attr(\"x\", bounds.chartWidth)\n .attr(\"y\", 0)\n .attr(\"dy\", bounds.margins.bottom - 8)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Time since dusk (minutes)\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"yAxis = g => g\n .attr(\"transform\", \n `translate(${bounds.margins.left}, ${bounds.margins.top})`)\n .call(d3.axisLeft(yScale).tickFormat(d3.format(\".0%\")))\n .call(g => g.append(\"text\")\n .attr(\"x\", -bounds.margins.left)\n .attr(\"y\", -bounds.margins.top / 2)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"% of stopped drivers who are black\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`## Visualization Assets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"sunsetAndDusk = [\n { moment: \"Sunset\", color: sunsetColor, time: -30 },\n { moment: \"Dusk\", color: duskColor, time: 0 },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"sunsetToDuskPeriods = [\n { period: \"Day\", color: \"#eeaf61\", start: -90, end: -30 }, \n { period: \"Twilight\", color: \"#ee5d6c\", start: -30, end: 0 },\n { period: \"Night\", color: \"#6a0d83\", start: 0, end: 60 },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"sunsetColor = \"#eeaf61\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"twilightColor = \"#ee5d6c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"duskColor = \"#6a0d83\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"testPassesColor = \"#0d75ff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"testFailsColor = \"#1b3644\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"defaultWindowStart = 1115","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"defaultWindowEnd = defaultWindowStart + 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"bounds = ({ margins, \n chartWidth: width - margins.left - margins.right, \n chartHeight: height - margins.top - margins.bottom })","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"margins = ({top: 40, right: 20, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"md`## Libraries & utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"formatThousands = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"minutesToTime = (minutes) => `${Math.floor(minutes / 60)}:${minutes % 60 > 9 ? minutes % 60 : `0${minutes % 60}`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}