100%

Fork of Teddy Bear

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This example shows a teddy bear built entirely from circles and simple paths, using D3’s data-join to bind an array of circle coordinates and radii to SVG elements. The bear includes a body, head, ears, eyes, nose, and a smile, plus curved arms drawn with path elements. It uses the `select` and `join` API from d3 to create and update the circles, while hardcoded data arrays define the bear’s geometry. The rendering is static, set against a light blue background, and the code includes no interactivity or animation.

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…

Teddy Bear

This example uses D3 to draw a teddy bear composed entirely of SVG circles, an ellipse for its nose, and rectangular hat pieces. The visualization shows a simple, stylized bear face with a body, ears, eyes, and a smile, all rendered on a pink background. The code selects a container, creates an SVG canvas sized to its dimensions, and appends each shape using D3’s selection and attribute methods, such as `append` and `attr`. The bear’s features are positioned relative to the container’s center, with a maroon hat layered on top to complete the illustration.

BBelede Rahul

88% match

Loading thumbnail…

Teddy Bear Img

This example uses D3.js to build a static teddy bear illustration from scratch, combining circles, lines, polygons, and rounded rectangles to form the character’s body, face, hat, and limbs. The code demonstrates fundamental DOM manipulation by binding arrays of geometric data to SVG elements via `selectAll().data().enter()`, setting attributes like coordinates, radii, and stroke styles directly. The visualization, rendered on a pink background with an opacity of 0.721, shows how basic shapes assemble into a recognizable figure, with explicit coordinates and styling for each part.

BBelede Rahul

86% match

Loading thumbnail…

Fork of Fork of Circles with D3

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.

BBelede Rahul

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

80% match

Loading thumbnail…

Fork of P5.js Starter

This example shows a teddy bear composed of simple geometric shapes—ellipses for the head, body, eyes, and nose, an arc for the mouth, and lines for the limbs—all positioned on a sky-blue canvas. The bear’s parts are drawn from JSON data loaded via p5.js’s `loadJSON` in the `preload` function. The visualization demonstrates how to integrate p5.js with ES modules and hot reloading in VizHub, using the p5 instance API to attach the canvas to a container and handle updates smoothly. It highlights drawing primitives like `ellipse`, `arc`, and `line` within a p5 sketch.

BBelede Rahul

80% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon bear face and body as a collection of SVG shapes. It shows how to construct a figure from primitive elements, including circles for the head, eyes, and paws; ellipses for the body and ears; rectangles for the legs; and a path for the mouth. The code selects the SVG element, sets its dimensions, and uses a centered group to position all parts relative to a common origin. Rendering relies on D3’s `select` and `append` methods to build the static visualization with explicit attributes.

Ppavankrishna441@gmail.com

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

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

78% match