katpyt

@katpyt·2 public vizzes

Smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The HTML page uses inline CSS to remove margin and hide overflow, while the SVG element sets a fixed width and height with hardcoded coordinates. The document uses no external JavaScript libraries, relying solely on raw SVG markup within the HTML file. The comment in the code hints at calculations for eye positioning, but the actual positions are static.

Nov 5, 2021

Loading thumbnail…

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

A smiling face built with D3.js v5 uses SVG circles and a path to render its head, eyes, and mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls with a two-second duration each. The visualization demonstrates core DOM manipulation by selecting an `svg` element and appending groups and shapes based on fixed pixel dimensions. The code imports `select` and `arc` from the D3 library to create the face and generate the mouth's curved path.

Nov 5, 2021