SoUmItRoBoT

@SoUmItRoBoT·3 public vizzes

HTML Starter

This example shows a static sine wave path plotted on an SVG canvas, with a minimal setup for animating it over time. The code generates coordinate arrays using a loop and maps them to pixel positions, then renders the line with `d3.line()`. It uses D3 v5 and React, with SVG rendering and transitions prepared via `transition().attr()`. The HTML page loads D3 from a CDN and relies on a separate `bundle.js` for the visualization logic.

May 26, 2020

Loading thumbnail…

Practicing Javascript

Three animated SVG shapes practice D3 transitions in a React-free setup. An arc pulses between inner and outer radii, while two diagonal lines stretch and contract in sync, each cycling through uptime, wait, and downtime intervals. The code uses `d3.arc` to compute the arc’s path and chained `transition().duration()` calls with `on('end')` callbacks to loop the animations. A static HTML page loads D3 v5 and runs the script in a 200×200 SVG.

May 26, 2020

Loading thumbnail…

Smiley Face with D3.js

A yellow smiley face rendered in SVG appears, composed of circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate upward and downward using chained D3 transitions. Built with D3.js v5, it employs `select`, `arc`, and `transition`, drawing all shapes on a blank 900x500 canvas without an external dataset.

May 25, 2020