Adrienne Vermorel

@adriennevermorel·3 public vizzes

Smiley Face part 2

A solitary yellow circle with a black outline, rendered as a static SVG, represents the first step of a smiley face. The React component defines the circle’s position and size using hardcoded coordinates. The example builds on a previous version by introducing React and ReactDOM to render the SVG element, though the commented-out code suggests additional facial features are planned but not yet implemented.

Apr 16, 2021

Loading thumbnail…

Smiley Face part 1

A static SVG drawing of a smiling face uses three `<circle>` elements: a large yellow circle outlined in black for the head, and two smaller filled circles for the eyes. The face has no mouth, leaving the expression incomplete, which hints at a “part 1” of a series. The markup is written directly in `index.html`, with no JavaScript or external libraries, and relies solely on SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke` to position and style the shapes at fixed coordinates. The page sets no margins and hides overflow to frame the graphic cleanly.

Apr 16, 2021

Loading thumbnail…

Hello D3 Version 6

This example demonstrates a minimal first step with D3 version 6 by turning an SVG element’s background red. It uses the `d3.select` API to reference the SVG and applies the style directly, while loading the library from the official d3.v6.min.js CDN link. The page itself is otherwise empty, focusing solely on the styling effect.

Dec 20, 2020