Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Marks and Channels

Public visualization

Viewing a saved revision (read-only)

f18c15e4301748cd897498fe8c103925

Fork of Marks and Channels

0 stars0🌍 Public
Ccrijos
Last edited Oct 7, 2024
Created on Oct 7, 2024
Forked from Marks and Channels

This visualization demonstrates the core concepts of marks and channels by rendering the same dataset—comprising values for Singapore across four categories—using distinct visual encodings for each channel. It shows how point marks can encode data through x-position, y-position, size, and hue, while line length and shape are used for additional attributes. Built with D3.js version 7, the example employs JavaScript modules for each channel, using `d3.scaleLinear` for scaling, `d3.lineRadial` for radar lines, and SVG elements like circles, rectangles, and paths. The code also uses `selection.each()` and `d3.schemeCategory10` for color, with a radar chart layout for the final composite.

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).