Skip to main content
SimilarExport ZIP
100%

Cat Diagram

✓ Published1🌍 Public
Ppmbhupathibalu@gmail.com
Last edited Feb 28, 2024
Created on Feb 28, 2024
Forked from Circles with D3

Using D3 select and join, this example renders a simple owl illustration with circles and lines. It builds the bird’s body, head, eyes, ears, beak, legs, tail, and wings from hard-coded coordinates relative to the container’s size, coloring the sky light blue and the owl brown on a yellow-eyed face. All shapes are created procedurally with D3’s `selectAll` and `join` methods, filtering the feature array by property type to draw either circles or lines.

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 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
82% match
Loading thumbnail…

Fork of Cat Diagram

A grey cat is drawn on a light blue background using D3.js. The code constructs the cat's body, head, eyes, ears, tail, mouth, and moustache from primitive SVG shapes—circles, lines, polygons, and paths—positioned relative to the container's dimensions. All features are hardcoded with fixed coordinates and grey or black fills, creating a static illustration rather than a data-driven visualization.

Ssaiviharireddybandi@my.unt.edu
80% 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
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
Loading thumbnail…

Fork of Circles and Rectangles with D3

This visualization renders a stylized owl character using D3.js, composed of two sets of SVG primitives: circles and rectangles positioned to form the face, eyes, ears, and body. The code uses `d3.select` and method chaining with `.selectAll`, `.data`, and `.join` to bind the hardcoded data arrays to SVG elements, setting attributes like `cx`, `cy`, `r`, and `fill` for circles and `x`, `y`, `width`, `height`, and `rx` for rectangles.

Mmacgregorm01@gmail.com
77% 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
76% match
Loading thumbnail…

Caira Circles with D3

This example uses D3.js v7 to assemble a simple geometric portrait of a cat-like face from a set of polygons and circles. The code directly renders two triangular ears using `selectAll('polygon')` with specified coordinate points, then draws a white circular head with colored ear and eye details via `selectAll('circle')`. The SVG is generated dynamically, sized to its container, and styled with a solid background, demonstrating basic shape-data binding and join patterns.

AAlexis Caira
75% 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
75% match