dataset
multiLine
dataByBorough = d3.rollups(
dataset,
collisions => d3.sum(collisions, c => c.injured),
d => d.borough,
// d3.timeMonth rounds the date down to the first of the month
d => d3.timeMonth(d.date)
)
// Convert the nested arrays into arrays of objects.
// This isn't necessary, but I find it makes the data
// easier to work with.
.map(([borough, months]) => ({
borough: borough,
counts: months
.map(([date, injuries]) => ({date, injuries}))
.sort((a, b) => d3.ascending(a.date, b.date))
}))
margin = ({top: 30, right: 30, bottom: 20, left: 40})
visWidth = width - margin.left - margin.right
visHeight = 500 - margin.top - margin.bottom
brooklyn = dataByBorough[0].counts
dataByBorough[1]
monthExtent = d3.extent(brooklyn, d => d.date)
x = d3.scaleTime()
.domain(monthExtent)
.range([0,visWidth])
maxInjuries = d3.max(dataByBorough, bCnt => d3.max(bCnt.counts, month => month.injuries))
y = d3.scaleLinear()
.domain([0,maxInjuries]).nice()
.range([visHeight,0])
boroughs = dataByBorough.map(d => d.borough).sort()
color = d3.scaleOrdinal()
.domain(boroughs)
.range(d3.schemeTableau10)
dataByBorough[0].counts
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries))
line(dataByBorough[0].counts)
xAxis = d3.axisBottom(x)
// show the full month name in the tick marks
.tickFormat(d3.timeFormat('%B'))
yAxis = d3.axisLeft(y)
{
// set up
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})`);
// draw axes
g.append('g')
// move x-axis to the bottom
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.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')
.attr('y', -margin.top + 5)
.attr('x', -margin.left)
.text('Collision Injuries, 2019')
/* Draw the lines in linesGroup.
- Create one path for each element in dataByBorough.
- Use the line generator to set the "d" attribute.
- Use the color scale to set the "stroke" attribute.
- Set the "fill" attribute to none.
- Set the "stroke-width" attribute to to 2.
When you are setting the attributes
.attr('foo', d => ...)
remember that d is an object that looks like this:
{
borough: "BROOKLYN",
counts: [
{date: 2019-01-01T00:00, injuries: 968},
{date: 2019-02-01T00:00, injuries: 857},
...
]
}
*/
const linesGroup = g.append('g');
linesGroup.selectAll('path')
.data(dataByBorough)
.join('path')
.attr('d', d => line(d.counts))
.attr('fill','none')
.attr('stroke-width',2)
.attr('stroke', d => color(d.borough))
return svg.node();
}
injuriesByMonthAndBorough = d3.rollups(
dataset,
// get the total number of injuries in the collisions array
collisions => d3.sum(collisions, d => d.injured),
// group by month first
d => d3.timeMonth(d.date),
// then by borough
d => d.borough
)
Object.entries(injuriesByMonthAndBorough[1]).map(d => d[0])
Object.entries(injuriesByMonthAndBorough[1]).map(d => d[1])
dataByMonth = injuriesByMonthAndBorough.map(([month, counts]) => {
const boroughToCount = Object.fromEntries(counts);
boroughToCount.total = d3.sum(counts, ([borough, count]) => count);
boroughToCount.month = month;
return boroughToCount;
})
stack = d3.stack()
.keys(boroughs)
.order(d3.stackOrderDescending)
// .offset(d3.stackOffsetExpand)
stacked = stack(dataByMonth)
stacked[1][0]
myArray = {
const numbers = [1, 2, 3];
numbers.message = "hello";
return numbers;
}
myArray[0]
myArray.message
stacked[1]
stacked[1].key
stacked[1][0]
d3.max(stacked.map(index =>index.map(month => month.data.total))[0])
margin
visWidth
visHeight
x
color
maxTotalInjuries = d3.max(stacked.map(index =>index.map(month => month.data.total))[0])
yStacked = d3.scaleLinear()
.domain([0,maxTotalInjuries]).nice()
.range([visHeight,0])
stacked[0][0]
area = d3.area()
.x((d,i) => x(d.data.month))
.y1((d,i) => yStacked(d[1]))
.y0((d,i) => yStacked(d[0]))
stacked[0].key
area(stacked[0])
{
// set up
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})`);
// axes
const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B'))
const yAxis = d3.axisLeft(yStacked);
g.append('g')
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove());
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.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');
/* Draw the areas in areasGroup.
Create one path for each element in stacked.
- Use the area generator to set the "d" attribute.
- Use the color scale to set the "fill" attribute.
When you are setting the attributes
.attr('foo', d => ...)
remember that d is the data array for one layer.
The borough for that layer is in d.key
*/
const areasGroup = g.append('g');
areasGroup.selectAll('path')
.data(stacked)
.join('path')
.attr('d',d => area(d))
.attr('fill',d => color(d.key))
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.
