Shawty199

@Shawty199·3 public vizzes

Smiley face with js

This example draws a classic smiley face inside an SVG canvas using React components and D3.js. The face consists of a yellow circle with a black stroke, two eyes, and a curved mouth. The mouth is generated using D3's `arc` API to create an arc path with specified inner and outer radii. All elements are positioned relative to a center point using SVG transformations, with dimensions and offsets controlled through React props.

Jan 19, 2023

Loading thumbnail…

Smiling Face w/ JS, React, and D3

A smiling face composed of a yellow circle, two black eyes, and an arc-shaped mouth is rendered as an SVG. The example demonstrates how to build reusable chart components with React and D3, using the `arc()` generator from `d3` to construct the mouth path. Static values for dimensions and positions are defined in `index.js`, and React components such as `BackgroundCircle`, `Eyes`, and `Mouth` receive these as props to render the final graphic.

Jan 17, 2023

Loading thumbnail…

Let's Make a Face

This example draws a yellow smiley face centered on a full-screen SVG. The face uses a circle for the head, two offset circles for the eyes, and a mouth path generated with a d3.arc that creates an open smile. React renders the SVG elements, while D3 v5 provides the arc geometry, with the viewport dimensions determined by window.innerWidth and window.innerHeight. The face is positioned using a translate transformation, and stroke widths and radii are defined as constants.

Jan 16, 2023