Skip to main content
100%

Line Chart: Country Median Salary

✓ Published0🌍 Public
Sste.jendritz@gmail.com
Last edited Oct 29, 2024
Created on Sep 27, 2024

This example shows a line chart depicting country median salary trends, with a hand-drawn appearance achieved through thick, rounded SVG path strokes. The visualization uses D3.js’s `line` generator to create a path from hardcoded data points mapping x-y coordinates. Vanilla SVG attributes—`fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`—are set on a `path` element to produce the bold, simple design. Data originates from the `cost-of-living-by-country-top-10-rev1` dataset, though the specific values are manually arrayed in the code.

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