santiago-gutierrez3

@santiago-gutierrez3·2 public vizzes

Let's make a face with D3.js!

This example builds a smiley face out of basic SVG shapes using D3.js, demonstrating fundamental DOM manipulation with selections and `attr()`. The face features a yellow circle head, eyes, a mouth drawn with the `d3.arc()` generator, and rectangular eyebrows that animate upward and downward via chained `transition().duration()` calls. The code imports specific functions like `select` and `arc` from the D3 v5 library, uses SVG elements rendered in an HTML page, and loops the eyebrow movement automatically. It showcases how to structure nested groups with `transform` attributes for positioning.

Jun 18, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—with CSS-driven styling and color fills. It shows how element attributes like fill and stroke can be overridden by CSS rules, and how grouped elements inherit shared properties. The code uses raw SVG markup within an HTML file, with a linked CSS file controlling stroke width, line joins, and cap styles. Rendering relies entirely on the browser’s native SVG support, with no external libraries.

Jun 18, 2020