Skip to main content
Log in
T

tdinh09

@tdinh09·7 public vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from reusable React components, rendered as an SVG that fills the browser window. The face consists of a yellow background circle, two black eyes, and a mouth created using the `d3.arc()` API from D3 v7. The React components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) compose the visualization, with the face centered using SVG transforms. The code runs in a React 16.9 production environment and imports D3 directly for the arc path generation, demonstrating a minimal component-based approach to SVG drawing.

Aug 19, 2022
Loading thumbnail…

Fork of Smiley Face Part II

The visualization displays a classic smiley face that resizes dynamically to fill the browser window. Drawn with React, the face uses SVG circles for the head, eyes, and background, while a commented-out section in the HTML shows the original hard-coded dimensions. The React code reads `window.innerWidth` and `window.innerHeight` to set the canvas, centers the face via a translated group, and calculates the face radius from the viewport height. ReactDOM renders the SVG directly into the `#root` element, with stroke and fill properties defining the character's appearance.

Aug 18, 2022
Loading thumbnail…

Fork of Smiley Face Part II

The visualization displays a classic smiley face that resizes dynamically to fill the browser window. Drawn with React, the face uses SVG circles for the head, eyes, and background, while a commented-out section in the HTML shows the original hard-coded dimensions. The React code reads `window.innerWidth` and `window.innerHeight` to set the canvas, centers the face via a translated group, and calculates the face radius from the viewport height. ReactDOM renders the SVG directly into the `#root` element, with stroke and fill properties defining the character's appearance.

Aug 17, 2022
Loading thumbnail…

Fork of Smiley Face Part II

The visualization displays a classic smiley face that resizes dynamically to fill the browser window. Drawn with React, the face uses SVG circles for the head, eyes, and background, while a commented-out section in the HTML shows the original hard-coded dimensions. The React code reads `window.innerWidth` and `window.innerHeight` to set the canvas, centers the face via a translated group, and calculates the face radius from the viewport height. ReactDOM renders the SVG directly into the `#root` element, with stroke and fill properties defining the character's appearance.

Aug 17, 2022
Loading thumbnail…

smiley part 1

This example renders a static smiley face using inline SVG elements. It shows a large yellow circle for the head and two smaller black circles for the eyes, all with thick black strokes. The page uses React and ReactDOM to inject a simple JSX heading into an HTML root element, while the SVG markup is written directly in the index.html file. The visualization is minimal, focusing on basic shape drawing without interaction or data.

Aug 17, 2022
Loading thumbnail…

Fork of Smiley Face Part II

The visualization displays a classic smiley face that resizes dynamically to fill the browser window. Drawn with React, the face uses SVG circles for the head, eyes, and background, while a commented-out section in the HTML shows the original hard-coded dimensions. The React code reads `window.innerWidth` and `window.innerHeight` to set the canvas, centers the face via a translated group, and calculates the face radius from the viewport height. ReactDOM renders the SVG directly into the `#root` element, with stroke and fill properties defining the character's appearance.

Aug 17, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circular face with black outline is drawn on an SVG canvas, showing three circles: one large head and two smaller eyes positioned symmetrically. The rendering uses static SVG elements defined directly in the HTML, without any JavaScript or D3.js interaction. The code sets explicit coordinates and radius values for each circle, with the head centered at (480, 250) and eyes placed at (350, 180) and (600, 180). This example is a fork demonstrating basic SVG shape creation for a smiley face, using only native markup with styling applied through CSS attributes.

Aug 17, 2022