100%

Fork of ICE4-DORAEMON

✓ Published0🌍 Public

Last edited Feb 24, 2025

Created on Feb 24, 2025

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.

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…

ICE4-DORAEMON

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`.

TTejasriKari@my.unt.edu

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

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

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

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

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

78% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

76% match

Loading thumbnail…

Fork of Fork of d3js

A cheerful yellow face with black-outlined features is rendered as an SVG in D3 v5. The animation lifts the rectangular eyebrows upward and then returns them to their original position over a four-second cycle, using chained `transition()` calls on a grouped element. The face is composed of circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within a fixed 960x500 SVG viewport.

HHeisenberg

76% match