Skip to main content
SimilarExport ZIP
100%

Circles with D3

✓ Published445🌍 Public
CCurran Kelleher
Last edited Aug 4, 2025
Created on Jan 9, 2024

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

AI-generated description

Creating Circles with D3

This project demonstrates how to create colorful circles using D3.js with modern ES6 modules and HTML import maps. Creating circles with D3! To use code like this in various frameworks or vanilla HTML, see d3-rosetta.

Full Playlist: Constructing Visualizations

What We'll Build

We will create an SVG element containing multiple colorful circles with varying sizes and positions. The visualization demonstrates key D3 concepts including data binding, the General Update Pattern, method chaining, and dynamic styling. Each circle is positioned using data-driven coordinates and styled with vibrant colors and transparency effects.

Project Structure

Files Overview

  • index.html - The main HTML file that sets up the page structure, import maps, and basic styling
  • index.js - The entry point that selects the container element and initializes the visualization
  • viz.js - Contains the main visualization logic using D3's data binding and SVG rendering
  • README.md - This documentation file explaining the project and D3 concepts

Understanding Import Maps

This project leverages modern HTML Import Maps to load D3.js directly from a CDN without requiring a complex build process or bundler. Import maps provide a clean way to specify module dependencies in the browser.

What are Import Maps?

Import maps are a web standard that allows you to control how module specifiers are resolved when importing ES6 modules. Instead of writing:

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D3

This example displays a static collection of eight colored circles of varying sizes and positions on an SVG canvas. Each circle’s radius, stroke color, stroke width, and fill color are defined in a JavaScript array and rendered using D3’s data join with `selectAll`, `data`, `enter`, and `append`. The visualization demonstrates basic SVG shape creation with D3 v7, using attributes like `cx`, `cy`, `r`, `stroke`, and `fill` to map data properties directly to visual elements.

BBismark Kofi Owusu Sarfo
93% match
Loading thumbnail…

Circles with D3

This example displays a scattered arrangement of colorful circles of varying sizes and positions across an SVG canvas. Each circle is rendered with a distinct fill color, creating a visually playful composition. The code defines a static dataset of circle properties and uses D3 v7’s data join pattern with `selectAll`, `data`, and `join('circle')` to bind and append SVG circle elements. Attributes like `cx`, `cy`, `r`, and `fill` are set directly from the data object.

CCurran Kelleher
93% match
Loading thumbnail…

Circles with D3

This example displays seven translucent circles at fixed positions and sizes across a pale green canvas, each filled with a distinct neon color. The visualization demonstrates how D3’s `select` and `join` API can declaratively create and style SVG circle elements from a static array of coordinates, radii, and hex fill values. Opacity is set uniformly to 0.708 via an attribute, with the rendering driven by D3 7.8.5.

Iinskoe@central.edu
92% match
Loading thumbnail…

Circles with D3

This example displays seven colored circles, each with distinct positions, radii, and fill colors, laid out on a light green background. The visualization uses the D3.js library within a data-driven approach, binding circle elements to an array of data objects. It demonstrates D3's method chaining and data join pattern, where the `select`, `selectAll`, `data`, and `join` methods manage the SVG creation and attribute updates, including `cx`, `cy`, `r`, and `fill`.

MMorris Muriithi
92% match
Loading thumbnail…

Circles with D3

This example demonstrates how to draw a set of circles on an SVG canvas using D3.js version 7. Each circle is positioned with explicit x, y coordinates, has a defined radius, and is filled with a distinct color, resulting in an abstract layered composition on a light green background. The code uses D3’s `select` function and the data join pattern via `selectAll`, `data`, and `join` to bind an array of circle objects to SVG elements, then applies attributes like `cx`, `cy`, `r`, and `fill` through method chaining. The visualization is rendered dynamically by measuring the container’s dimensions at runtime, and the example includes a setup for hot reloading in a development environment.

Nnaveenkumar.m@kpriet.ac.in
92% match
Loading thumbnail…

basic circles d3

This example shows a simple D3.js visualization of seven semi-transparent circles in different colors and sizes on a light green background. The code demonstrates the D3 general update pattern and method chaining by selecting an SVG element, binding an array of circle data objects, and using the `join()` method to create circle elements. Each circle’s position, radius, and fill color are set via attribute functions. The example uses `d3.select` and `selectAll` with a hot-reload-friendly structure intended for tutorial purposes.

GGorka Ribera
91% match
Loading thumbnail…

Fork of Circles with D3

This example showcases seven colorful circles placed across a light green SVG canvas, each with distinct positions, radii, and fill colors drawn from a hardcoded data array. The visualization demonstrates D3’s data binding and the General Update Pattern through chained method calls, using `selectAll`, `data`, and `join` to create circle elements. Each circle’s `cx`, `cy`, `r`, and `fill` attributes are set from the bound data objects, with a uniform opacity applied to all shapes.

Yyyan7701@gmail.com
91% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render seven colored circles of varying sizes and positions on a dynamically sized SVG canvas. The visualization demonstrates the D3 data join pattern, binding an array of objects containing x, y, radius, and fill properties to circle elements with a uniform opacity. The code employs `select`, `join`, and `.attr` methods to create and style the shapes, showcasing method chaining and the General Update Pattern for dynamic SVG rendering.

JJohn J. Pinckney
91% match