Public
Edited
Apr 11
<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>
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"
/>
{
const svg = d3.create('svg')
.attr('width',width)
.attr('height',height);
svg.append("path")
.attr('stroke','red')
.attr('stroke-widht',3.5)
.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))
<svg width=${width} height=${height}>
<path
d=${area(injuriesByMonth)}
fill="steelblue"
/>
</svg>
{
const svg = d3.create('svg')
.attr('width',width)
.attr('height',height);
svg.append("path")
.attr('stroke','red')
.attr('stroke-widht',3.5)
.attr('fill','pink')
.attr("d",area(injuriesByMonth))
return svg.node()
}
url = 'https://gist.githubusercontent.com/DanielKerrigan/d01fc44e4cee0c5c2434f464497ba260/raw/982bcefac49be9fd29887cbaead524e033f6dad4/nyc-collisions-2019-reduced.csv'
dataset = (await d3.csv(url, crash => ({
date: d3.timeParse('%m/%d/%Y')(crash.date),
zip: crash.zip,
borough: crash.borough,
injured: +crash.injured,
}))).filter(d => d.borough !== '' && d.injured >= 1 && d.zip !== '')
injuriesByMonth = {
const counts = d3.rollup(dataset,
collisions => d3.sum(collisions, c => c.injured),
d => d3.timeMonth(d.date).getTime());
return Array.from(counts, (([date, count]) => ({
date: new Date(date),
injuries: count
})));
}
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.
