Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Circles with D3

Public visualization

Viewing a saved revision (read-only)

f4f12d5c4efa4080a4a46658b68a2f49

Fork of Circles with D3

0 stars0🌍 Public
KKal
Last edited Sep 15, 2025
Created on Sep 15, 2025
Forked from Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

AI-generated description

Circles Visualization with D3.js

This project visualizes a set of connected circles using D3.js with a custom color palette.

Color Palette

Primary Colors:

  • Charcoal Gray (#36454F) - Used for primary text and headers
  • Cream (#FFFDD0) - Used for highlight boxes and secondary text backgrounds

Secondary Colors:

  • Deep Forest Green (#2F4F4F)
  • Slate Blue (#708090)

Additional Colors:

  • Rich Brown (#654321)
  • Burnt Orange (#CC5500)
  • Light Gray (#D3D3D3)
  • Beige (#F5F5DC)