Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Line Chart Visualization for Each Match

Public visualization

Viewing a saved revision (read-only)

4deec028204c430cb424d97ef10ba0dc

Line Chart Visualization for Each Match

0 stars0🌍 Public
PParth Shroff
Last edited Dec 12, 2024
Created on Dec 10, 2024

This interactive visualization displays line charts for cricket matches, showing runs scored per over across each match in a selected city. Users choose a city and match details from dropdown menus, and the chart updates accordingly with scaled axes and a gray background. The code uses D3’s `select`, `line`, and `scaleLinear` APIs to generate the lines and axes, with data from an imported dataset. Axis labels are added via the `@curran/axis-labels` library, and the visualization dynamically filters and redraws the chart based on user selections.

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