Fork of Fork of make a face d3js

Fork of make a face d3js

This animated SVG face uses D3.js v7 to build a cheerful character from basic geometric shapes. It draws a yellow circle head with elliptical eyes, circular irises, rectangular brows, and a mouth shaped using the `arc` function. The eyebrows are the only animated elements, moving via chained `transition` calls on their transform attributes. The markup is generated imperatively through `select` and `append`, with coordinates calculated from the SVG’s width and height attributes.

GGodspower Wodi

Fork of make a face d3js

This example shows a cartoon face built entirely from basic SVG shapes, using D3 v7 to create a yellow circle head, two elliptical eyes with irises, and a wavy mouth path. The code leverages D3’s `select` and `arc` APIs to generate two crescent-shaped arcs, transformed and positioned to represent drunk, half-closed eye lids. Additional shapes like `circle` and `ellipse` are appended manually, while the mouth is a hand-written path string with stroke styling, all rendered at a fixed 960×500 SVG canvas size.

GGodspower Wodi

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

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala

UUzoemeka Okechukwu Innocent

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

This example displays a smiling face constructed from SVG shapes, including a yellow circle, two eyes, and a mouth path with a curved arc. Built with React and D3.js v7, it uses the `arc()` function from d3-shape to generate the mouth with specified inner and outer radii and angles. Positioning is handled through SVG transforms, with the face centered on an 960×500 viewport. The code demonstrates proportional sizing by calculating radii relative to the center coordinates and stroke width.

UUzoemeka Okechukwu Innocent

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

This example draws a smiling face using SVG circles and an arc path. The face is composed of a yellow circle for the head, two smaller circles for the eyes, and a mouth created with D3’s `arc` generator. The code uses React to render the SVG elements and D3 v7 for the arc path calculation, applying a black stroke to the head and positioning all elements relative to the center of the viewport.

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

This example shows a static smiley face built with React and D3.js v5, rendered as SVG. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a smile created using the D3 `arc()` generator with specified inner and outer radii. All shapes are defined as React components that receive numeric props for dimensions and positioning. The drawing is centered within an SVG viewport using a group transform, with the face’s radius derived from the viewport height minus stroke width.

AAdaman32

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

This example builds a simple smiling face using D3.js v5 within a React-free HTML page, rendering to SVG. The face is composed of a yellow circle, two eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate up and down using chained `transition().duration()` calls, shifting their group’s `transform` attribute. Static positioning relies on absolute pixel values from the SVG’s width and height, and all shapes are appended to a central `<g>` element.

Ssolarmic2015

Fork of Fork of Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke as the head, two black eye circles, and a mouth arc. The code uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular bounds. SVG elements are positioned via a centered `<g>` transform, with constants for eye offset, radius, and stroke width. The visualization shows a static, geometric facial composition without interactivity, built entirely through React components and D3 utilities.

Bbhavani44