Skip to main content
100%

Gráfico de linea

✓ Published0🌍 Public
Ffcordon@pin.upv.es
Last edited Feb 9, 2025
Created on Feb 9, 2025

This visualization demonstrates a simple line chart constructed using SVG path elements, plotting six data points with coordinates defined by the `x` and `y` properties. The rendering uses the `d3.line` generator to produce the path data, which is then applied to an SVG `<path>` element with a thick black stroke, rounded line caps, and rounded line joins. The code leverages the D3.js library's `select` and `line` functions, and the chart is drawn within an SVG container that adapts to the available width and height. The visualization highlights the core mechanics of SVG path rendering and D3's line generator without any axes or labels.

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