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)

ff52ed79c0e64f9e8cafc97d35769ee5

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