Pierre Tabet

@tabpier·4 public vizzes

Fork of Smiley Face Part III

This example shows a yellow smiley face composed of a circular head, two eyes, and an arc-shaped mouth, all rendered as SVG elements. The visualization is built with React components that generate the SVG markup, while D3’s `arc` function calculates the mouth’s path geometry. Key parameters like eye offset, radius, and stroke width are defined as constants. The code uses React 16.9 for component rendering and D3 v5 for the arc generator, with all shapes positioned relative to a central translation group.

Nov 19, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a minimal React application that renders a static yellow SVG face with two black-outlined eyes, stopping short of completing a full smiley face. The code constructs the SVG elements directly in HTML comments, while the visible React component simply displays a heading and logs library versions. It imports React and ReactDOM from unpkg CDN links, using `ReactDom.render` to mount the app into the DOM. The rendering approach relies on standard SVG `circle` elements for the face and eyes, with coordinates calculated relative to the canvas dimensions.

Nov 19, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a static SVG smiley face: a yellow circle with a black outline, two solid black eyes, and a path for a mouth. The code uses React to manage the SVG elements inside an index.html file, with coordinates hard-coded for a 960×500 viewport. The rendering approach relies on standard SVG circle elements, positioned via cx and cy attributes, with the mouth path drawn using a bézier curve. The example demonstrates a simple, declarative visualization built with React’s JSX-style markup.

Nov 19, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that centers a single message using CSS. The page contains no visible content in the body, so the styled `.message` element is effectively empty. The code uses plain HTML for structure, a CSS rule to set the font size and alignment, and includes no JavaScript logic or data bindings. It demonstrates the basic wiring of an HTML document with embedded styles, serving as a starting point for further development rather than presenting any data or visualization.

Nov 19, 2021