Joshua

@borsman·3 public vizzes

smile part 2

This example renders a smiling face as an SVG composition using React and D3.js. The yellow circle (the face) is drawn from imported constants, with black circles for eyes and a D3 arc path for the mouth. The code uses ReactDOM to mount the SVG into the page, and D3’s `arc()` function to generate the mouth geometry.

Mar 18, 2022

Loading thumbnail…

smile part 1

A yellow circle with a thick black outline forms the face of a smiley, accompanied by two smaller black circles positioned as eyes on a blank white background. The example demonstrates basic SVG rendering within a React starter template, using plain SVG elements such as `circle` with attributes for positioning, sizing, fill, and stroke. The code is embedded directly in an HTML page with inline CSS, and no interactive behavior or additional JavaScript logic is shown.

Mar 17, 2022

Loading thumbnail…

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

A smiling face built from SVG shapes demonstrates fundamental D3.js DOM manipulation and animation. The yellow head, eyes, and eyebrows are drawn with circles and rectangles, while the mouth uses an arc path generator. The code imports `select` and `arc` from D3, chains two 2000-millisecond `transition` calls to animate the eyebrow group vertically, and positions elements using SVG attribute manipulation. No external data is loaded; the visualization relies entirely on hardcoded values and D3’s selection and transition APIs.

Mar 17, 2022