tim-adam

@tim-adam·4 public vizzes

Let's make a face with D3.js!

This example builds a smiling face out of SVG shapes—a yellow circle, two eyes, eyebrows, and an arc mouth—anchored at the center of a 960-by-500 viewport. Using d3.select and append, it constructs a group hierarchy for the eyes and eyebrows, then applies a repeating transition to the eyebrow group, shifting its transform up and down over two-second intervals with d3’s transition().duration. The mouth is drawn via d3.arc with inner and outer radii, while the face’s static elements remain fixed.

Jun 22, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a natural Earth projection map of world countries, highlighting basic interaction techniques for geographic visualizations. The map renders countries as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, with data from the World Atlas TopoJSON and TSV files. Users can pan and zoom the map through D3’s `zoom` behavior, which applies a transform to the map group. Hovering over any country turns it red, and a tooltip showing the country name appears via appended SVG `title` elements.

Jun 21, 2020

Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is drawn using SVG. The code builds the face by layering a circle, eye groups, and rectangles for eyebrows, then animates the eyebrows upward and back down using chained D3 transitions. The mouth is created with a d3.arc path. The example uses React-compatible starter code and renders entirely with D3 v5's select and arc modules.

Jun 21, 2020

Loading thumbnail…

Let's make a face with D3.js

A face constructed from SVG shapes appears on a blue circular head, with eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows and mouth animate through smooth transitions, moving up and down repeatedly via D3's `transition` API. The example uses D3 v5 within a React framework, rendering vector graphics with SVG elements and applying transforms to position them relative to the canvas center.

Jun 21, 2020