Charlene Ong

@charleneolive·2 public vizzes

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is constructed with SVG circles, rectangles, and an arc-generated mouth, all positioned relative to the center of the viewport. The eyebrows use chained `transition().duration()` calls to move vertically and back, creating a blinking effect. The code imports `select` and `arc` from D3 v5 and builds the visualization entirely through SVG attributes.

Sep 11, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—stylized directly through CSS classes and inline attributes. It shows how fill colors, stroke widths, and geometric transforms like scaling and translation affect the rendering of grouped elements. The code uses no JavaScript libraries, relying solely on raw SVG markup and a linked stylesheet. The `lines` class applies stroke properties to the polyline-like path, while the second group overrides default fill and adds a black stroke, illustrating CSS specificity and SVG presentation attributes.

Sep 11, 2021