pkhansen

@pkhansen·6 public vizzes

Fork of Smiley Face Part III

This example shows a smiley face composed of a yellow circular background, two eyes, and a curved mouth, all rendered as SVG elements. The face is centered within a 960-by-500 viewport using a translated `<g>` group. The code combines React components (`BackgroundCircle`, `Eyes`, `Mouth`) with D3’s `arc()` API to generate the mouth path, while React props control dimensions like radius, stroke width, and offsets. All styling comes from the SVG attributes, and the visualization relies on ReactDOM to mount the component tree.

Mar 8, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with black-outlined circular eyes, a mouth formed by an arc, and a small nose. The face is centered and sized to fill the browser window, using React components to structure the SVG elements. It imports the `arc` function from d3 to generate the mouth and nose paths, calculating coordinates and radii relative to the window dimensions. The visualization uses plain SVG circles and paths, with the D3 arc generator handling the curved shapes.

Mar 7, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face rendered in SVG, composed of a filled circle head, two filled eye circles, and a black arc-shaped mouth. The example demonstrates how React components can generate D3-generated path data, with the mouth created using the `d3.arc` API. The visualization is built with React 16.9 and D3 v5, where React handles the SVG element structure and D3 computes the mouth’s path coordinates. The face is centered in a 960-by-500 viewport with a thick black stroke.

Mar 7, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example demonstrates a happy face with a yellow circular head, black outline, two eyes, and a mouth, sized to fill the browser window. It uses React to render the SVG elements, computing the dimensions and positions based on the viewport’s width and height. The code relies on React 16.9 and ReactDOM to render the `<svg>` container and its nested `<circle>` shapes, with the head positioned via a `<g>` transform. The face’s proportions are derived from the window size rather than static data.

Feb 28, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple smiley face using hand-coded SVG elements, not a data-driven dataset. It shows a yellow circle with a black stroke for the head, and two smaller black circles positioned as eyes. The rendering relies solely on the SVG markup inside the page, using static coordinates for the center and eye offsets rather than dynamic computation or D3 methods. The face is intentionally incomplete, as the title suggests a partial step toward a finished expression, with no mouth or other features yet.

Feb 28, 2021

Loading thumbnail…

Fork of Hello HTML

A single yellow circle with a black outline sits centered on a blank SVG canvas, flanked by two smaller unfilled circles. The example demonstrates basic SVG rendering through direct HTML markup, using native `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes. The page loads with a zero-margin body and hidden overflow, rendering the static vector graphic without any JavaScript libraries or data sources. It is a minimal, hand-coded illustration of SVG shape creation and styling within an HTML document.

Feb 28, 2021