datadunphy

@datadunphy·3 public vizzes

Smiley Face Part I

A yellow circle with a black outline and two smaller black circles positioned as eyes forms the first step of a smiley face. The SVG markup uses explicit `cx`, `cy`, and `r` attributes to place the shapes, with the face centered at 960 by 500 pixels. React is loaded via a UMD script, though the code does not yet use React for rendering, and a log statement in `index.js` confirms the library’s presence. The rendering relies solely on static SVG elements.

Jul 7, 2021

Loading thumbnail…

FACE TRY

A cheerful face constructed from basic geometric shapes—a yellow circle for the head, two black circles for eyes, and a semicircular mouth—is drawn in an SVG canvas. Built with React, the visualization uses D3’s `arc` function to generate the mouth path and leverages React components and attributes like `stroke-width` to style the elements. The code calculates positions and radii from fixed constants, producing a static, centered portrait on a 960 by 500 canvas.

Jul 6, 2021

Loading thumbnail…

Hello HTML

This example shows a yellow smiley face drawn with SVG circles and a path, whose eyebrows rise and fall in a looping animation. It demonstrates fundamental DOM manipulation with D3.js by appending SVG elements to a group and using chained `transition().duration()` calls to animate the eyebrow group’s `transform` attribute. The mouth is created using `d3.arc()` with specified inner and outer radii and angle ranges. The code relies on `d3.select` to access the SVG and sets geometric attributes like `cx`, `cy`, and `r` directly.

Jul 6, 2021