simpleguy86@gmail.com (@Alvan86), VizHub

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

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc-generated mouth, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while a chained `transition().duration()` animation moves the eyebrows up and down in a repeating cycle. The face is drawn using static attributes for radius, spacing, and colors, with the mouth created via the `d3.arc()` helper.

Jan 9, 2025

Loading thumbnail…

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

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc-generated mouth, all centered within an SVG canvas. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while a chained `transition().duration()` animation moves the eyebrows up and down in a repeating cycle. The face is drawn using static attributes for radius, spacing, and colors, with the mouth created via the `d3.arc()` helper.

Jan 9, 2025

Loading thumbnail…

Fork of Smiley Face Part II

A React-based SVG renders a full-window smiley face whose yellow circular head, black stroke, and eyes are positioned relative to the window’s center coordinates. Using React 16.9 and ReactDOM, the component calculates dimensions from `window.innerWidth` and `window.innerHeight`, then draws the face with `<circle>` elements inside an SVG. The example demonstrates dynamic, viewport-adaptive sizing without a mouth, as only the head and two eye circles are included in the code.

Jan 9, 2025

Loading thumbnail…

Fork of Smiley Face Part II

A full-window SVG smiley face is drawn, centered on the canvas with yellow circular head, black outline, and two black eyes. The React application calculates dimensions from `window.innerWidth` and `window.innerHeight`, then uses SVG `<circle>` elements within a translated `<g>` group to position features relative to the center. The code uses `ReactDOM.render` to mount the component, with styling constants for offsets, radii, and stroke width.

Jan 9, 2025

Loading thumbnail…

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

A simple, static SVG face built from three circles. It shows a large yellow circular head with a black outline, flanked by two smaller black circles for eyes, all positioned on a blank canvas. The code directly uses raw SVG elements—`circle` and `svg` tags—with fixed coordinates and stroke attributes, rather than any JavaScript libraries like D3. No interactive behavior or animations are present; it is a purely declarative illustration of basic geometric composition.

Jan 9, 2025

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG drawing of a yellow smiley face, with black outline and two eyes, uses plain circle elements with fixed coordinates. The face is centered on a 960 by 500 canvas, with the head radius set to 245 and eyes placed at offsets from the center. The rendering relies on raw SVG markup with inline CSS for margins and overflow, and includes no JavaScript or external libraries. This example serves as a basic introduction to constructing visual elements using SVG geometry, without animation or interactivity.

Jan 9, 2025

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face” builds a smiley face by incrementally adding points, lines, and shapes on an SVG canvas. The visualization uses D3 v3’s `d3.forceSimulation` to position the face’s features, with each element appearing in a sequence controlled by JavaScript timers. The code also relies on `d3.select` and `transition.attrTween` to animate the drawing of the mouth and eyes. The final result shows a complete, semi-circular smile and two round eyes, rendered from simple geometric data.

Jan 9, 2025