Public
Edited
Feb 23, 2023
Insert cell
Insert cell
{
// Setup

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

let visWidth = width - margin.left - margin.right

let visHeight = 500 - margin.top - margin.bottom
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Scales

let x = d3.scaleLinear()
.domain(d3.extent(injuriesByMonth, d => d.date))
.range([0, visWidth]);

let y = d3.scaleLinear()
.domain([0, d3.max(injuriesByMonth, d => d.injuries)]).nice()
.range([visHeight, 0]);
// Axes
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
g.append('g')
// move x-axis down to the bottom
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
// add axis label
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', -margin.left)
.text('Collision Injuries, 2019');
// Line

let line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries));
g.append('path')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', line(injuriesByMonth));
return svg.node();
}
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