Skip to main content
100%

Fork of Pseudo Line Chart

✓ Published0🌍 Public
Nnitinramagiri1@gmail.com
Last edited Sep 27, 2024
Created on Sep 27, 2024
Forked from Pseudo Line Chart

This example shows two line charts comparing unemployment rate over time, with a pink line and a blue line plotted from hardcoded data arrays. The rendering relies on D3’s `line` generator to convert data points into SVG path strings, which are then drawn as `path` elements with `fill`, `stroke`, and `stroke-width` attributes. Axis labels for "Unemployment Rate" and "Year" are added as SVG text elements, rotated for the vertical axis. The code deliberately omits scales, using raw coordinates and fixed margins instead of an axis scale or ticks.

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

MIT Licensed

Similar vizzes