S767

@S767·5 public vizzes

Fork of Fork of Exercise 2: SVG Fundamentals

A sunrise and sunset scene depicts hills, trees, and a changing sky. The visualization uses raw SVG elements and paths, defined within a `<symbol>` for trees, and relies on CSS for layout. Gradients are set up in SVG `<defs>` to color the background, while a complex path creates a detailed landscape silhouette. The example demonstrates fundamental SVG construction techniques without additional libraries.

Jun 4, 2021

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A forked exercise demonstrates sunrise and sunset using SVG. A complex, single-path tree symbol is defined in `<defs>` and rendered within a 960x500 white canvas. The visualization relies on SVG gradients and symbol reuse, with the tree drawn through extensive path data. Styling is controlled via an external stylesheet that hides page overflow. The example focuses on SVG fundamentals, showing how symbols and paths create detailed, scalable graphics without JavaScript libraries.

Jun 4, 2021

Loading thumbnail…

Face 2

A simple SVG face with two black eyes and a yellow circular head appears on a red-bordered canvas. Using D3.js v6, the code draws an arc below the face to represent a mouth, whose curvature continuously widens and narrows via `d3.timer`. The arc’s start and end angles are recalculated each frame based on elapsed time, and the path’s `d` attribute is updated through the `d3.arc` generator. Static elements are defined directly in HTML, while the animated mouth is appended programmatically.

Jun 2, 2021

Loading thumbnail…

+

A smiling face is drawn as a static SVG, then its mouth widens and narrows in an animated loop using D3. The static portion uses basic SVG shapes—a yellow circle with a black stroke for the head and two smaller black circles for the eyes. The animated mouth is generated with D3's `arc` geometry, and its start and end angles are modified over time inside a `d3.timer` callback. The mouth shape is redrawn as a path using the updated arc each frame.

Jun 2, 2021

Loading thumbnail…

Fork of Fork of D3 for Clustrmaps.com

This example visualizes a computer network topology as an animated SVG diagram. It uses D3 version 6 to render nodes representing servers, proxies, and devices, with edges depicting connections like HTTPS, callbacks, and tunnels. Node positions are calculated from percentage-based coordinates, and the visualization uses d3’s `linkVertical` for curved edges. The code defines custom icon mappings via Font Awesome, and includes a tooltip that appears on hover, though the specific interactions are not fully implemented.

Jun 2, 2021