Skip to main content
100%

Pseudo-Visualization

✓ Published1🌍 Public
PParth Shroff
Last edited Dec 10, 2024
Created on Sep 26, 2024

This example shows a pseudo-visualization: a hand-crafted line chart plotting runs versus overs for two cricket data series, rendered with hard-coded coordinates rather than a scale or data transformation. Red and blue polygonal lines represent the two datasets, drawn over a light gray plot area with black axes and axis labels. The code uses D3.js APIs including `d3.line` and selections like `selectAll(...).join(...)` to create SVG path elements, with styling applied via `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`. It also imports and uses `xAxisLabel` and `yAxisLabel` from `@curran/axis-labels` to annotate the chart.

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