Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Pseudo Visualization of Radar Chart

Public visualization

Viewing a saved revision (read-only)

822ad92098154ab795f2eaa3e02ed477

Pseudo Visualization of Radar Chart

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

This example presents a pseudo-visualization of a radar chart for Singapore across four categories: CEI, GCI, NCSI, and DDL. The code builds a radial grid with axes and category labels, then plots a single data point on each axis as an orange circle. The path connecting these points is filled in blue, though the fill and stroke are subsequently overridden to red via the `hue` module, demonstrating a deliberate layering of drawing operations. It uses D3’s `scaleLinear`, `lineRadial`, and SVG primitives like `path` and `circle`.

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