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
monthExtent = dataByBorough[0].counts.map(d => d.date);
x = d3.scaleTime()
.domain([monthExtent[0], monthExtent[monthExtent.length - 1]])
.range([margin.left, width - margin.right]);
maxInjuries = d3.max(dataByBorough, borough =>
d3.max(borough.counts, d => d.injuries)
);
y = d3.scaleLinear()
.domain([0, maxInjuries])
.nice()
.range([height - margin.bottom, margin.top]);
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);
// dibujar los ejes
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
svg.append('g')
.attr('transform', `translate(${margin.left})`)
.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},
...
]
}
*/
dataByBorough.forEach((boroughData) => {
svg.append('path')
.datum(boroughData.counts)
.attr('fill', 'none')
.attr('stroke', color(boroughData.borough))
.attr('stroke-width', 2)
.attr('d', line);
});
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, layer => d3.max(layer, d => d[1]));
yStacked = d3.scaleLinear()
.domain([0, maxTotalInjuries])
.range([height - margin.bottom, margin.top]);
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 xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B')); // formato con nombre del mes
const yAxis = d3.axisLeft(yStacked);
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove());
svg.append('g')
.attr('transform', `translate(${margin.left})`)
.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
*/
svg.append('g')
.selectAll('path')
.data(stacked)
.join('path')
.attr('fill', d => color(d.key))
.attr('d', area);
svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top - 15})`)
.selectAll('g.legend-item')
.data(boroughs)
.join('g')
.attr('class', 'legend-item')
.attr('transform', (d, i) => `translate(${i * 150},0)`)
.each(function(d) {
d3.select(this)
.append('rect')
.attr('width', 15)
.attr('height', 15)
.attr('fill', color(d));
d3.select(this)
.append('text')
.attr('x', 16)
.attr('y', 15)
.text(d);
});
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.
