Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Pseudo Sketch

Public visualization

Viewing a saved revision (read-only)

b2b4d8db9a97472c912031eed76cd34e

Pseudo Sketch

0 stars0🌍 Public
JJack Hanlon
Last edited Sep 27, 2024
Created on Sep 26, 2024
Forked from Marks and Channels

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 description

A 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 transform and fill
  • 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).