Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Distance Relay

Public visualization

Viewing a saved revision (read-only)

d5ae3e9e559f416884e851c290519e11

Distance Relay

0 stars0🌍 Public
Bbenclark.3rd@gmail.com
Last edited Mar 14, 2024
Created on Mar 14, 2024

Distance Relay is a D3.js visualization that renders three labeled distance vectors radiating from a central point, each paired with a circle whose diameter equals the vector's magnitude. The vectors use red, green, and magenta strokes, and their angles and lengths define the circle centers and radii. The code employs `d3.select`, `extent`, and SVG circle elements, with manual trigonometry converting polar coordinates to Cartesian positions. The viewBox is dynamically adjusted to fit all geometric elements, and the example invites creative theming variations like Halloween or Christmas modifications.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative