100%

ICE4-DORAEMON

✓ Published1🌍 Public

TTejasriKari@my.unt.edu

Last edited Feb 24, 2025

Created on Feb 22, 2025

This example uses D3.js v7 to draw and animate a full-screen SVG portrait of Doraemon against a light orange background. The character is composed from basic SVG shapes—circles for the head, eyes, nose, hands, and legs, ellipses for the pupils, and a path for the smile. The rendering is entirely procedural, with positions calculated relative to the window dimensions. Animation is driven by repeated `transition` calls on the eye ellipses to create blinking, while the head and the "HEY DORAEMON!!!" text bounce by cycling their vertical position through `transition.attr`.

AI-generated description

Doraemon using D3.js

Description

This project creates a CUTE Doraemon A character is created with atleast five different elements.

Elements Used:

Face – The blue round face.
Hands & Legs - Two small circles as hands in blue color and two small white circles as legs.
Red Nose – A small red circle.
Eyes – Two big white circles with black pupils.
Mouth – A curved red line for the mouth.

How to Run

Click on Run.
The Doraemon SVG will appear dynamically using D3.js.

Link to Vizhub Project

https://vizhub.com/kari-sri/6d12b38468c54bf4bdb920d18c468b5d

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE4-DORAEMON

This visualization renders a cheerful, animated Doraemon character using D3.js, drawing the face, eyes, nose, mouth, body, hands, and legs with basic SVG shapes like circles, ellipses, and paths. The character is centered on a solid orange background, with simple white text reading "HEY DORAEMON!!!" positioned below. The code employs D3’s `transition` API to create continuous motion, making the head bounce up and down, the text pulse vertically, and the eyes blink at random intervals, all driven by chained `.transition()` and `.duration()` calls. The visualization dynamically resizes to the full browser window.

Vvenigallajaanu@gmail.com

90% match

Loading thumbnail…

Doraemon

This visualization is a stylized SVG portrait of the cartoon character Doraemon, rendered with React and D3.js. It shows the iconic blue robotic cat with a white face, red nose, yellow bell, and black whiskers. The code constructs the image using React's SVG elements like `ellipse`, `circle`, `rect`, and `line`, and employs D3's `arc` generator to draw the character's mouth. All shapes are positioned and scaled relative to a center point, with specific coordinates for facial features.

Cchun0330

82% match

Loading thumbnail…

Doraemon Smiley Face

This example renders the face of Doraemon as a smiling character composed entirely of SVG shapes, including ellipses for the head and eyes, circles for the nose, and lines for whiskers. The mouth is drawn using the d3.arc generator with custom start and end angles to create a curved smile. React manages the SVG elements, while D3 v6 provides the arc path calculation. The static scene uses hard-coded dimensions and coordinates to position each facial feature on a 960 by 500 canvas.

PPichayut Liamthong

81% match

Loading thumbnail…

Doreamon

This Doraemon visualization is a static vector drawing of the iconic Japanese cartoon character, built with D3.js (v7) and rendered as SVG. The code constructs the character from geometric primitives—circles for the head, eyes, nose, and bell; ellipses for the face and belly; and paths for the smile, whiskers, arms, and body—all positioned manually through D3 attribute setters. The scene uses a light blue background and centers the figure within a 600×600 canvas, with the final composition accented by a comic sans title. It demonstrates D3’s utility for precise, code-driven illustration rather than data mapping.

Ggnanalekhana2807@gmail.com

80% match

Loading thumbnail…

Doraemon Smiley Face

The Doraemon Smiley Face is a stylized SVG rendering of the popular cartoon character, composed of colored ellipses, circles, lines, and an arc. The visualization shows the character's face with blue and white elliptical shapes for the head and face, white oval eyes with inner details, a red circular nose, and a curved mouth created using d3.arc. The code uses React for component structure and d3.js v6 for the arc path generation, rendering all elements as SVG shapes with explicit stroke and fill properties.

NNita

79% match

Loading thumbnail…

Doraemon Smiley Face

The visualization renders a stylized Doraemon-inspired smiley face using SVG elements within a React component. It shows a blue elliptical head with a white face, two white oval eyes with dark pupils, a red circular nose, and a curved smile created via the `d3.arc` path generator from the d3 library. The face is centered and positioned using SVG `<g>` transforms, while whiskers are drawn as `<line>` elements. The code leverages React 16 and d3.v6, with all shapes manually defined through SVG attributes rather than data binding.

PPichayut Liamthong

78% match

Loading thumbnail…

ICE 4 D3.js!

This visualization demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from basic SVG shapes. Orange circles form the head and ears, while white pupils, black-rimmed glasses, rectangular teeth, and arc-based nose and mouth complete the character. The eyebrows, rendered as rectangles, animate vertically through a chained sequence of D3 transitions, moving down then returning to their original position. The code uses d3.select, d3.append, and d3.attr for element creation and styling, with d3.arc for generating the nose and mouth paths and d3.transition for the eyebrow animation.

Aabdhaseeeb

77% match

Loading thumbnail…

ICE4 dj3

This D3.js example shows a large yellow smiley face with circular eyes and an arc-shaped mouth, animated by a pair of rectangular eyebrows that shift vertically in a repeating two-second loop. The SVG elements are constructed programmatically using D3's `select`, `append`, and `attr` methods, while the eyebrow animation relies on D3's `transition` API with a sequence of timed `attr` transforms. The illustration uses no external data source, instead generating its geometry from hardcoded constants for spacing, radii, and offsets within a 960-by-500 viewport.

SSai Kaushik

76% match