emelrix

@emelrix·3 public vizzes

Smiley face p1

A smiley face is drawn using React and D3 arcs, with yellow circular face, black stroke, two eyes, and a downward-curving mouth. The visualization is generated procedurally from hardcoded dimensions rather than external data. It uses React to render SVG elements and the `d3.arc` function to create the mouth path, with all coordinates and radii defined as constants. The face is centered via an SVG transform, and the eyes are positioned using offset values.

Apr 5, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example creates a simple smiley face using raw SVG shapes. It shows a yellow circle for the head, two smaller black circles for eyes, and a stroke to outline the face. The code renders directly to an SVG element with hard-coded coordinates, using no external libraries or data sources. The face is static, with the author noting it is only half way towards a complete smile, as the mouth is not yet drawn. The rendering approach is straightforward SVG markup within an HTML document.

Apr 5, 2021

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle with a black stroke forms the head of a smiley face, with two solid black circles for eyes and a thick arc for the mouth. The example demonstrates how to compose SVG shapes using React components and D3’s `arc()` generator to calculate the mouth path. It renders the face centered in a 960 by 500 SVG canvas, using fixed numeric values for eye offset, radius, and mouth dimensions. The code uses React 16.7 with the `ReactDOM.render` method, D3 v6’s `arc` function, and JSX within an SVG element.

Apr 5, 2021