dataset
multilines = FileAttachment("multilines.png").image()
boroughToMonthToInjuries = d3.rollups(
dataset,
// para todas las colisiones que ocurren en el mismo distrito y mes,
// obtener la suma del número de personas heridas
colisiones => d3.sum(colisiones, c => c.injured),
// agrupar por distrito (borough)
d => d.borough,
// luego agrupar por mes
// d3.timeMonth redondea la fecha hacia abajo al primer día del mes
d => d3.timeMonth(d.date)
)
dataByBorough = boroughToMonthToInjuries
.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})
width
height = 500
innerWidth = width - margin.left - margin.right
innerHeight = height - margin.top - margin.bottom
monthExtent = d3.extent(dataset, d => d.date);
x = d3.scaleTime()
.domain(monthExtent)
.range([0,innerWidth ])
maxInjuries = d3.max(
dataByBorough.flatMap(d => d.counts.map(c => c.injuries))
)
y = d3.scaleLinear()
.domain([0, maxInjuries])
.nice()
.range([innerHeight, 0])
boroughs = dataByBorough.map(d => d.borough)
color = d3.scaleOrdinal()
.domain(boroughs)
.range(d3.schemeCategory10)
dataByBorough[0].counts[0]
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries))
line(dataByBorough[0].counts)
xAxis = d3.axisBottom(x)
// mostrar todo el nombre del mes
.tickFormat(d3.timeFormat('%B'))
yAxis = d3.axisLeft(y)
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const main = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// dibujar los ejes
main.append('g')
.attr('transform', `translate(0,${height - margin.top - margin.bottom})`)
.call(xAxis);
main.append('g')
.call(yAxis)
.call(g => g.select('.domain').remove())
// agregar una etiqueta al eje y
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', 5)
.attr('x', 0)
.text('Heridos por colisión, 2019');
/* Dibujar las líneas dentro del grupo linesGroup
- Crear un <path> para cada elemento en dataByBorough.
- Usar el generador de líneas para definir el atributo "d".
- Usar la escala de colores para definir el "stroke" (color de línea).
- Definir el "fill" como none (sin relleno).
- Definir el "stroke-width" en 2 (grosor de la línea).
Cuando estés definiendo los atributos con:
.attr('foo', d => ...)
recuerda que "d" es un objeto que se ve así:
{
borough: "BROOKLYN",
counts: [
{date: 2019-01-01T00:00, injuries: 968},
{date: 2019-02-01T00:00, injuries: 857},
...
]
}
*/
const linesGroup = main.append('g');
// Añadir una ruta (<path>) por cada borough
linesGroup.selectAll('path')
.data(dataByBorough)
.join('path')
.attr('d', d => line(d.counts))
.attr('stroke', d => color(d.borough))
.attr('fill', 'none')
.attr('stroke-width', 2);
return svg.node();
}
areachart = FileAttachment("areachart.png").image()
injuriesByMonthAndBorough = d3.rollup(
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
)
Array.from(injuriesByMonthAndBorough)[0]
stack = d3.stack()
.keys(boroughs)
// define how to get the value for a given borough
.value(([month, boroughtToCount], borough) => boroughtToCount.get(borough))
.order(d3.stackOrderDescending)
// .offset(d3.stackOffsetExpand)
stacked = stack(injuriesByMonthAndBorough)
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]
stacked[1][0].data
margin
width
height
x
color
injuriesByMonthAndBorough
stacked
maxTotalInjuries = d3.max(stacked.flatMap(series => series.map(d => d[1])))
yStacked = d3.scaleLinear()
.domain([0, maxTotalInjuries])
.nice()
.range([innerHeight, 0])
stacked[1][0]
area = d3.area()
.x(d => x(d.data[0]))
.y0(d => yStacked(d[0]))
.y1(d => yStacked(d[1]))
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const innerHeight = height - margin.top - margin.bottom;
const main = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B'));
const yAxis = d3.axisLeft(yStacked);
main.append('g')
.attr('transform', `translate(0,${innerHeight})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove());
main.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', 5)
.attr('x', 0)
.text('Heridos por colisión, 2019');
/* Dibujar las áreas dentro del grupo areasGroup.
Crear un <path> para cada elemento en "stacked".
- Usar el generador de áreas para definir el atributo "d".
- Usar la escala de colores para definir el "fill".
Cuando estés definiendo los atributos con:
.attr('foo', d => ...)
recuerda que "d" es el array de datos de una capa.
El *borough* correspondiente a esa capa está en d.key
*/
const areasGroup = main.append('g').lower();
areasGroup.selectAll('path')
.data(stacked)
.join('path')
.attr('d', d => area(d))
.attr('fill', d => color(d.key));
return svg.node();
}
d3 = require('d3@7')
dataset = (await d3.csv(url, crash => ({
date: d3.timeParse('%m/%d/%Y')(crash.date),
borough: crash.borough,
injured: +crash.injured,
}))).filter(d => d.borough !== '' && d.injured >= 1)
url = 'https://gist.githubusercontent.com/DanielKerrigan/d01fc44e4cee0c5c2434f464497ba260/raw/982bcefac49be9fd29887cbaead524e033f6dad4/nyc-collisions-2019-reduced.csv'
import {swatches} from "@d3/color-legend"
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.
