Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

MZ Line Chart with D3

Public visualization

Viewing a saved revision (read-only)

4a601fc3b3f04d21b68e14e2b64d38fa

MZ Line Chart with D3

0 stars0🌍 Public
Mmzujewski@wpi.edu
Last edited Sep 26, 2024
Created on Sep 26, 2024

This chart shows movie release counts for five genres from 2000 to 2020 using a stacked bar chart with overlaid trend lines. The stacked bars represent the total number of movies per year, while each genre’s trend line tracks its annual fluctuations. The visualization uses D3’s `d3.stack()` to compute the bar layers, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.line()` for the trend lines. Fake data is rendered as SVG elements within the browser.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations