2e:null 2f:["$","title",null,{"children":"IMPD complaints | Sawyer Click | Observable"}] 34:T17a8,complaintsChart = { var margin = { top: 60, right: 100, bottom: 22, left: 100 }; var height = 500; const svg = d3 .select(DOM.svg(width, height)) .attr('class', 'complaintGrowth'); var complaintsData = d3 .nest() .key(d => +d.properties.OCCURRED_DT.split('/')[0]) .key(d => d.properties.SOURCE) .rollup(d => d3.map(d, k => k.properties.LINKNUM).size()) .entries(geojson.features) .filter(d => (2014 <= d.key) & (d.key <= 2018)); var complaintsChange = complaintsData.sort((a, b) => d3.ascending(+a.key, +b.key) ); const complaintsFinal = complaintsChange.map(function(d) { var merged = { key: +d.key }; // Copy each key-val pair of group.values into merged Object.keys(d.values).forEach(function(k, i) { merged[d.values[k].key] = d.values[k].value; }); const columnNames = [ ...new Set(geojson.features.map(d => d.properties.SOURCE)) ].filter(d => d != null); var difference = columnNames.filter( x => !Array.from(d.values.map(e => e.key)).includes(x) ); // get 0 for all the columns unaccounted for difference.forEach(function(k, i) { merged[`${k}`] = 0; }); return merged; }); const series = d3.stack().keys(Object.keys(complaintsFinal[0]).slice(1))( complaintsFinal ); var x = d3 .scaleLinear() .domain([2014, 2018]) .range([margin.left, width - margin.right]); var y = d3 .scaleLinear() .domain([0, 275]) .range([height - margin.bottom, margin.top]); var color = d3.scaleOrdinal().range(['#252C3F', '#8C7437']); var parseTime = d3.timeParse('%Y'); var area = d3 .area() .curve(d3.curveMonotoneX) .x(d => x(+d.data.key)) .y0(d => y(d[0])) .y1(d => y(d[1])); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(5) .tickSizeInner(5) .tickPadding(5) .tickValues(d3.range(2013, 2020)) .tickFormat(d => d3.format('.0f')(d)) ) .call(g => g.select(".domain").remove()); var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickSize(-(width - margin.right - margin.left)) .ticks(5) .tickPadding(5) ) .call(g => g.select(".domain").remove()); const scatter = []; const k = Object.keys(complaintsFinal[0]).slice(1); series.map((columns, i) => columns.map(d => { const thisData = { y: d[1], year: d.data.key, type: k[i] }; scatter.push(thisData); }) ); svg .append("g") .selectAll("path") .data(series.sort((a, b) => +a.key > +b.key)) .join("path") .attr("fill", ({ key }) => color(key)) .attr("d", area) .attr('class', 'area') .attr('stroke', '#ccc'); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append('g') .append('text') .attr('class', 'unit') .text('complaints') .attr('y', y(247)) .attr('x', x(2014)) .attr('alignment-baseline', 'bottom'); const binding = svg .append('g') .selectAll(".circle") .data(scatter) .join('circle') .attr('class', d => `circle month-${d.year}`) .attr('cx', d => x(d.year)) .attr('cy', d => y(d.y)) .attr('stroke', d => color(d.type)) .attr('stroke-width', 1) .attr('fill', '#fff') .attr('r', 5) .attr('opacity', 0); const voronoi = d3.Delaunay.from( scatter, d => x(d.year), d => y(d.y) ).voronoi([0, 0, width - margin.left - margin.right, height]); const tooltip = svg.append("g"); function popover(g, value) { if (!value) return g.style("display", "none"); g.style("display", null) .style("pointer-events", "none") .style("font", "400 12px/1.4 'Montserrat', sans-serif"); const path = g .selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "#202630"); const text = g .selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.5}em`) .attr("text-anchor", "middle") // .style("font-weight", (_, i) => i ? null : "700") .text(d => d) ); const { x, y, width: w, height: h } = text.node().getBBox(); path .attr( "d", ` M0.734375,0 H${w + 20} V${h + 20} H${w / 2 + 15} l-5,5 l-5,-5 H0.734375 V0Z` ) .attr("transform", `translate(${-w / 2 - 10},${-(h + 20)})`); text.attr("transform", `translate(${0},${y - 20})`); } svg .append("g") .attr("class", "voronoiWrapper") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll("path") .data(scatter) .join("path") .attr("opacity", 0.5) // .attr("stroke", "#ff1493") // Show overlay for debugging .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseover", function(d, i) { var typeF, typeInf, valueInf, valueF; var thisData = scatter .filter(k => k.year == d.year) .sort((a, b) => a.y > b.y); // console.log(thisData) if (thisData[0].type === 'CPCO (Informal)') { typeInf = 'Informal'; } else { typeInf = 'Formal'; } if (thisData[1].type === 'CPCO (Formal)') { typeF = 'Formal'; } else { typeF = 'Informal'; } tooltip.attr("transform", `translate(${x(d.year)},${y(d.y) - 15})`).call( popover, `${typeF}: ${thisData[1].y - thisData[0].y + " complaints"} ${typeInf}: ${thisData[0].y + " complaints"}` ); }) .on("mouseout", () => { tooltip.call(popover, null); }); tooltip.raise(); return svg.node(); }35:T711,chart = { var margin = { top: 0, right: 0, bottom: 0, left: 0 }; var height = 300; const svg = d3.select(DOM.svg(width, height)).attr('id', 'hist'); const annotationsG = svg.append('g').attr('id', 'annotationsG'); var histData = Array.from( new Map( [ ...d36 .rollup( geojson.features, v => [...new Set(v.map(k => k.properties.LINKNUM))].length, d => d.properties.OFFNUM ) .entries() ].sort((a, b) => a[1] > b[1]) ).entries() ); var y = d3 .scaleLinear() .domain([0, d3.max(histData.map(d => d[1]))]) .nice() .range([height - margin.bottom, margin.top]); var x = d3 .scaleBand() .domain(histData.sort((a, b) => d3.ascending(a[1], b[1])).map(d => d[0])) .range([margin.left, width - margin.right]); var yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call( d3 .axisRight(y) .tickPadding(7) .ticks(3) .tickSizeInner(-width + margin.left + margin.right) ) .call(g => g.select(".domain").remove()); var xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => '') .tickSizeOuter(0) .tickSizeInner(0) ); svg .append("g") .selectAll("rect") .data(histData) .join("rect") .attr("x", d => x(d[0])) .attr("y", d => y(d[1])) .attr("height", d => y(0) - y(d[1])) .attr("fill", "#252C3F") .attr("stroke-width", 0) .attr("width", x.bandwidth()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .selectAll('.tick') .attr('stroke', 'white') .attr('stroke-width', 0); return svg.node(); }36:T45a,p3 = md` ## Allegations and findings #### Findings Allegations resulting in exoneration have grown disproportionately in recent years following a relatively low point. The 406 exonerations in 2018, up from 331 in 2017 and 202 in 2016, made up 61% of all findings. In 2015, the lowest point in recent years, they made up only 39% of findings. #### Allegations The fastest-growing allegations in the past few years were those classified as Citizen Interaction, Substandard Performance, Neglect of Duty or Use of Force, in no particular order. 2018 also saw a hefty increase in allegations with an unknown classification, up to 158 in 2018 compared to 2017's 17. *__How to read this chart__: This is a stacked area chart. It shows the breakdown of a category for each year, from 2014 to 2018, with a thicker band indicating that a finding or allegation makes up a higher percentage of a year's total. The data here is by-allegation, meaning that the data visible are the allegations for each complaint filed. Each allegation in a complaint has its own finding.* *Note: Hover over a segment for specific numbers* `37:T132f,steamgraph1 = { var margin = { top: 0, right: 20, bottom: 45, left: 20 }; var height = 450; var svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('class', 'streamgraph'); const columnNames = [ ...new Set(geojson.features.map(d => d.properties[r1])) ].filter(d => d != null); var parseTime = d3.timeParse('%Y'); var yearsRaw = d3 .nest() .key(d => +d.properties.OCCURRED_DT.split('/')[0]) .key(d => d.properties[r1]) .rollup(d => d.length) .entries(geojson.features) .sort((a, b) => d3.ascending(+a.key, +b.key)); var finalData = yearsRaw.map(function(d) { var merged = { key: +d.key }; // Copy each key-val pair of group.values into merged Object.keys(d.values).forEach(function(k, i) { merged[d.values[k].key] = d.values[k].value; }); var difference = columnNames.filter( x => !Array.from(d.values.map(e => e.key)).includes(x) ); // get 0 for all the columns unaccounted for difference.forEach(function(k, i) { merged[`${k}`] = 0; }); return merged; }); var years = finalData .sort((a, b) => +a.key > +b.key) .filter(d => (2014 <= d.key) & (d.key <= 2018)); const series = d3 .stack() .keys(columnNames) .offset(d3.stackOffsetNone) .order(d3.stackOrderInsideOut)(years); var x = d3 .scaleLinear() .domain([parseTime(2014), parseTime(2018)]) .range([margin.left, width - margin.right]); var y = d3 .scaleLinear() .domain([ d3.min(series, d => d3.min(d, d => d[0])), d3.max(series, d => d3.max(d, d => d[1])) ]) .range([height - margin.bottom, margin.top]); var color = d3 .scaleSequential(d3.interpolateCividis) .domain([columnNames.length, 0]); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickValues(d3.range(2013, 2020).map(d => parseTime(d))) .tickSizeOuter(0) .tickFormat(d => d3.timeFormat('%Y')(d)) .tickSizeInner(-height) .tickPadding(30) ) .call(g => g.select(".domain").remove()); var area = d3 .area() // .defined(d => !isNaN(d)) .curve(d3.curveMonotoneX) .x(d => x(parseTime(d.data.key))) .y0(d => y(d[0])) .y1(d => y(d[1])); function getYear(year, _height) { svg .append('g') .append('text') .attr('class', 'histText') .attr('id', 'y' + year) .text('year:amount') .attr('x', x(parseTime(year))) .attr('y', height - 22) .attr('opacity', 0) .attr('text-anchor', 'middle'); } function updateText(year, data) { svg .select('#y' + year) .text(data) .attr('opacity', 1); } svg .append("g") .selectAll("path") .data(series) .join("path") .attr("fill", (k, i) => color(k['index'])) .attr('class', 'findings') .attr('stroke', '#ccc') .attr('stroke-width', .5) .attr("d", area) .on('mouseover', function(d) { svg .select('#columnName') .text(d.key) .attr('opacity', 1); svg .select('#variable') .text(() => (r1 === 'FINDING' ? 'Findings' : 'Allegations')) .attr('opacity', 1); years.map((k, i) => { svg .select('#y' + k.key) .text(+k[d.key]) .attr('opacity', 1); }); svg.selectAll('.findings').attr('opacity', .3); d3.select(this).attr('opacity', 1); }) .on('mouseleave', d => { svg.select('#columnName').attr('opacity', 0); svg.select('#variable').attr('opacity', 0); svg.selectAll('.findings').attr('opacity', 1); svg.selectAll('.histText').attr('opacity', 0); }) .append("title") .text(({ key }) => key); svg.append("g").call(xAxis); svg .append('g') .append('text') .attr('class', 'histTextHed') .attr('id', 'columnName') .text(r1) .attr('x', x(parseTime(2015)) - 90) .attr('y', 115) .attr('opacity', 0) .attr('text-anchor', 'start'); svg .append('g') .append('text') .attr('class', 'histTextSub') .attr('id', 'variable') .text('test') .attr('x', x(parseTime(2015)) - 60) .attr('y', 145) .attr('opacity', 0) .attr('text-anchor', 'start'); getYear(2014, 95); getYear(2015, 75); getYear(2016, 55); getYear(2017, 35); getYear(2018, 15); // var yAxisScale = d3.scaleLinear() // .domain([0,871]) // .range([height - margin.bottom, margin.top]) // var yAxis = g => g // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(yAxisScale).ticks(3).tickSizeInner(-width + margin.left + margin.right)) // .call(g => g.select(".domain").remove()) // svg.append("g") // .call(yAxis) // .attr('class','y-axis'); return svg.node(); }38:T447,p4 = md` ## Racial breakdown of complaints against officers More than 70% of the complaints come from two races: black and white. Black people makeup only 29.2% of Indianapolis but make up at least a third of complaints against officers of each classified race, most significantly Hispanic, Black and Unknown officers. White people make significantly greater complaints towards officers who are white. In other categories, the number dwindles by at least 9%. **Disclaimer**: There was only one Asian officer on file with a complaint, defaulting the percentage of black complainants in that category to 100%. _**How to read this chart:** This is a stacked bar chart that shows the percentage makeup of complaints made against IMPD officers by races. If a segment in the second graphic is larger or smaller than the first, there is a disproportionate amount of complaints made toward that race officer by complainants of that race. Due to a high volume of complaints with unknown races, these are to be taken as approximations._ _Note: Hover over a segment to get the exact percentage._ `39:T583,indyRacesChart = { var margin = ({top: 0, right: 20, bottom: 5, left: 105}) var height = 50 const svg = d3.select(DOM.svg(width, height)).attr('class','races') var formatPercent = d3.format(".1%") var formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en") var x = d3.scaleLinear() .range([margin.left, width - margin.right]) var y = d3.scaleBand() .domain([indy_demo_stacked].map(d => d.key)) .range([margin.top, height - margin.bottom]) .padding(0.08) var xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 100, "%").tickSizeInner(-height).tickValues(d3.range(0,1.1,.25))) .call(g => g.selectAll(".domain").remove()) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()) svg.append("g") .selectAll("g") .data(seriesIndy) .enter().append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.key)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .append("title") .text(d => `${formatPercent(d[1] - d[0])}`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }3a:T5b4,racesChart = { var margin = ({top: 15, right: 20, bottom: 5, left: 105}) var height = officer_complaints.length * 25 + margin.top + margin.bottom const svg = d3.select(DOM.svg(width, height)).attr('class','races') var formatPercent = d3.format(".1%") var formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en") var x = d3.scaleLinear() .range([margin.left, width - margin.right]) var y = d3.scaleBand() .domain(officer_complaints.map(d => d.key)) .range([margin.top, height - margin.bottom]) .padding(0.08) var xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 100, "%").tickSizeInner(-height).tickValues(d3.range(0,1.1,.25))) .call(g => g.selectAll(".domain").remove()) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()) svg.append("g") .selectAll("g") .data(series) .enter().append("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.key)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .append("title") .text(d => `${formatPercent(d[1] - d[0])}`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }3b:T99b,sankeyChart = { const svg = d3.create("svg") .attr("title", "Sankey diagram") .attr("viewBox", [0, 0, params.svg.width, params.svg.height]); // svg.style('background-color', '#F0EBDF') svg.append("g") .attr("class", "chart-title") .append("text") .attr("class", "sankey-title") .attr("x", 0) .attr("text-anchor", "start") .attr("y", 0) .attr("dy", "2em") .text("Officers"); svg.append("g") .attr("class", "chart-title") .append("text") .attr("class", "sankey-title") .attr("x", width) .attr("text-anchor", "end") .attr("y", 0) .attr("dy", "2em") .text("Complainants"); const {nodes, links} = sankey(sankeyData); svg.append("g") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .selectAll("rect") .data(nodes) .join("rect") .attr("aria-hidden", true) .attr("stroke", d => d3.color(color1(d)).darker(0.5)) .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", color1); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color1(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color1(d.target)); link.append("path") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .attr("aria-hidden", true) .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid ) .attr("stroke-width", d => Math.max(1, d.width)); svg.append("g") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .attr('class','sankey-id') .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); return svg.node(); }3c:Tff3,map2 = { const container = html`

`; yield container; var map2 = (container.value = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/dark-v10", //"mapbox://styles/sawyerclick/ckebzegdp1cn319la1iky443b", center: [-86.1581, 39.78], scrollZoom: false, zoom: 10.4, attributionControl: false })); map2.addControl(new mapboxgl.NavigationControl(), 'bottom-right'); map2.on('load', function () { for (let i = 0; i < geojson.features.length; i++) { geojson.features[i]['id'] = i + 1 } map2.addSource('complaints', { type: 'geojson', data: filteredData }); map2.addLayer( { 'id': 'complaints-heat', 'type': 'heatmap', 'source': 'complaints', 'maxzoom': 22, 'paint': { // Increase the heatmap weight based on frequency and property magnitude 'heatmap-weight': 1, // Increase the heatmap color weight weight by zoom level // heatmap-intensity is a multiplier on top of heatmap-weight 'heatmap-intensity': [ 'interpolate', ['linear'], ['zoom'], 0, 1, 22, 3 ], // Color ramp for heatmap. Domain is 0 (low) to 1 (high). // Begin color ramp at 0-stop with a 0-transparancy color // to create a blur-like effect. 'heatmap-color': [ 'interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(33,102,172,0)', 0.2, 'rgb(103,169,207)', 0.4, 'rgb(209,229,240)', 0.6, 'rgb(253,219,199)', 0.8, 'rgb(239,138,98)', 1, 'rgb(178,24,43)' ], // Adjust the heatmap radius by zoom level 'heatmap-radius': [ 'interpolate', ['linear'], ['zoom'], 0, 2, 22, 20 ], // Transition from heatmap to circle layer by zoom level 'heatmap-opacity': [ 'interpolate', ['linear'], ['zoom'], 11, .7, 15.5, 0 ] } }, 'waterway-label' ); map2.addLayer( { 'id': 'complaints-point', 'type': 'circle', 'source': 'complaints', 'minzoom': 13.5, 'paint': { // Size circle radius by earthquake magnitude and zoom level 'circle-radius': 3, // Color circle by earthquake magnitude 'circle-color': '#fff', // 'circle-stroke-color': '#fff', // 'circle-stroke-width': 1, // Transition from heatmap to circle layer by zoom level 'circle-opacity': [ 'interpolate', ['linear'], ['zoom'], 5, 0, 13, 1 ] } }, 'waterway-label' ); }); invalidation.then(() => map2.remove()); }3d:T9a5,sankeyChartFindings = { const svg = d3.create("svg") .attr("title", "Sankey diagram") .attr("viewBox", [0, 0, params.svg.width, params.svg.height]); // svg.style('background-color', '#F0EBDF') svg.append("g") .attr("class", "chart-title") .append("text") .attr("class", "sankey-title") .attr("x", `0`) .attr("text-anchor", "start") .attr("y", 0) .attr("dy", "2em") .text("Complainants"); svg.append("g") .attr("class", "chart-title") .append("text") .attr("class", "sankey-title") .attr("x", width) .attr("text-anchor", "end") .attr("y", 0) .attr("dy", "2em") .text("Finding"); const {nodes, links} = sankey(sankeyData2); svg.append("g") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .selectAll("rect") .data(nodes) .join("rect") .attr("aria-hidden", true) .attr("stroke", d => d3.color(color2(d)).darker(0.5)) .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", color2); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color2(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color2(d.target)); link.append("path") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .attr("aria-hidden", true) .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid ) .attr("stroke-width", d => Math.max(1, d.width)); svg.append("g") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`) .attr('class','sankey-id') .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); return svg.node(); }3e:Ta27,html``3f:T6bf,addAnnotations = function() { var height = 300; var histData = Array.from( new Map( [ ...d36 .rollup( geojson.features, v => [...new Set(v.map(k => k.properties.LINKNUM))].length, d => d.properties.OFFNUM ) .entries() ].sort((a, b) => a[1] > b[1]) ).entries() ); var y = d3 .scaleLinear() .domain([0, d3.max(histData.map(d => d[1]))]) .nice() .range([height, 0]); const annotations = [ { type: d3_annotation.annotationCalloutRect, note: { label: "with complaints have only one against them", title: "56% of officers", wrap: 200, align: 'middle' }, disable: ["connector"], x: 0, y: 0, dy: height / 2 - 40, dx: (width * (499 / 897)) / 2, subject: { width: width * (499 / 897), height: y(1) } }, { type: d3_annotation.annotationCalloutRect, note: { label: "make up 25% of complaints", title: "9% of officers", wrap: 150, align: 'middle' }, x: width * .91, y: 0, dy: y(4) / 2 - 50, dx: -100, subject: { width: width * (499 / 897), height: y(4) } } ].map(function(d) { d.color = "#111"; return d; }); chart; // reactive hack to force annotations to render whenever the chart is redrawn const makeAnnotations = d3_annotation .annotation() .type(d => d.type) .notePadding(15) .annotations(annotations); const annotate = d3 .select("svg#hist #annotationsG") .attr("class", "annotation-group") .call(makeAnnotations); return annotate; }40:[{"id":"1c031374c18f87c98bc2e96f4a1dd29a06651027b37ba1a28b26c550e1389ff8d731fdb751bf0f5697a2a16d2adb76800712e05f53031264a356a6a192a10e22","href":"https://static.observableusercontent.com/files/1c031374c18f87c98bc2e96f4a1dd29a06651027b37ba1a28b26c550e1389ff8d731fdb751bf0f5697a2a16d2adb76800712e05f53031264a356a6a192a10e22","name":"Race and Ethnicity.csv","type":"text/csv","lastModified":1599464347850.292,"size":15457},{"id":"3611f76c9268cd5cdc2257ad1dea3b1212516343427e10d7f196e55207e2c4f77e2beb4aef782b1cf5ca3a62a740d45b6356caa9285cddac46a9ba4efc206436","href":"https://static.observableusercontent.com/files/3611f76c9268cd5cdc2257ad1dea3b1212516343427e10d7f196e55207e2c4f77e2beb4aef782b1cf5ca3a62a740d45b6356caa9285cddac46a9ba4efc206436","name":"IMPD_COMPLAINTS.csv","type":"text/csv","lastModified":1598750044918.441,"size":1166355},{"id":"804b2ece586e49824596f126610b2f1ffe880c7b1e5fd63e5c17ff09422207359a141dca4a40de3da10ca65908e31649ff612e8d1561eb2e7322c632e1cda6ef","href":"https://static.observableusercontent.com/files/804b2ece586e49824596f126610b2f1ffe880c7b1e5fd63e5c17ff09422207359a141dca4a40de3da10ca65908e31649ff612e8d1561eb2e7322c632e1cda6ef","name":"indy_tracts@2.json","type":"application/json","lastModified":1598838078318.607,"size":245777},{"id":"c0cdd890e7d7c7a147f285b979071f96cf890dfdabdafd883f04303086932b5361e311e10d069cee715b399a378126f2d281ce6c7f10a630eb5e65a8e9fb33ab","href":"https://static.observableusercontent.com/files/c0cdd890e7d7c7a147f285b979071f96cf890dfdabdafd883f04303086932b5361e311e10d069cee715b399a378126f2d281ce6c7f10a630eb5e65a8e9fb33ab","name":"geo-data@5.geojson","type":"application/geo+json","lastModified":1599024288213.015,"size":3870982}] 32:{"id":"22b84a3c16c57cd8","slug":"impds-complaints-allegations-and-demographics","title":"IMPD complaints","thumbnail":"b12c920a2e81aa74240f569e322da9b755e173fe6f340f96c010e862cc5c5f7b","access_level":"public","create_time":"$D2020-08-28T14:10:18.140Z","update_time":"$D2021-07-22T04:01:15.163Z","view_time":null,"first_public_time":"$D2020-09-07T09:50:27.775Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5d8465f659062b49","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":"starter_2024"},"version":3818,"publish_version":3818,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b28d2c89c25fdfd","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":null}],"members":[{"type":"individual","id":"6b28d2c89c25fdfd","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"IMPD complaints","cells":[{"id":0,"value":"header = md`# IMPD complaints\n\nThis analysis wields [public complaints data]('http://data.indy.gov/datasets/impd-complaints') from the Indianapolis Metropolitan Police Department and private data on the demographics of IMPD's uniformed officers.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"p1 = md`\n## Growth of complaints\n\nComplaints against officers at IMPD grew from 202 in 2017 to 268 in 2018, which is the highest number in recent years when including informal complaints. Without informal complaints, 2018 had 85 complaints, the second-highest number of formal complaints in recent years.\n\nFormal complaints are typically only around a third of all complaints made against the IMPD every year. Informal complaints made against IMPD are the primary type and in recent years have grown.\n\n*__How to read this chart__: This is a stacked area chart that details the total number of complaints made every year with a color distinction between formal and informal complaints. The taller a segment is, the more complaints there are in a year.*\n\n_Note: Hover of the chart to see specific numbers for each year._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2763,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"p2 = md` ## Distribution of officer complaints\nComplaints lodged against uniformed officers of the Indianapolis Metropolitan Police Department mostly come from a select few officers, according to complaints data from OpenIndy that has complaints dating between 2012 and 2020.\n\nNine percent of officers make up a quarter of the complaints, translating to 429 complaints for about 81 officers. Twenty-five percent of officers make up half of the complaints.\n\nThree percent of officers have more than five complaints against them, collectively adding up to 221 complaints - roughly 13% of all complaints.\n\nAbout 500 of the nearly 900 officers with complaints against them only have one complaint against them.\n\n*__How to read this chart__: This is a histogram that shows the total number of complaints against each officer. The taller the bar, the more complaints an officer has against them. This doesn't include officers who don't have complaints against them.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1964,"value":"viewof r1 = radio({\n // title: 'Show me the data...',\n description: 'Please select which data to show',\n options: [\n { label: 'By findings', value: 'FINDING' },\n { label: 'By allegation', value: 'ALG_CLASS' },\n ],\n value: 'FINDING'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3240,"value":"swatchesColors = swatches({color})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3395,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3321,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3530,"value":"p5 = md`\n_**How to read this chart:** This is a Sankey chart that shows how many allegations were made against officers of each race from complainants of each race. A tall rectangle indicates a higher volume of allegations made against officers of that race or allegations made by a higher volume of complainants of that race. Coming out of each rectangle are several bands, which together total all allegations made against officers of that race. A thicker band indicates a higher volume._\n\n_For example, White officers had by far the most allegations, likely because they make up most of the police force. Black complainants filed among the most allegations against white officers, with only a small portion of black complainants filing allegations toward black officers, likely because they make up a smaller part of the force._\n\n_This chart does not account for the demographical makeup as the chart above, this is a raw representation of every allegation made against the department._ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2490,"value":"p6 = md`\n# Geographical trends\n\n_**How to read this chart:** This is a heatmap density map. The darker red an area is, the more allegations that come from that area. Use the drop-down menu below to see how select allegation classes map out across Indianapolis._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2447,"value":"viewof allegChecks = select({\n title: \"Allegation classes\",\n description: \"Please pick which allegations to map.\",\n options: alleg_types,\n value: \"Use of Force\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"md`\n---\n\n---\n# END\nAnything below here is either an exploratory visualization or code to make everything above run.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md` \n---\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"alleg_types = [...new Set(geojson.features.map(d => d.properties.ALG_CLASS))].filter(d => d != null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3302,"value":"md`## Race breakdown stacked bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.schemeSpectral[series.length])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3377,"value":"seriesIndy = d3.stack()\n .keys(Object.keys(indy_demo_stacked).slice(1))\n .offset(d3.stackOffsetExpand)\n ([indy_demo_stacked])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3264,"value":"indy_demo_stacked = {\n var racesArray = {}\n races.map(d => {\n racesArray['key'] = \"Indianapolis\"\n if (d.key === 'Black or African American Alone') {\n racesArray['Black'] = d.value\n }\n else if (d.key === 'White Alone') {\n racesArray['White'] = d.value\n }\n else if (d.key === 'Two or More Races') {\n racesArray['Bi-racial'] = d.value\n }\n else if (d.key === 'Native Hawaiian & Other Pacific Islander Alone') {\n racesArray['Native Hawaiian & Other Pacific Islander'] = d.value\n }\n else if (d.key === 'Asian Alone') {\n racesArray['Asian'] = d.value\n }\n else if (d.key === 'American Indian & Alaska Native Alone') {\n racesArray['American Indian & Alaska Native'] = d.value\n }\n else if (d.key === 'Hispanic') {\n racesArray['Hispanic'] = d.value\n }\n else if (d.key === 'Some Other Race Alone') {\n racesArray['Unknown'] = d.value\n } \n })\n \n return racesArray\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3118,"value":"races = {\n var races = d3.nest()\n .key(d => d.Race)\n .rollup(d => d3.sum(d, k => +k.Population) / d3.sum(indyDemo.filter(v => v['ID Year'] === '2018').map(v => +v.Population)) * 100)\n .entries(indyDemo.filter(d => (d['ID Year'] === '2018') & (d.Ethnicity === 'Not Hispanic or Latino'))) \n \n var hispanic = {\n key: 'Hispanic',\n value: d3.sum(indyDemo.filter(d => (d['ID Year'] === '2018') & (d.Ethnicity === 'Hispanic or Latino')).map(d => +d.Population)) / d3.sum(indyDemo.filter(v => v['ID Year'] === '2018').map(v => +v.Population)) * 100\n }\n \n races.push(hispanic)\n \n return races\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3242,"value":"series = d3.stack()\n .keys(Object.keys(officer_complaints[0]).slice(1))\n .offset(d3.stackOffsetExpand)\n .order(d3.stackOrderDescending)\n (officer_complaints)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3161,"value":"totals = new Map(race_totals_raw.map(d => [d.key,d3.sum(d.values.map(k => k.value))]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3197,"value":"race_totals_raw = d3.nest()\n .key(d => d.properties.OFF_RACE)\n .key(d => d.properties.RACE)\n .rollup(d => d3.map(d, k => k.properties.LINKNUM).size())\n .entries(geojson.features)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3177,"value":"officer_complaints = officer_complaints_raw.map(function(d) {\n var merged = { key: d.key };\n // Copy each key-val pair of group.values into merged\n Object.keys(d.values).forEach(function(k,i) {\n merged[d.values[k].key] = d.values[k].value / totals.get(d.key) * 100;\n });\n \n return merged\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3156,"value":"officer_complaints_raw = d3.nest()\n .key(d => d.properties.OFF_RACE)\n .key(d => d.properties.RACE)\n .rollup((d,i) => d3.map(d, k => k.properties.LINKNUM).size())\n .entries(geojson.features)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"md`\n## Annotations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2147,"value":"added = addAnnotations()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2140,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"md`\n## Sankey\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"color1 = {\n var fromInt = d3.scaleSequential(d3.interpolateCividis)\n .domain([sankeyData.nodes.length,0])\n var range = d3.range(0,fromInt.domain()[0]+1).map(d => fromInt(d))\n const color = d3.scaleOrdinal().range(d3.schemeAccent );\n return d => color(d.category.trim() === undefined ? d.name.trim() : d.category.trim());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"color2 = {\n var fromInt = d3.scaleSequential(d3.interpolateCividis)\n .domain([sankeyData2.nodes.length,0])\n var range = d3.range(0,fromInt.domain()[0]+1).map(d => fromInt(d))\n const color = d3.scaleOrdinal().range(d3.schemeSet3 );\n return d => color(d.category === undefined ? d.name.trim() : d.category.trim());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeId(d => d.name)\n .nodeAlign(d3[`sankeyLeft`])\n .nodeWidth(12)\n .nodePadding(30)\n .extent([[1, 5], [params.svg.width - 1, params.plot.height - 5]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"sankeyData = {\n const links = sankeyDataRaw;\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({name, category: name}));\n return {nodes, links, units: \"things\"};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"sankeyDataRaw = {\n var race_to_race = d3.nest()\n .key(d => d.properties.OFF_RACE + ' ')\n .key(d => d.properties.RACE)\n .rollup(k => k.length)\n .entries(geojson.features)\n \n const newData = []\n race_to_race.map(d =>{\n d.values.map(k =>{\n var thisData = {\n 'source': d.key,\n 'target':k.key,\n 'value':k.value\n }\n newData.push(thisData)\n })\n })\n return newData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"sankeyData2 = {\n const links = sankeyDataRaw2;\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({name, category: name}));\n return {nodes, links, units: \"things\"};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"sankeyDataRaw2 = {\n var race_to_race = d3.nest()\n .key(d => d.properties.OFF_RACE +' ')\n .key(d => d.properties.FINDING)\n .rollup(k => k.length)\n .entries(geojson.features)\n \n const newData = []\n race_to_race.map(d =>{\n d.values.map(k =>{\n var thisData = {\n 'source': d.key,\n 'target':k.key,\n 'value':k.value\n }\n newData.push(thisData)\n })\n })\n return newData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"mutable params = {\n let output = {};\n \n output[\"svg\"] = {\n \"width\": width,\n \"height\": 800\n };\n \n output[\"margin\"] = {\n \"top\": 50,\n \"right\": 0,\n \"bottom\": 9,\n \"left\": 0\n };\n \n output[\"plot\"] = {\n \"x\": output[\"margin\"][\"left\"],\n \"y\": output[\"margin\"][\"top\"],\n \"width\": output[\"svg\"][\"width\"] - output[\"margin\"][\"left\"] - output[\"margin\"][\"right\"],\n \"height\": output[\"svg\"][\"height\"] - output[\"margin\"][\"top\"] - output[\"margin\"][\"bottom\"]\n };\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`\n## Mapping\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"filteredData = {\n var tempData = {\n type: \"FeatureCollection\",\n features: geojson.features.filter(d => allegChecks.includes(d.properties.ALG_CLASS))\n } \n return tempData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"center = d3.geoCentroid(tractsFeature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"bounds = d3.geoBounds(tractsFeature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"projection = d3.geoMercator()\n .translate([width / 2, height / 2])\n .fitSize([width, height], tractsFeature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"tractsFeature = topojson.feature(tractsRaw, tractsRaw.objects['2010_Census_Tracts'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"tractsRaw = FileAttachment(\"indy_tracts@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3105,"value":"indyDemo = d3.csv(await FileAttachment('Race and Ethnicity.csv').url()) // acs 2018 1-year estimates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2712,"value":"md` Demographic data on the IMPD officers as pulled from a PDF shared with the Criminal Justice Lab`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2706,"value":"demo_data = {\n var demo_data = []\n var race = ['Asian', 'Asian','Black','Black','Hispanic','Hispanic','Other','Other','White', 'White'] \n var sex = ['Female','Male','Female','Male', 'Female','Male','Female', 'Male','Female','Male']\n var officer_count = [1, 1,35, 203,8, 51,4, 18,173, 1157]\n\n officer_count.map((d,i) => {\n demo_data.push({\n race: race[i],\n sex: sex[i],\n count: officer_count[i]\n })\n }) \n return demo_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`The data formatted as a geojson.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"geojson = FileAttachment(\"geo-data@5.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`The original data as downloaded from OpenIndy.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"rawData = d3.csv(await FileAttachment('IMPD_COMPLAINTS.csv').url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n## Config\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2758,"value":"stripes = [\n { \"name\":\"redStripe\", \"color\":\"#EA8859\" },\n { \"name\":\"greenStripe\", \"color\":\"#6D909C\" }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"parseTime = d3.timeParse('%Y/%m/%d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"import {checkbox, radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3237,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"d36 = require(\"d3@6.0.0-rc.3\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\",\"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"d3_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = token;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"token = \"pk.eyJ1Ijoic2F3eWVyY2xpY2siLCJhIjoiY2s2MDZhdHlnMDRybTNlcGkxbWpzbGt2MCJ9.xyp8JSt0Pofli08LndKkPw\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3806,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3794,"value":"import { styles } from '@sawyerclick/styles'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 33:"$32:body"