Image

100%

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This example uses D3.js v7 to draw a simple cartoon dog from geometric shapes defined in an external JSON file. The visualization shows a brown dog with a circular body and head, floppy elliptical ears, white eyes, a black nose, and a curved mouth line, all positioned within a 400x400 SVG canvas. The code loads the shape coordinates and colors from the JSON data using `d3.json`, then appends SVG elements—including `circle`, `ellipse`, and `path`—to render each part of the dog. The mouth is drawn as a path with a stroke, while the remaining features use filled shapes, demonstrating a straightforward declarative approach to building vector graphics with data-driven attributes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dog's Image

A cartoon dog is drawn on a light green background with grass, created entirely through D3.js DOM manipulation. The example builds SVG elements—including circles for the head, body, and eyes, ellipses for ears, rectangles for legs, and paths for the tail and mouth—using plain JavaScript `document.createElementNS` and `setAttribute` calls, without any data binding or transitions. The dog is static, showing a smiling face with a small nose and curved mouth. This demonstrates how to construct a vector illustration from scratch by directly manipulating the DOM.

BBelede Rahul

85% match

Loading thumbnail…

Dog Image

This example renders a stylized dog face in a web page using React and D3.js, drawing the entire illustration with SVG elements. The visualization shows a silver elliptical head with brown ears, eyes, a black nose, whiskers, and a curved mouth, all composed of geometric primitives and arc paths. The code constructs the mouth, eyes, and ears using D3’s `arc()` generator, while React manages the component structure and rendering. The page loads React 17 and D3 v7 from CDNs, and the final image is produced entirely via SVG, with no external data—the design is hand-coded rather than data-driven.

BBelede Rahul

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

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

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

77% match

Loading thumbnail…

Fork of Smiely Cat Fork

This example uses D3 v7 to draw a simple dog shape in an SVG canvas. It renders a brown head and body as two overlapping circles, adds black eyes, and a curved mouth path. The code builds the graphic by appending SVG elements—circles for the face, eyes, and body, and a path for the smile—directly to the page. The data is hardcoded within the script, with no external dataset or interactive behavior. The rendering relies solely on SVG attributes like cx, cy, r, and d, demonstrating basic shape composition with D3’s selection and append methods.

BBelede Rahul

76% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a cartoon face from multiple shapes, including eyes, a nose, and a mouth, all rendered as SVG elements. The face is composed of simple geometric forms placed on a 960×500 canvas, with positions and sizes likely derived from the included CSV data file. The visualization demonstrates fundamental D3 selections, scales, and shape generators while showcasing how data can drive the layout of a playful, recognizable composition. The page loads D3 v5.9.2 from a CDN and applies CSS styling for a clean, full-bleed display.

LLukman Edwindra

76% match

Loading thumbnail…

11650230

A smiling animal face built from D3.js SVG shapes demonstrates basic DOM manipulation. The example constructs the figure using circles and lines for features like eyes, pupils, ears, whiskers, and a nose, all positioned with the `attr` method. It uses `d3.select` to append elements to an SVG canvas. No data or interactivity is present; the sketch is static, showing only how D3 can create and style primitive vector shapes.

Ppethavenu

75% match