AlfaShivamKumar

@AlfaShivamKumar·8 public vizzes

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

This example shows a smiley face built with D3.js, featuring yellow circular head, eyes, rectangular eyebrows, and a curved mouth rendered as an SVG path. The face is centered using SVG groups and transformations, with fixed numeric values positioning each facial feature. The code uses D3 v5 selections to append and style elements, the `arc()` generator for the mouth shape, and imports specific functions (`select`, `arc`) from the D3 module. Static positioning defines the layout, with no interactive or animated behavior included.

Dec 24, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

A fork of the classic “Create a face” example renders a yellow circular face using D3 selections and SVG. The code builds a static face with circles for eyes, rectangles for eyebrows, and an arc for the mouth, all positioned via SVG transform attributes. D3’s `transition` API animates the eyebrows up and down repeatedly, demonstrating chained transitions. The example imports `select` and `arc` from the D3 v7 module and runs entirely client-side using SVG rendering.

Oct 3, 2023

Loading thumbnail…

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

This example creates a yellow smiley face with eyes, eyebrows, and a smile using D3.js v5. The code builds the face with SVG circles, rectangles, and an arc path, then animates the eyebrows by repeatedly transitioning their vertical position over two-second intervals. It demonstrates fundamental DOM manipulation with selections and the `transition()` method, using `d3.select` and `d3.arc` to construct the shapes in a centered group.

Oct 3, 2023

Loading thumbnail…

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

This example builds a yellow smiley face with SVG shapes, including circular eyes, rectangular eyebrows, and an arc-based mouth. Using D3.js v5, it demonstrates DOM manipulation by selecting the root `svg` element, appending a centered group, and positioning each facial feature with translation transforms. The eyebrows move through a chained `transition().duration()` sequence, animating their vertical position over four seconds before stopping. The face itself is static afterward, with no interactive or data-driven behavior beyond the initial scripted animation.

Oct 3, 2023

Loading thumbnail…

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

A yellow smiley face is rendered in SVG, with its eyebrows animating upward and back downward over four seconds. The face is built using D3.js v5 selections and `arc()` for the mouth, with `circle` and `rect` elements for eyes and brows. A `transition()` chain moves the eyebrow group vertically, demonstrating sequential DOM updates driven by D3's transition API.

Oct 3, 2023

Loading thumbnail…

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

A yellow smiley face rendered in SVG has its eyebrows repeatedly moving up and down in a looping animation. The example demonstrates basic D3.js selection, attribute manipulation, and chained transitions on SVG elements. It uses the `d3.select` API to append circles, rectangles, and an arc-generated mouth path, while `transition().duration()` cycles the eyebrow group's vertical transform. The scene is centered via a translated `g` element, with hardcoded geometric values for facial features.

Oct 3, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

A static page renders the text "Hello HTML!" in large left-aligned type, demonstrating a minimal setup with HTML, CSS, and JavaScript. The styling uses a CSS class rule to set a 7em font size, while the page structure contains a single div element. No data or interactive behavior is present; the example serves as a basic starter template, referencing the React Starter for comparison. The code includes no external libraries or APIs beyond standard web technologies.

Oct 3, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a centered "Hello HTML!" message using a large font size. It demonstrates the basic structure of an HTML page with a CSS style block and no external JavaScript libraries. The message is rendered as plain text within a div element, and the styling is applied directly in the head of the document. It serves as a minimal starter template for web-based visualizations, without relying on any data or external APIs.

Oct 3, 2023