tobyviz

@tobyviz·5 public vizzes

Untitled

This example renders a simple static face using two SVG circles for eyes on a larger yellow circle, all drawn directly in the index.html file. While the page loads React 17 and ReactDOM from a CDN, the index.js file defines an empty App component and does not use React for the visualization. The SVG markup sets a 960x500 canvas with a black-stroked yellow circle centered at (480,250) and two black eye circles, demonstrating basic SVG shape rendering alongside a minimal React setup.

Aug 21, 2021

Loading thumbnail…

Just the eyes

A yellow circle fills the viewport, framed by a thick black outline, with two smaller black circles positioned near its upper center to suggest a pair of eyes. The visualization is built with React and rendered as inline SVG, using hard-coded coordinates and radii for each circle. It relies on React’s `ReactDOM.render` to mount the component, demonstrating a minimal, code-driven approach to static shape composition.

Aug 15, 2021

Loading thumbnail…

face-off

A yellow smiley face rendered as a set of SVG circles sits centered on a black-outlined head, with two dark eyes offset symmetrically. The React app uses hardcoded numeric constants for dimensions, stroke width, eye offset, and radius, drawing the face via three `<circle>` elements. Rendered with ReactDOM into a full-viewport SVG, the visualization demonstrates static geometric composition without interactivity or data binding, relying solely on declarative JSX props. The code leverages React 17’s production build and inline SVG, with no external data source or animation.

Aug 15, 2021

Loading thumbnail…

Fork of Hello HTML

This visualization shows a simple SVG face composed of a large yellow circle with a black outline and two smaller black circles representing eyes. It is a static fork of the “Hello HTML” example, rendered entirely through inline SVG elements rather than JavaScript libraries. The code defines the circles directly in the HTML with explicit width, height, and coordinate attributes, using basic SVG shape elements without any data binding or interactivity.

Jul 28, 2021

Loading thumbnail…

Fork of Hello HTML

This example demonstrates the minimal structure required to begin working with D3.js version 3. It shows an empty HTML page with a document title and a script reference to the D3 library, but no visual output or interactive elements. The code defines a basic skeleton using the standard `<!DOCTYPE html>` declaration and `<html>`, `<head>`, and `<body>` tags. No data is loaded, and no D3 functions such as `d3.select` or `d3.append` are called, making it a starting point for further development rather than a finished visualization.

Jul 27, 2021