Overall Taser use, 2009-19 / Resistance Lab

Resistance Lab

Workspace

Published

A Growing Threat to Life: Taser usage by Greater Manchester Police

Edited

Jul 29, 2020

Importers

A Growing Threat to Life: Taser usage by Greater Manchester Police

Overall Taser use, 2009-19

Overall Taser use, 2018-19 Taser use per 100 officers, 2018-19 Taser use change over time Taser use against children, 2018-19 Taser use racial disproportionality, 2018-19 Taser use against people with disabilities, 2018-2019 Taser Report Bibliography Resistance Lab Defaults

chart = {

const svg = d3.create('svg')

.attr('viewBox', [ 0, 0, width + 80, height ])

.attr('style', 'width: 100%; height: auto;')

svg.append('g')

.call(xAxis)

svg.append('g')

.call(yAxis)

svg.append('g')

.selectAll("g")

.data(data.series)

.join('text')

.text((d) => d.name)

.attr('x', width - 10)

.attr('y', (d) => y(d.values.slice(-1)[0]))

.attr('dy', 2)

.attr("font-family", graph.font)

.attr("font-size", graph.fontSize)

.attr("fill", d => color(d.name))

const path = svg.append('g')

.attr('fill', 'none')

.attr('stroke-width', 1.5)

.attr('stroke-linejoin', 'round')

.attr('stroke-linecap', 'round')

.selectAll('path')

.data(data.series)

.join('path')

.attr('stroke', d => color(d.name))

.style('mix-blend-mode', 'multiply')

.attr('d', d => line(d.values))

.call(d => d.filter(d => d.name != "Total")

.style("stroke-dasharray", ("1,3")))

svg.call(hover, path)

return svg.node()

}

function hover(svg, path) {

svg

.style("position", "relative");

if ("ontouchstart" in document) svg

.style("-webkit-tap-highlight-color", "transparent")

.on("touchmove", moved)

.on("touchstart", entered)

.on("touchend", left)

else svg

.on("mousemove", moved)

.on("mouseenter", entered)

.on("mouseleave", left);

const dot = svg.append("g")

.attr("display", "none");

dot.append("circle")

.attr("r", 2.5);

dot.append("text")

.style("font-size", "10px")

.style("font-family", graph.font)

.attr("text-anchor", "middle")

.attr("y", -8);

function moved() {

d3.event.preventDefault()

const ym = y.invert(d3.event.layerY)

const xm = x.invert(d3.event.layerX)

const i1 = d3.bisectLeft(data.dates, xm, 1)

const i0 = i1 - 1

const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0

const series = data.series.reduce((a, b) => {

if (Math.abs(a.values[i] - ym) < Math.abs(b.values[i] - ym))

return a

else

return b

})

const score = series.values[i]

dot.attr("transform", `translate(${x(data.dates[i])},${y(series.values[i])})`)

dot.select("text").text(`${ series.name }: ${ score }`)

}

function entered() {

dot.attr("display", null)

}

function left() {

dot.attr("display", "none")

}

line = d3.line()

.defined(d => !isNaN(d))

.x((d, i) => x(data.dates[i]))

.y(d => y(d))

color = d3.scaleOrdinal()

.domain(data.series.map(d => d.name))

.range(colours.chart)

y = d3.scaleLinear()

.domain([ 0, d3.max(data.series, d => d3.max(d.values) + 1000) ])

.range([ height - margin.bottom, margin.top ])

yAxis = g => g

.attr('transform', `translate(${ margin.left }, 0)`)

.call(d3.axisLeft(y))

.call(g => g.select('.domain').remove())

.call(g => g.select('.tick:last-of-type text').clone()

.attr('x', 1)

.attr('text-anchor', 'start')

.attr('font-weight', 'bold')

// .text(data.y)

)

x = d3.scaleUtc()

.domain(d3.extent(data.dates))

.range([ margin.left + 5, width - margin.right ])

xAxis = g => g

.attr('transform', `translate(0, ${ height - margin.bottom })`)

.call(d3.axisBottom(x).ticks(data.dates.length).tickSizeOuter(0))

// .call(g => g.select('.domain').remove())

height = 600

margin = ({ top: 20, right: 20, bottom: 30, left: 50 })

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.

Learn more