kkw-21

@kkw-21·6 public vizzes

Fork of Smiley Face Part VI

A grid of randomized smiley faces renders in SVG via React components, each face built from a yellow circle, two eyes, and a d3.arc-generated mouth path. The faces vary in stroke width, eye offset, eye radius, mouth radius, and mouth width using Math.random() values. A FaceContainer wraps the SVG group with translate transforms, while d3.range generates the 18-face array. D3 v5 and React 16.9 manage the component hierarchy and shape generation.

Feb 20, 2022

Loading thumbnail…

Fork of Smiley Face Part III

The example shows a small smiley face rendered as an SVG that follows the mouse cursor across a 960-by-500 canvas. The face’s position is driven by React state, updated via an `onMouseMove` handler that records the client coordinates. D3’s `arc` generator defines the mouth path, while circles for the face, eyes, and stroke are drawn using React’s JSX syntax. The visualization combines React’s declarative component model with D3’s geometry utilities, using `d3.v5` and `react@16.9.0`.

Feb 13, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a classic smiley face rendered within an SVG canvas, composed of a yellow circular background, two black eye circles, and a curved mouth path. Built with React and D3.js v5, it leverages the `d3.arc` API to generate the mouth’s crescent shape by specifying inner and outer radii and angle ranges. The visualization is constructed declaratively through React components, with the `BackGroundCircle` component drawing the face’s base, while coordinates are calculated relative to the canvas center, ensuring the face remains centered and proportioned.

Feb 12, 2022

Loading thumbnail…

Fork of 矢量画圆

This example renders a yellow smiley face as an SVG graphic using React and D3’s arc generator. The face is composed of a large outline circle, two fixed eye circles, and a mouth path drawn with an arc that has inner and outer radii, spanning a full 2π angle. The React component returns the SVG elements, positioning everything relative to the center via a translate transform. The code uses ReactDOM to mount the component into the root div, with the D3 arc API handling the mouth’s curved path.

Feb 12, 2022

Loading thumbnail…

矢量画圆

A yellow smiley face is drawn using React and rendered as SVG, with its circular head and facial features positioned relative to the window dimensions. The face is centered on screen using a translated `<g>` group, and circles are used for the head, eyes, and mouth. The code uses React 16.9.0 with `ReactDOM.render` to inject the SVG into the DOM, and all shapes are defined with SVG circle elements. The example demonstrates responsive sizing by deriving coordinates from `window.innerWidth` and `window.innerHeight`.

Feb 12, 2022

Loading thumbnail…

smilly face

A smiling face rendered as a yellow SVG circle with two black eyes and a mouth, drawn using React and D3. The face is centered on a 1000x500 canvas, with the mouth defined by a D3 arc generator using angular coordinates. The eyes are positioned via relative offsets from the center, and all shapes use a consistent stroke width for a cartoon-like appearance. The code imports D3’s arc function and uses React’s rendering to output the SVG elements directly.

Feb 11, 2022