gautam kumar jha

@alonsogauti·3 public vizzes

Fork of its fun when u know how cute done D3.js!

This animated SVG smiley face demonstrates fundamental D3.js DOM manipulation by adjusting the position of cartoon eyebrows. A light blue circle forms the face, with two smaller circles for eyes and a path generated using the `arc()` generator as a mouth. The eyebrows, rendered as rectangles, move up and down through two chained `transition()` calls, each lasting two seconds, shifting the group’s `transform` attribute. The example uses d3.select and d3.arc to build static elements and animate them sequentially.

May 4, 2021

Loading thumbnail…

Fork of Is it Really Fun?

A D3.js animation demonstrates a smiley face whose eyebrows shift vertically in a looping motion, built entirely with SVG shapes and transitions. The face is constructed using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a centered group. The code uses `d3.select` to manage the SVG, `d3.arc` to generate the mouth, and chained `transition().duration(2000)` calls to animate the eyebrow group’s transform between two offsets. The rendering relies on SVG elements with static styling, and the animation runs continuously on page load.

May 4, 2021

Loading thumbnail…

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

This example demonstrates a pair of smiley faces whose eyes follow the mouse cursor across the screen. It shows two circular faces with white eyes and black pupils, while the mouth changes shape when hovered over. The interaction is built with vanilla JavaScript event listeners, specifically `document.querySelector("body").addEventListener("mousemove", eyeball)`, and uses `getBoundingClientRect` and `Math.atan2` to calculate the rotation angle for each `.eye` element. The faces are styled entirely with CSS, using properties like `border-radius` and `transform: rotate()`, and the page renders through an SVG element alongside the HTML structure.

May 3, 2021