Skip to main content
Log in
R

rennyshihNY

@rennyshihNY·3 public vizzes

Loading thumbnail…

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

A yellow smiley face drawn with SVG circles and an arc path uses D3.js transitions to animate its eyebrows upward and back over two seconds each way. The face is centered within a 960×500 SVG, with eyes, eyebrows, and mouth positioned via transforms. This example demonstrates fundamental DOM manipulation with d3.select, attribute setting, and chained transition().duration() calls on SVG elements.

Aug 29, 2021
Loading thumbnail…

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

A yellow smiley face rendered with SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face’s eyebrows animate upward and downward through chained `transition()` calls that shift their `transform` attribute over two-second intervals. The author constructs the head, eyes, and eyebrows with `select()` and `append()`, while the mouth uses the `arc()` generator from D3’s shape module with specified inner and outer radii and angular ranges. Both circles and rectangles are positioned via fixed pixel offsets in a centered group.

Aug 29, 2021
Loading thumbnail…

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

A yellow smiley face drawn with SVG circles and an arc path uses D3.js transitions to animate its eyebrows upward and back over two seconds each way. The face is centered within a 960×500 SVG, with eyes, eyebrows, and mouth positioned via transforms. This example demonstrates fundamental DOM manipulation with d3.select, attribute setting, and chained transition().duration() calls on SVG elements.

Aug 29, 2021