Skip to main content
SimilarExport ZIP
100%

Fork of Circles with D3

✓ Published0🌍 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)
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

Seven translucent circles of varied sizes and neon colors float on a pale green background. Using the D3.v7 `select` API, the visualization joins SVG circles to an array of position, radius, and fill data, setting each circle's circumference attributes and a uniform 0.7 opacity. The fixed full-viewport container resizes the drawing with the browser window.

Sskasliwal@wpi.edu
93% match
Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com
93% match
Loading thumbnail…

Fork of Circles with D3

This example is a fork of the "Circles with D3" visualization. It displays seven semi-transparent circles, each with a unique color and position, rendered on a light green background. The code uses the D3.js library, specifically the `select` and `join` functions, to create and update SVG elements. The circles' properties—center coordinates, radius, and fill color—are defined in a static data array and applied via chained attribute methods, resulting in a static, colorful composition.

AAustin Tanksley
93% match
Loading thumbnail…

Fork of Circles with D3

A colorful collection of seven overlapping circles with varying radii and fill colors rendered as SVG. The visualization demonstrates D3's data join pattern, binding an array of circle objects to SVG circle elements with chained attribute setters for position, radius, color, and opacity. The code imports `select` from `d3` and uses `.selectAll()`, `.data()`, `.join()`, and `.attr()` methods to create the static composition from hardcoded data.

Bbepnye@gmail.com
93% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render a static collection of circles on an SVG canvas. Seven circles with varying positions, radii, and bright colors are drawn against a light green background, with a semi-transparent opacity that creates overlapping color effects. The code demonstrates the D3 data join pattern and method chaining by binding an array of circle objects to SVG elements. The visualization is created using d3.select, d3.selectAll, and the .attr method to set circle coordinates, radius, and fill properties.

Aauer.major7@gmail.com
93% match
Loading thumbnail…

Fork of Circles with D3

Seven semi-transparent circles in vivid colors, such as pink, purple, and green, are positioned at fixed coordinates on a light gray background. The visualization uses D3.js v7 to render an SVG canvas that fills its container, with the `select` API joining circle elements to a static dataset containing x, y, radius, and fill properties. The circles are drawn with an opacity of 0.7, and the background color is configurable through the `viz` function’s options.

RRyan Offstein
93% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render a static collection of seven colored circles on an SVG canvas. The code employs the D3 General Update Pattern with `selectAll`, `data`, and `join` to bind an array of objects containing x, y, radius, and fill properties to circle elements. A light green background is applied via inline styles, and each circle uses a semi-transparent opacity value. The visualization demonstrates dynamic attribute assignment through arrow functions and method chaining within a `main` export function.

Bbharathavulapati@gmail.com
93% match
Loading thumbnail…

Fork of Circles with D3

Seven colorful circles of varying sizes and positions float on a light green background. The circles feature vivid hex colors and a uniform 70.8% opacity. The visualization uses D3.js 7.8.5 with the general update pattern via `d3.select`, `.selectAll`, `.data`, and `.join` to create and bind the SVG elements based on an array of circle objects.

Hh.harrycoding@gmail.com
92% match