Published
Edited
Jul 29, 2020
Importers
A Growing Threat to Life: Taser usage by Greater Manchester PoliceOverall Taser use, 2009-19Overall Taser use, 2018-19Taser use per 100 officers, 2018-19Taser use change over timeTaser use against children, 2018-19Taser use against people with disabilities, 2018-2019Taser Report BibliographyResistance Lab Defaults
Taser use racial disproportionality, 2018-19
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// The bars themselves
svg
.append("g")
.selectAll("rect")
.data(racismLeaderboard)
.join("rect")
// Each indivdual bar
.attr("fill", colours.primary)
.attr("x", d => x(0))
.attr("y", (d, i) => y(d.force))
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth())
// National average line
svg
.append("line")
.attr("x1", x(1))
.attr("y1", graph.margin.top + 2)
.attr("x2", x(1))
.attr("y2", height)
.style("stroke-width", 1)
.style("stroke-dasharray", ("1,2"))
.style("stroke", colours.primary50)
.style("fill", "none")
// "1x" text
svg
.append("text")
.attr("x", x(1) + 5)
.attr("y", height)
.text("1x")
.attr("text-anchor", "start")
.attr("font-family", graph.font)
.attr("font-size", graph.fontSize)
.style("fill", "black")
// Text - total
svg
.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.attr("font-family", graph.font)
.attr("font-size", graph.fontSize)
.selectAll("text")
.data(racismLeaderboard.sort((a,b) => b.value - a.value))
.join("text")
.attr("x", d => x(d.value))
.attr("y", (d, i) => y(d.force) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("dx", -5)
.text(d => d3.format(".1f")(d.value) + "x")
.call(text => text.filter(d => d.Total > 40)
.text(d => d3.format(".1f")(d.value))
.attr("x", width - 10)
.attr("fill", "white")
.attr("text-anchor", "end"));
// Draw axes
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node()
}
x = d3
.scaleLinear()
.domain([0, d3.max(racismLeaderboard, d => d.value)])
.range([graph.margin.left, width - graph.margin.right])
y = d3
.scaleBand()
.domain(racismLeaderboard.map(d => d.force))
.rangeRound([graph.margin.top, height - graph.margin.bottom])
.padding(0.1)
xAxis = g =>
g
.attr("transform", `translate(0,${graph.margin.top})`)
.call(d3.axisTop(x).ticks(width / 80, racismLeaderboard.format))
.call(g => g.select(".domain").remove())
yAxis = g =>
g
.attr("transform", `translate(${graph.margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.attr("font-size", graph.fontSize)
height = Math.ceil((racismLeaderboard.length + 0.1) * graph.barHeight) + graph.margin.top + graph.margin.bottom + 10
// Example usage
getEthnicityDifferenceStat("Greater Manchester", "White", "Black (or Black British)")
racismLeaderboard = policeDemos.map((f) => {
return {
force: f['Police force'],
value: getEthnicityDifferenceStat(f['Police force'], eth1, eth2)
}
}).filter((f) => (f.value != 0))
.sort((a,b) => b.value - a.value)
useByEthnicity = (force,ethnicity)=>{
return taserByEthnicity.filter(ob=>ob["Police Force"]==force)
.find(ob=>ob["variable"]==ethnicity).value
}
useByEthnicity("Greater Manchester", "Black (or Black British)")
pcByEthnicity = (force,ethnicity)=>{
let total = taserUse(force,"2019",false).Total
return 100*useByEthnicity(force,ethnicity)/total
}
pcByEthnicity("Greater Manchester", "Black (or Black British)")
import {forces, taserUse, officerCounts, d3, colours, graph} from "@resistancelab/resistance-lab-defaults"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
