100%

Fork of Fork of Circles with D3

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This example shows a simple cartoon dog built entirely from basic geometric shapes, with a brown body, head, ears, legs, and a face featuring eyes and a nose. It demonstrates how to draw scalable vector graphics using D3.js selections and SVG elements. The code in index.js uses the `select` function and `append` methods to create circles, ellipses, and rectangles, positioning them relative to the container’s width and height. The visualization is rendered in a Svelte component, with a static gray background and no interactive behavior, serving as a foundational template for creative shape-based drawing.

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

Svelte

Here's a video on how to get started with Svelte as well!

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Circles with D3

This example draws a static cartoon cat using D3.js and SVG within a Svelte component. The code constructs the animal entirely from primitive shapes—ellipses for the body, circles for eyes, polygons for ears, and paths for the mouth and tail—hardcoded to a 400x400 canvas. It uses D3’s selection and append methods to build each element, with the `drawAnimal` function exported for reuse. The rendering is purely declarative SVG, with no data binding or interactions, serving as a simple template for creative modification.

BBelede Rahul

91% match

Loading thumbnail…

Fork of Circles with D3

BBelede Rahul

91% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple dog face built from basic SVG shapes, rendered in a 200x200 viewport using D3.js v5. The code draws a brown face circle, two black eye circles, a pink nose, and a curved mouth path generated with the `d3.arc()` API. Each element is appended directly to the SVG container with explicit `cx`, `cy`, and `r` attributes. The visualization demonstrates foundational D3 selection and attribute-setting methods for static, data-free graphics. The mouth uses an arc path transformed into position, while the overall composition relies on hardcoded coordinates rather than scales or data joins.

Ppeddubalaji@gmail.com

90% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple cat illustration built from circles, lines, and a path, rendered on a pink background using D3. The visualization uses a static dataset of geometric features—such as the body, head, eyes, ears, nose, smiling mouth, moustache, legs, tail, and arms—each defined by coordinates and styling properties. The code selects the container, appends an SVG element, and binds the data using `selectAll` with `join` to draw circles for rounded parts, lines for limbs and tail, and a path for the mouth. This approach demonstrates how D3’s data-joining methods can compose a recognizable figure from primitive shapes without any animation or interaction.

Ppmbhupathibalu@gmail.com

88% match

Loading thumbnail…

Fork of Fork of Circles with D3_check

A simple gray cat built from D3.js-drawn circles and lines sits centered on a pink canvas, with its body, head, ears, eyes, and nose formed by circle elements and its legs and tail as line elements. The example uses D3’s selection and join methods to bind static position data directly to SVG shapes, avoiding animation or interactivity. While the code’s data is hard-coded, the structure invites creative theming—such as Halloween or Christmas—by swapping the color palette or adding props, as suggested in the accompanying challenge notes.

Kkoteswararao614@gmail.com

86% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and dynamically manipulate SVG shapes using D3.js. It builds an SVG element sized to its container and renders a collection of circles, each positioned and styled through data-bound attributes like `cx`, `cy`, `r`, and `fill`. The code leverages core D3 APIs including `select`, `selectAll`, and `join` to implement the General Update Pattern for creating and updating elements. A static JavaScript array of objects supplies the circle properties, showcasing method chaining for concise attribute assignment.

DDouglas Devine

85% match

Loading thumbnail…

Fork of Circles with D3

This example shows a playful array of six semi-transparent, brightly colored circles scattered across a pale green background. The visualization uses D3.js (version 7) to bind static data points—each specifying x and y coordinates, a radius, and a fill color—to SVG circle elements. The code leverages the `select` and `join` pattern to create the circles, setting their attributes directly from the bound data. The rendered result is a simple, colorful scatter-plot-like composition, demonstrating basic data binding and SVG manipulation with D3 in a Svelte environment.

Mmuslih_k_diy

84% match