HuchenhaoArvin

@HuchenhaoArvin·6 public vizzes

Fork of Smiley Face Part III

This interactive SVG visualization renders a smiling face composed of geometric shapes, including a yellow head, two eyes, and a curved mouth. Built with React and D3.js v5, the code uses D3’s `arc` API to generate the mouth path, while circle and path SVG elements are positioned relative to the viewport center. The face is drawn inside a 960x500 coordinate system, with stroke widths and offsets defined as constants.

Sep 16, 2021

Loading thumbnail…

Working make a face

A grid of randomly generated faces demonstrates how React components can encapsulate D3 shape generation for scalable vector graphics. Each face uses `d3.arc` to create a smiling mouth, while SVG circles form the background, eyes, and facial contours. The `FaceContainer` component translates a centered group, and props like `eyeOffsetX` and `mouthRadius` control variation across eighteen instances. Rendered via React DOM with D3 v7, the example shows composable, data-driven visual elements without external datasets.

Aug 26, 2021

Loading thumbnail…

Change it! the Face

A stylized face is rendered as a pink ellipse with black outlines, formed by two smaller ellipses for eyes placed symmetrically on either side of a central nose. The composition presents a half-way point toward a smiley, without a mouth. Built with React and D3 v7, the visualization uses the `d3.arc` API to define the face shape and positions elements via SVG transforms, with hard-coded pixel coordinates for the head and features.

Aug 22, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a static smiley face using SVG circles, with the head, eyes, and implied mouth drawn through explicit `cx`, `cy`, and `r` coordinates. It embeds React via `React.createElement` and `ReactDOM.render` to manage the page, but the core visualization is plain SVG markup. The code also includes a YouTube iframe, though the interactive chart itself relies entirely on hardcoded SVG attributes rather than any data-driven simulation or reactive updates. Yellow and black strokes define the face’s outline, while the eye positions are fixed offsets from the center.

Aug 21, 2021

Loading thumbnail…

Fork of Smiley Face Part V

Built with React and D3 v5, this example renders a static smiley face composed of three modular components: a yellow background circle, two black eyes, and a mouth drawn with the `d3.arc()` path generator. Each component receives its positioning and sizing values as props, demonstrating how to structure a React visualization into separate ES6 modules and fragments. The SVG output is centered within a 960×500 viewport, with all shapes positioned relative to a central translated group.

Aug 20, 2021

Loading thumbnail…

Untitled

This example displays a single embedded YouTube video within a bare-bones HTML page titled “Fork 123 of Hello HTML.” The page contains no interactive data visualization; instead, it relies on an `<iframe>` to load the video player from YouTube’s embed API. The code uses standard HTML elements (`<h1>`, `<body>`, `<iframe>`) with no external JavaScript libraries or rendering techniques. The visualization is static, showing only the video player and heading text as its entire content.

Aug 19, 2021