SilverOwl1112

@SilverOwl1112·9 public vizzes

Fork of Create a face with d3.js!

A cheerful yellow face built with SVG primitives in D3 v7. Circles form the head and eyes, rectangles serve as eyebrows, and the mouth uses d3.arc to create a curved path. The eyebrows animate upward and back down over two consecutive two-second transitions using d3.transition, while the static face remains centered on a 960×500 canvas.

Sep 22, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

This example uses D3.js v7 to construct a simple yellow face from SVG shapes, including circles for the eyes and rectangles for the eyebrows. The code imports `select` and `arc` from the D3 library, though `arc` is unused, and sets the face against a fixed 960×500 canvas. A chained `transition().duration(2000)` animation moves the eyebrow group up and down, creating a blinking or raising effect. The SVG elements are positioned relative to the center of the canvas using a translated group.

Sep 22, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow face rendered in SVG features animated eyebrows that shift upward and then return to their original position over repeated two-second transitions. The face is constructed from basic shapes including circles for the head and eyes, rectangles for the eyebrows, and an arc path for the smile. The code uses D3 v7, loading the library via UNPKG, and demonstrates selections, attribute manipulation, and chained `transition().duration()` calls to create the motion.

Sep 22, 2023

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

A cartoon face built with D3.js draws a yellow circular head, eyes, and eyebrows on an SVG canvas. The code uses `d3.arc` to generate the mouth path and `d3.select` to manage elements. A `transition` with `.attr` animates the eyebrow group vertically in a looping up-and-down motion. The fixed layout positions features relative to the SVG’s center, with all styling applied via inline attributes.

Sep 22, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with eyes, animated eyebrows, and an arc-shaped mouth is rendered in the center of a 960×500 viewport. The example demonstrates how to compose primitive shapes with D3 selections and apply a chained transition to move the eyebrow group vertically over two seconds, then return it. It uses `d3.select`, `d3.arc`, and `transition.attr` on SVG elements, with D3 v7 loaded from UNPKG and a local ES6 module importing `select` and `arc`.

Sep 22, 2023

Loading thumbnail…

Fork of Fork of Fork of Create a face with d3.js!

A friendly yellow face with black-outlined features appears in the center of an SVG canvas. Built directly with D3 v7, the visualization constructs the face from basic geometric primitives: a circle for the head, two circles for eyes, rectangular eyebrows, and a path for the mouth. The code demonstrates D3's select, append, and arc APIs, alongside a D3 transition that animates the eyebrows downward and back over four seconds, creating a subtle blinking or eyebrow-raising effect. The example showcases importing local modules and loading D3 via UNPKG.

Sep 22, 2023

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

A stylized face rendered in SVG using D3.js v7, with a yellow circular head, black-outlined features, and animated eyebrows. The code uses D3’s `select` and `arc` APIs to build the shape, positioning the eyes, eyebrows, and mouth via coordinate attributes. The eyebrows animate through D3’s `transition` API, moving down and back up over two 2-second intervals. The visualization demonstrates basic SVG construction and tweening within a 960×500 canvas.

Sep 22, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with black-outlined eyes, eyebrows, and a smile is centered in a 960×500 viewport. D3 v7 draws the circular head and features using `selection.attr` and the `arc` generator for the mouth. The eyebrows animate vertically through chained `transition` calls with `duration(2000)`, moving down 50 pixels and back, demonstrating two-way motion sequencing.

Sep 22, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large font. It is a minimal demonstration of how CSS styling and JavaScript can be embedded within an HTML document, using a `<style>` block to set the font size and alignment. The page relies solely on native HTML and CSS elements, with no external JavaScript libraries or data sources. It serves as a basic starter template for understanding the structure of a web page.

Sep 22, 2023