Chang Kai Boon

@kaiboon0216·2 public vizzes

Fork of Smiley Face Part III

This example renders a smiley face using React and D3, drawing a yellow circle with black stroke, two eyes, and a mouth as a single SVG path. The face is centered within a 960×500 viewport, with dimensions and positions defined by constants for offsets and radii. The code imports the `arc` function from D3 to generate the mouth’s curved shape by specifying inner and outer radii and start/end angles. React manages the SVG elements declaratively, while D3 v5 handles the geometric computation, with all rendering occurring via SVG markup.

Mar 16, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face drawn using SVG shapes inside an HTML page. The face is built with a single large yellow circle for the head, which has a black outline, and two smaller black circles for the eyes. The React component imports the React and ReactDOM libraries, and it calculates the circle positions and sizes based on the browser window’s dimensions. The rendering is achieved through a React component that returns an SVG element, relying on the window’s width and height for the layout.

Mar 16, 2022