D3 Stacked Area Chart Example
This stacked area chart visualizes the 10 most frequent SFPD incident categories over a 24-hour period in December 2016. The data, loaded from a CSV file, shows hourly counts for categories such as assault, burglary, larceny_theft, and vehicle_related incidents. Using D3 v3 with SVG rendering, the chart employs a linear x-scale for hours (0–23), a linear y-scale for counts, and a category10 color palette assigned via a custom color function. Each series is stacked using d3.layout.stack, and the area generator maps the cumulative y-values to create the layered bands. The chart includes labeled axes, a title, and a caption noting that most incident categories dip in the early morning and peak during lunch and early evening hours. The visualization is styled with the Avenir font and a 960x500 pixel canvas. Data covers San Francisco Police Department incidents for December 2016 across 10 categories (e.g., assault, burglary, larceny_theft) recorded hourly. (Data source: data.csv)Here is a concise description for the gallery, based on the provided source code.
---
This block demonstrates how to create a stacked area chart using D3 v3, visualizing the frequency of San Francisco Police Department incidents over a 24-hour period in December 2016. It is based on a classic [Mike Bostock example](http://bl.ocks.org/mbostock/3885211#) and adapted to address a Stack Overflow question.
The chart breaks down the 10 most common incident categories (assault, burglary, larceny_theft, and more) across each hour of the day. The stacked layout clearly shows the ebb and flow of total incidents, highlighting a dip in the early morning and peaks during lunch and early evening hours.
The block includes:
- A D3 v3 SVG implementation of a stacked area chart, with a categorical color scale.
- Custom x-axis labels mapping numeric hours to a 12-hour clock (e.g., "12am", "1a", "12pm").
- Annotations describing the data source and an observation about daily incident patterns.
Data: Hourly counts of 10 most frequent SFPD incident categories during December 2016. This is a fork of mdml's block, addressing a StackOverflow question, and is based on Mike Bostock's stacked area chart example.
Rendering: SVG
Data: data.csv embedded
Code: d3.v3
Focus:
- Layout: stacked area chart
- Data Transformation: d3.layout.stack() to compute per-category offsets
- Visual Channels: x-axis for hour of day, y-axis for incident count, color for crime categories
- Interaction: none
- Remark: title and annotation text placed as SVG; X axis ticks show 24 hour labels; uses 'category10' color scale
Title: D3 Stacked Area Chart Example
Description: This example demonstrates how to build a stacked area chart with D3.js, using San Francisco police department incident data. The chart displays counts of ten incident categories over 24 hours on a single day. The data is loaded from a CSV file, stacked with the D3 layout, and rendered using SVG areas and axes. The chart includes a title, annotation, and custom legend labels based on the data columns.
Write the concise description for this visualization, as a single paragraph of 3-5 sentences, including: the
visualization type, the data, the mapping of visual encodings to variables, and any
interactions. Write only the paragraph, no headings or title, nothing else.
Be sure to describe and label the variables encoded by x, y, and color. Be sure to describe the chart type.
Do not write in markdown; the paragraph will be placed in a gallery. Also, do not mention the source or author of the block.
Be concise. Do not repeat "This is a ..." phrasing at the start and again later in the paragraph; read the paragraph as a whole.
Keep to 3 or fewer sentences.This D3 stacked area chart visualizes the 10 most frequent San Francisco police incident categories by hour of day, based on December 2016 data. The x-axis maps the 24 hours of the day, the y-axis shows the cumulative number of incidents, and each colored layer represents a different incident type using a categorical color scale. The chart reveals that most incident categories follow a similar daily pattern, with lows in the early morning and peaks around lunch and early evening.