Jyotirmayi-max

@Jyotirmayi-max·4 public vizzes

Face

The visualization shows a simple face composed of a large pink circular head with two black eyes, all rendered as static SVG shapes. The head circle is centered in a 960 by 500 pixel canvas, with a thick black stroke, while the two solid black eyes are placed symmetrically around the center using fixed coordinates. The example uses plain SVG elements—`circle` tags—with no JavaScript libraries or animation, and the code comments indicate manual positioning based on the canvas height and eye offset values. The rendering is entirely declarative, with styling applied directly via SVG attributes.

May 17, 2021

Loading thumbnail…

face

This example shows a smiling face whose eyebrows animate up and down in a looping motion. The face is drawn entirely with SVG shapes, including a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated using the d3.arc function for the mouth. The animation uses D3 v5’s chained transition method with a 2000-millisecond duration to repeatedly translate the eyebrow group between two vertical positions. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending groups and shapes to build the composition, with the face centered dynamically using the viewport dimensions.

May 17, 2021

Loading thumbnail…

face

A yellow smiley face with black-outlined eyes and a curved mouth is rendered as an SVG. The example demonstrates fundamental D3.js DOM manipulation and animation by moving the face's rectangular eyebrows up and down. Using `d3.select`, `svg.append`, and chained `transition().duration()`, the code updates the `transform` attribute of a group element to create the repeated eyebrow motion, with all geometry defined as static attributes.

May 17, 2021

Loading thumbnail…

Fork of Smiley Face by Jyotirmayi

This example shows a classic smiley face rendered as a static SVG graphic, composed of a yellow circular face, two black eyes, and an open mouth. The visualization is built using a React component that leverages D3’s `arc` generator to define the mouth’s path, while other shapes are drawn as simple SVG elements. The component passes fixed pixel dimensions and coordinates for centering, with D3 handling the arc geometry and React managing the SVG rendering.

May 6, 2021