The avatar for @can-wang-ws
Can Wang's Workspace
Public
Edited
Dec 14, 2023
Fork of Q1
1
Insert cell
Insert cell
shots = {
const scsv = d3.dsvFormat(",") // Important to define the separator of your CSV file
return scsv.parse(await FileAttachment('shootings.csv').text())
}
Insert cell
Inputs.table(shots)
Insert cell
Insert cell
Insert cell
shots
select distinct armed, count(*) as number
from shots
group by armed
order by number desc
Insert cell
Insert cell
yearStr = year.toString() + "%"
Insert cell
shots
select distinct gender, count(*) as number
from shots where date like ${yearStr}
group by gender
order by number desc
Insert cell
shots
select distinct race as name, count(*) as value
from shots where date like ${yearStr}
group by race
order by value desc
Insert cell
Insert cell
AgeYear
Insert cell
Insert cell
shots
select distinct signs_of_mental_illness, count(*) as number
from shots where date like ${yearStr}
group by signs_of_mental_illness
order by number desc
Insert cell
shots
select distinct body_camera, count(*) as number
from shots where date like ${yearStr}
group by body_camera
order by number desc
Insert cell
Insert cell
shots
select distinct threat_level as name, count(*) as value
from shots where date like ${yearStr}
group by threat_level
order by value desc
Insert cell
Insert cell
shots
select distinct flee as name, count(*) as value
from shots where date like ${yearStr}
group by flee
order by value desc
Insert cell
shots
select distinct arms_category as name, count(*) as value
from shots where date like ${yearStr}
group by arms_category
order by value desc
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// create and select an svg element that is the size of the bars plus margins
const svg = d3.create('svg')
.attr('width', 400)
.attr('height', 400);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(100,100)`);
// bind our data to lines
g.selectAll('rect')
.data(AgeYear)
.join('rect')
// countryScale sets the x position instead of y
.attr('x', d => ageScaleBand(d.age_range))
.attr('width', d => ageScaleBand.bandwidth())
// populationScale gives y position
.attr('y', d => ageScale(d.number))
.attr('height', d => 100 - ageScale(d.number))
.attr('fill', 'steelblue');
// add a group for the y-axis
g.append('g')
.call(yAxis);
// add a group for the x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, 100)`)
.call(d3.axisBottom(ageScaleBand))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-55)")
// add a label for the x-axis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', 100 / 2)
.attr('y', 40)
.text("age range");
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = shots
Insert cell

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