🌍 Public
Viewing a saved revision (read-only)
9008a7b3fc784b23a2d9867c33fee62e
Fork of 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 descriptionAn 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: