Pseudo-Visualization
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 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: