Viewing a saved revision (read-only)
b2b4d8db9a97472c912031eed76cd34e
Pseudo Sketch
This example renders a pseudo-sketch of an NBA dataset, plotting steals and blocks along the x and y axes while using mark size to represent defensive rebounds. The visualization uses randomly generated positions and sizes as placeholders for the actual data, with no axis labels or annotations. Built with D3.js (version 7.8.5), the code selects SVG elements and dynamically joins circles, assigning random `cx` and `cy` coordinates and radii derived from the data value using `Math.sqrt`. The rendering approach mirrors a quick sketch, prioritizing layout experimentation over polished presentation.
AI-generated descriptionA demonstration of basic D3 usage to implement the concept of Marks and Channels. Includes usage of:
- Point Marks by X, Y, Size
- Line mark varying in length
- Scaling factors
- SVG Rectangles
selection.each()- SVG Path Elements
d3.symbol()- SVG attributes
transformandfill - D3 Color Schemes
- JavaScript Modules
Part of the Constructing Visualizations Playlist.
See also blocks.roadtolarissa.com: Marks and Channels (a vanilla JavaScript version of this).