Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 1, 2023

Created on Mar 1, 2023

This fork of a D3 v3 tutorial draws a static yellow smiley face on an SVG canvas. A large circle forms the head, with two smaller circles for eyes, and an unfinished `d3.arc` path for the mouth, which is defined but not rendered. The code sets explicit pixel coordinates for each shape, using SVG circle elements and the `d3.arc()` API with inner and outer radii plus start and end angles. The example demonstrates basic SVG shape composition and D3 arc generation without any interactive or animated behavior.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a face-building tutorial uses an SVG drawing to show a simple smiley face: a yellow circle with a black outline and two smaller circles for eyes. The code specifies the SVG width and height directly, positioning each shape with explicit `cx` and `cy` coordinates, such as the face at (480, 250) with a radius of 245. It renders using the SVG API within an HTML document, with CSS to remove page margins and hide overflow. The example demonstrates static SVG shapes without interactive behavior or additional D3 features.

NNeeraj Verma

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face created with basic SVG shapes. The code draws a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all placed within an SVG element. It does not use any JavaScript libraries, relying instead on the D3.js version 3's underlying SVG support, but the data visualization is purely declarative HTML. The entire composition is centered on an 960x500 canvas, with explicit coordinates for the head and eye positions.

AArvind Chauhan

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed from three SVG circles on a yellow background. D3 is not used; instead, the code directly sets circle positions with hard-coded coordinates and attributes, including a thick black stroke outlining the face. The rendering uses plain SVG within an HTML page, with the face centered at (480, 250) and eyes placed symmetrically around it. The title references a tutorial series, but the visible behavior is only a non-interactive, two-eyed face without a mouth.

Mmatthamm@yahoo.com

92% match

Loading thumbnail…

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

This fork of the “Let's make a face with D3.js!” tutorial demonstrates fundamental DOM manipulation by rendering a static yellow smiley face with eyes, eyebrows, and a curved mouth in an SVG canvas. The code uses D3 v5 selections, `append` and `attr`, along with the `arc` generator to shape the mouth path. All facial elements are positioned using translated coordinates and fixed numeric offsets. The example serves as a clear introduction to building SVG graphics programmatically with D3's declarative approach.

AAbdouEnsaj

92% match

Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built with overlapping SVG shapes: a large circle for the head, two smaller circles for eyes, and an arc path for a smile. The code uses React to render the SVG elements and D3’s `arc()` generator to create the mouth with specified inner and outer radii and angles. Position values are computed from fixed dimensions, and a `stroke-width` of 20 outlines the head in black. The face is centered via a `<g>` transform, with no interactive or animated behavior.

Nnoodlemakerpo

92% match

Loading thumbnail…

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

This example shows a yellow smiley face drawn as SVG, with black eyes and an arc-shaped mouth, while the eyebrows are not yet implemented. The code uses D3.js v5 selections to append and position the face elements, including `circle` for the head and eyes and a `path` generated with the `d3.arc` shape generator. The SVG canvas is 960 by 500 pixels, and the layout centers the face using fixed pixel offsets for the eyes and mouth. The example demonstrates fundamental DOM manipulation through D3’s declarative chaining of `.attr()` calls.

GGuilherme Caeiro

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circular face with black outline is drawn on an SVG canvas, showing three circles: one large head and two smaller eyes positioned symmetrically. The rendering uses static SVG elements defined directly in the HTML, without any JavaScript or D3.js interaction. The code sets explicit coordinates and radius values for each circle, with the head centered at (480, 250) and eyes placed at (350, 180) and (600, 180). This example is a fork demonstrating basic SVG shape creation for a smiley face, using only native markup with styling applied through CSS attributes.

Ttdinh09

91% match