Skip to main content
SimilarExport ZIP
100%

Fork of CAT D3.js11

✓ Published0🌍 Public
66264kusuma@gmail.com
Last edited Feb 28, 2024
Created on Feb 28, 2024
Forked from CAT D3.js!

This example shows two identical SVG cat faces drawn side by side, each built from basic geometric shapes using D3.js v7. It demonstrates fundamental DOM manipulation by programmatically appending circles, paths, and polygons to create the head, ears, eyes, nose, mouth, and whiskers. The code uses D3’s selection and append methods to construct each cat, with no external data—the shapes are hardcoded via attribute values. A flexbox container in the HTML positions the two SVGs, while a separate CSS file centers the entire layout on the page. The cats do not animate or respond to interaction; they purely illustrate static SVG construction with D3.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

CAT D3.js!

This example uses D3.js to draw a cheerful cat face in an SVG canvas, centered via a translated group. The cat features a gray circular head, triangular ears with pink inner shapes, white eyes with black pupils, a pink nose, a curved smiling mouth, and curved whiskers. All elements are constructed using basic D3 DOM manipulation methods like `append` and `attr`, demonstrating how to build and style SVG shapes from scratch.

Sshanmukhadatta4040@gmail.com
85% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example uses D3 v7 to draw a cartoon cat entirely from SVG primitives, combining circles, ellipses, lines, and paths to form the body, head, ears, eyes, nose, mouth, whiskers, and tail. Each element is created manually via `document.createElementNS` and appended to an SVG container, avoiding D3 data joins or scales. The static illustration uses fixed pixel coordinates and a gray, black, and pink palette, demonstrating direct SVG manipulation within a minimal HTML and CSS setup.

Hharichandanamone21@gmail.com
85% 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
82% 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
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
82% match
Loading thumbnail…

Fork of Cat smiley

This fork of the Cat smiley example renders a stylized feline face as a static SVG using React and D3 v7. The code defines geometric primitives—circles for the eyes, an ellipses, lines for whiskers, and arc generators for the mouth, eye highlights, and ears—composed within an SVG group centered on the canvas. D3’s `arc()` API constructs the curved mouth and ear paths, while React handles the declarative JSX structure. The visualization demonstrates a purely illustrative use of D3 shape generators rather than data mapping, with colors and stroke widths fixed in the code.

Ppavan0828
82% 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
81% 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
81% match