Dharanitharan-J

@Dharanitharan-J·4 public vizzes

Fork of Fork of Smiley Face Part IV

This example builds a classic smiley face using React and D3.js, rendering the graphic as SVG. The code imports the `arc` function from D3 to generate the mouth shape, while the head and eyes are simple React `<circle>` elements. The face is centered within a 960 by 500 pixel viewport, with a yellow circle outlined in black and two fixed eye circles, all positioned via SVG transforms. The implementation uses React's `ReactDOM.render` to mount the component, combining declarative UI structure with D3's geometry utilities.

Sep 21, 2023

Loading thumbnail…

Fork of Smiley Face Part IV

This fork of Smiley Face Part IV renders a classic smiley face using React and D3.js, with the shape centered in an SVG canvas. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth drawn as a D3 arc path, all positioned using hardcoded coordinates. The code imports React for component-based UI and D3’s `arc` function to generate the mouth’s path. Rendering relies on ReactDOM to inject the SVG into the page, with D3 v5 handling the geometric calculations for the arc’s start and end angles.

Sep 21, 2023

Loading thumbnail…

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

This example draws a yellow smiley face with D3.js, featuring two circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then return to their original position over two sequential two-second transitions. The visualization uses D3 v5’s `select`, `append`, and `transition` methods to manipulate SVG elements, with coordinates computed from the viewport dimensions. The mouth is generated using the `arc` generator with specified inner and outer radii and angle values.

Sep 21, 2023

Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

Sep 21, 2023