Skip to main content
SimilarExport ZIP
100%

Coding Circles

✓ Published0🌍 Public
Llrsavoie@wpi.edu
Last edited Jan 12, 2024
Created on Jan 10, 2024
Forked from Circles with D3

This example displays a simple tree scene composed of a brown trunk, a green circular canopy, and a green ground area, all drawn using D3.js. The visualization builds the scene by joining SVG elements—rectangles, circles, and lines—to a data array, using D3's `select` and `join` API. It sets positions, sizes, and fill colors directly from JavaScript objects, with the tree's branches and canopy sized relative to the container's dimensions. The code is structured as a call to `main` with a container, clearing existing SVG content before rendering each shape.

AI-generated description

Creating circles with D3.

<iframe width="560" height="315" src="https://www.youtube.com/embed/4DEx2M0auMc?si=BYYkU4yT6msucT9H" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> # Challenge
  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render three stylized Christmas trees, each composed of overlaid green circles for layers and a brown rectangle for the trunk. The code defines a `treeData` array with color and horizontal position for each tree, and uses helper functions to generate the circles and base. It relies on D3’s `select` and SVG append methods to build the static vector scene. No interaction or animation is present.

Ppadmeshnaik22@gmail.com
84% match
Loading thumbnail…

Fork of Circles with D3

This visualization displays a simple Christmas tree built from three red, blue, and green circles representing layered tree sections, alongside a brown rectangle for the base, all set against a light blue background. The code uses d3’s selection API, including `selectAll` and `join`, to render the SVG shapes. It employs the `d3` library to dynamically compute circle and rectangle positions based on the container’s dimensions, with the tree’s data defined in an array of objects. The example is based on a forked template, offering a creative, holiday-themed modification.

AAkanksha
81% match
Loading thumbnail…

CirclesWithD3-IanCoolidge

Three Christmas trees built from overlapping green circles stand on brown rectangular bases across a light blue background. The example uses D3.js version 7’s `select` and data joins to bind circle and rect elements to arrays of tree layer and base objects, with a `makeTree` function duplicating the initial centered tree into three positions. The rendering approach sets SVG attributes like `cx`, `cy`, `r`, and `fill` directly from the data, demonstrating a straightforward declarative pattern for generating repeated geometric shapes.

IIan Coolidge
79% match
Loading thumbnail…

Fork of Circles with D3

This example visualizes a simple animated ecosystem of birds and trees using the Svelte framework and D3.js. It shows three white birds with triangular beaks and brown trunks with green foliage, all moving across a light background. The rendering approach relies on custom `Bird` and `Tree` classes within `index.js`, updating positions each frame with cosine and sine trigonometry. D3 is included as a dependency, though the core animation logic uses Svelte's base ecosystem and Canvas drawing commands.

NNanditha Reddy
78% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render three semi-transparent circles on a soft green SVG background. It shows how to use D3’s method chaining and the `select`, `selectAll`, and `join` functions to create and update SVG elements from a hard-coded data array. The code measures the container’s dimensions via `clientWidth` and `clientHeight` to size the canvas, then sets each circle’s position, radius, and fill color. It demonstrates the general update pattern for idempotent rendering.

Ccaowlhs@163.com
77% match
Loading thumbnail…

Fork of Circles with D3

This example shows a collection of overlapping circles arranged on a light green background, each with distinct positions, radii, and vivid fill colors. It demonstrates how D3’s data join and method chaining bind an array of circle objects to SVG elements, setting their center coordinates, radius, and fill via attribute accessors. The visualization uses the `select`, `selectAll`, `data`, and `join` methods to manage the DOM, with a fixed dataset defined in code rather than loaded from an external source.

HHagar E
77% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how D3.js creates and positions multiple circles within an SVG, each with distinct coordinates, radii, and fill colors. The visualization shows a data-driven approach where circle properties are defined in an array of objects and bound to SVG elements using D3’s `selectAll`, `data`, and `join` methods. The code sets the SVG’s dimensions based on the container’s size, then styles the background with a light green tint. Each circle’s position, size, and color come directly from the data, with an opacity value applied to all elements. The implementation relies on method chaining and the general update pattern to handle rendering efficiently.

RRohithNaiduDevareddy@my.unt.edu
77% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how D3.js creates and positions multiple circles within an SVG, each with distinct coordinates, radii, and fill colors. The visualization shows a data-driven approach where circle properties are defined in an array of objects and bound to SVG elements using D3’s `selectAll`, `data`, and `join` methods. The code sets the SVG’s dimensions based on the container’s size, then styles the background with a light green tint. Each circle’s position, size, and color come directly from the data, with an opacity value applied to all elements. The implementation relies on method chaining and the general update pattern to handle rendering efficiently.

RRohithNaiduDevareddy@my.unt.edu
77% match