Dmitry Bondar

@dbvech·3 public vizzes

Fork of Fork of Smiley Face Part 3 (React + D3)

A grid of 18 randomly generated smiley faces demonstrates reusable React components combined with D3 shape generation. Each face uses `d3.arc` to draw a mouth, while eyes and a yellow background circle are built from SVG primitives inside a React component tree. The `FaceContainer` wraps children in an SVG `<g>` element with a translated coordinate system. Randomized props for stroke width, eye offset, eye radius, mouth width, and mouth radius make every face unique, showcasing how D3 utilities integrate with React’s declarative rendering.

Oct 20, 2021

Loading thumbnail…

Fork of Smiley Face Part 2 (React)

This example shows a simple, hand-coded smiley face progressing toward completion: a yellow circle head with a black outline and two black eyes, rendered as SVG shapes. The code uses React to define the `App` component and `ReactDOM.render` to mount it into the DOM. It calculates the face geometry from fixed constants for center coordinates, eye offset, and radius, then draws three `circle` elements with inline attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`. The face lacks a mouth, indicating it is only partway finished.

Oct 20, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows the first step in constructing a smiley face using raw SVG shapes, with a large yellow circle for the face and two smaller black circles for the eyes. The code creates the elements directly in the HTML markup without any JavaScript libraries, relying on the SVG `circle` element and its `cx`, `cy`, and `r` attributes for positioning. The face is centered within a 960 by 500 canvas, using a yellow fill, a black stroke, and a stroke-width of 10 to define the outline.

Oct 20, 2021