Skip to main content
SimilarExport ZIP
100%

Fork of Cat Diagram

✓ Published0🌍 Public
Ssaiviharireddybandi@my.unt.edu
Last edited Feb 28, 2024
Created on Feb 28, 2024
Forked from 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.

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

Fork of CAT D3.js11

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.

66264kusuma@gmail.com
82% 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
81% match
Loading thumbnail…

Fork of cat

This React and D3.js visualization displays a cartoon cat face rendered as an SVG, with a separate text section showing metadata about a CSV file it fetches. The graphic uses primitive shapes like circles and ellipses to form the cat’s hair, ears, eyes, glasses, cheeks, and a mustache, with a mouth generated by the `d3.arc()` path generator. The page opens by loading car data from a GitHub Gist, computing the row and column counts, and displaying the file size, row count, and column count in plain text above the animated SVG drawing.

AAkhil Charugulla
81% match
Loading thumbnail…

Fork of Fork of Fork of Cat smiley

This interactive visualization, built with React and D3.js v7, displays a grid of five stylized cat faces, each with distinct body, eye, and ear colors. It shows how D3's `arc` function defines the geometric shapes for the eyes, mouth, and ears within an SVG canvas. The code maps over an array of attributes to generate each cat component, using transformations for positioning and rotation, and renders the final composition via ReactDOM.

Cchilukuritagore1427@gmail.com
81% match