AdamRyanUK

@AdamRyanUK·5 public vizzes

Smiley Face

A smiley face renders as a pink circle with a purple outline and two dark eye dots on an SVG canvas. The example demonstrates minimal React integration, importing React in the JavaScript file while the HTML markup defines the SVG shapes directly. Using plain SVG `<circle>` elements, it positions a large 245-radius face at the center, with smaller 40-radius eyes placed symmetrically. React loads via a CDN script tag, though the visualization itself relies solely on static SVG attributes without dynamic state or interaction.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a yellow smiley face with black outlined eyes and a curved mouth using React and D3’s `arc` generator for the mouth path. The face is centered within an SVG canvas, and the code overlays a complex pattern of concentric, dashed yellow circles created through nested SVG `<use>` references and `defs`. The implementation relies on React for component structure and D3 v5 for generating the arc geometry, with the decorative circle pattern drawn as static SVG elements.

Dec 23, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a large face using React and D3, with a radially gradient-filled circle for the head, eyes, pupils, and an arc-based mouth. The SVG output is composed via React components, while the mouth shape is generated using the D3 `arc()` function with explicit start and end angles. All shapes are positioned using computed offsets and radii, and the face is centered within a fixed 960-by-500 viewport. The page loads React 17 and D3 v7 from CDNs, and the code demonstrates a minimal but complete React-D3 integration without external data.

Dec 22, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a smiley face as an SVG composition built with React and D3.js. A radial gradient, defined in the SVG `<defs>` element, colors the main circle yellow with an orange rim, while smaller white circles with black pupils form the eyes. The orange mouth is drawn using a path with a computed `d` attribute from the `mouthArc()` function. All shapes are grouped and translated to the canvas center, and the React app is mounted into the `#root` div within a minimal HTML page.

Dec 22, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal static webpage displaying the text “Hello Curran!” centered on the screen. It uses plain HTML for structure, CSS for styling the message with a large font size and center alignment, and no JavaScript logic. The rendering approach is entirely document-based, relying on the browser’s default text layout. It demonstrates the simplest possible setup for a VizHub visualization, serving as a baseline for adding interactive or data-driven components.

Dec 20, 2021