Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Pseudo Viz Radar Chart

Public visualization

Viewing a saved revision (read-only)

a92447d360a24823ae20453029573627

Pseudo Viz Radar Chart

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

This pseudo visualization demonstrates a radar chart for a single data point, Singapore, with values across four categories: CEI, GCI, NCSI, and DDL. The example shows how modular code functions in `d3.lineRadial` to draw the blue radar path, `circle` elements to mark data points, and SVG `line` and `text` elements to render the gray axes and category labels. The `d3.scaleLinear` maps values from 0 to 25 across five levels. The hue function redundantly adds a red fill, showcasing the composition of overlapping shapes in a modular structure.

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