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: new Date(date),
injuries: +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]
x = d3.scaleTime()
.domain(d3.extent(monthExtent, d => d.date))
.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 => d.date)
.y(d => 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 innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// 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');
// Generador de líneas
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries));
// Grupo para las líneas
const linesGroup = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
linesGroup.selectAll('circle')
.data(dataByBorough.flatMap(d => d.counts))
.join('circle')
.attr('cx', d => x(d.date))
.attr('cy', d => y(d.injuries))
.attr('r', 3)
.attr('fill', 'red');
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);
/* 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},
...
]
}
*/
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 = 0
yStacked = d3.scaleLinear()
.domain().nice()
.range()
stacked[1][0]
area = d3.area()
.x(d => )
.y1(d => )
.y0(d => )
{
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
*/
const areasGroup = svg.append('g');
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.
