Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE4-DORAEMON

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

42da6f35177547f29e781ff0f04afa60

Open

ICE4-DORAEMON

0 stars1🌍 Public
TTejasriKari@my.unt.edu
Last edited Feb 24, 2025
Created on Feb 22, 2025
Forked from meditation

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 uses D3.js to create a Doraemon character with at least five different elements.

Elements Used:

  1. Face (Main circular body) – The blue round face.
  2. Eyes – Two big white circles with black pupils.
  3. Red Nose – A small red circle.
  4. Mouth & Whiskers – A curved red line for the mouth and black lines for whiskers.
  5. Bell Collar – A yellow circle with a black outline and a red collar.

How to Run

  1. Open index.html in a browser.
  2. The Doraemon SVG will render dynamically using D3.js.

Screenshot

(Add the screenshot here before submission.)

Link to Vizhub Project

[Your Vizhub Project Link Here]