<svg width="190" height="160">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
injuriesByMonth
margin = ({top: 30, right: 30, bottom: 20, left: 40})
width
height = 500
dateExtent = d3.extent(injuriesByMonth, d => d.date)
x = d3.scaleTime()
.domain(dateExtent)
.range([margin.left, width - margin.right])
maxInjuries = d3.max(injuriesByMonth, d => d.injuries)
y = d3.scaleLinear()
.domain([0, maxInjuries]).nice()
.range([height - margin.bottom, margin.top]);
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries))
line(injuriesByMonth)
<svg width=${width} height=${height}>
<path
d=${line(injuriesByMonth)}
fill="none"
stroke="steelblue"
/>
</svg>
{
// Setup
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Create the axes
const xAxis = d3.axisBottom(x)
// change the format of the tick marks to only show month names
.tickFormat(d3.timeFormat('%B'));
svg.append('g')
// move x-axis down to the bottom
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft(y);
svg.append('g')
// move y-axis to the left to account for left margin
.attr('transform', `translate(${margin.left})`)
.call(yAxis)
.call(g => g.select('.domain').remove())
// add axis label
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.text('Collision Injuries, 2019');
// Draw the line
// We are only drawing one line, so we can append one path
svg.append('path')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', line(injuriesByMonth));
return svg.node();
}
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.injuries))
.y0(d => y(0))
area(injuriesByMonth)
<svg width=${width} height=${height}>
<path
d=${area(injuriesByMonth)}
fill="steelblue"
/>
</svg>
{
// Setup
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Create the axes
const xAxis = d3.axisBottom(x)
// change the format of the tick marks to only show month names
.tickFormat(d3.timeFormat('%B'));
svg.append('g')
// move x-axis down to the bottom
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft(y);
svg.append('g')
// move y-axis to the left to account for left margin
.attr('transform', `translate(${margin.left})`)
.call(yAxis)
.call(g => g.select('.domain').remove())
// add axis label
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.text('Collision Injuries, 2019');
// Draw the area
// we are only drawing one line, so we can append one path
svg.append('path')
.attr('stroke-width', 2)
.attr('fill', 'steelblue')
.attr('d', area(injuriesByMonth));
return svg.node();
}
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.
