100%

Fork of Circles with D3

✓ Published2🌍 Public

Last edited Jan 12, 2024

Created on Jan 12, 2024

This example uses D3 to draw a stacked snowman from hardcoded SVG elements, including circles of decreasing size, a hat made of two rectangles, branch-like arms rendered as lines, and a triangular carrot nose. The background, shapes, and semi-transparent styling are defined within the main function, which selects the container to create an SVG canvas. The code specifically leverages D3’s `select`, `join`, and attribute setters for circles, rectangles, lines, and a polygon, all with fixed pixel coordinates and colors.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example builds a cheerful figure of a snowman from basic geometric shapes, using D3.js to bind data arrays to SVG circles, lines, rectangles, and polygons. The code explicitly sets coordinates, radii, and colors for each element, including the snowman’s body, eyes, and a striped hat, while also drawing a ground line and a decorative arc via d3.arc. A separate CSV file is loaded with d3.csv, and its row and column counts are displayed in a message container. The visualization relies on D3’s data joins and static SVG attributes rather than transitions or scales.

Cchamarthisreenivasvarma@gmail.com

90% match

Loading thumbnail…

Fork of Snowman

This example creates a stylized snowman with D3.js, rendered as a collection of SVG circles, rectangles, lines, and a polygon on a sky-blue background. It shows a complete character composed of three white body circles, facial features like black eyes and a red tongue, orange nose, stick arms, and a black top hat. The code uses D3’s `select`, `join`, and data-binding methods to append and style each element, with hardcoded positions and colors. All shapes are drawn directly via SVG attributes, demonstrating a simple, programmatic approach to building vector illustrations.

Ppilliprathimarani@my.unt.edu

86% match

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

85% 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

82% 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

82% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to draw a stylized dog entirely from SVG primitives, with each body part—body, head, ears, eyes, nose, and legs—created as a distinct circle, ellipse, or rectangle. The code computes all positions relative to the container’s width and height, so the dog scales with the viewport. It relies on D3’s `select` and `join` methods to append the SVG canvas and shapes, while hardcoded fill colors define the brown body, white eyes, and black nose. The result is a simple, non-interactive illustration that demonstrates manual coordinate placement and shape composition without data binding or animation.

BBelede Rahul

82% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and update SVG circles with D3.js, using a data-driven approach where each circle’s position, radius, and fill color are bound to an array of objects. The code employs D3’s `select`, `selectAll`, `data`, and `join` methods to manage DOM elements, while method chaining sets circle attributes like `cx`, `cy`, `r`, and `fill`. It also shows how to set the SVG container’s dimensions from the parent element’s client size. The visualization serves as a tutorial illustration of D3’s general update pattern, with data defined inline rather than loaded externally.

RRohithNaiduDevareddy@my.unt.edu

82% match

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

82% match