chanipon

@wchanipon·3 public vizzes

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

This example animates a simple smiley face rendered in SVG, with eyebrows that sequentially lift and lower to create a facial expression. It demonstrates fundamental DOM manipulation by building the face from basic shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—using D3.js v5 selection and attribute methods. The eyebrow movement is driven by chained `transition().duration()` calls, which animate the `transform` attribute over two seconds in each direction. The code uses `d3.select`, `d3.arc`, and `append` to construct the scene within a 960×500 viewport.

Jul 4, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face comprises a yellow circle with a black stroke, positioned at the center of the viewport, plus two smaller circles for eyes. The code calculates the face radius based on the window height and sets eye and mouth offsets as constants, though the mouth is not drawn in the visible implementation. It uses ReactDOM to render the SVG elements, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

Jul 4, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This React and D3.js visualization recreates a smiley face through basic SVG shapes, drawing a yellow circle head, two black eye circles, and a smile arc generated with a D3 arc generator. The React application uses D3’s `arc` API to define the mouth’s inner radius, width, and angular sweep, then renders the result as an SVG path within a centered `<g>` group. With D3 v5 and React 16.9.0, the code demonstrates combining imperative D3 geometry with declarative React rendering in a static, non-interactive illustration.

Jul 4, 2024