futureofworld

@futureofworld·4 public vizzes

Fork of HTML Starter

This example fetches a CSV file of CSS color names and displays its size, row count, and column count in a large HTML text block. The page combines static markup with D3 v7’s `csvParse` to transform the fetched text into a structured dataset. It uses the Fetch API to load the remote file, then writes the computed statistics into a `<pre>` element via `textContent`. A separate styled div shows a static “Hello HTML!” message, demonstrating basic CSS and JavaScript integration in a minimal HTML starter.

Feb 4, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A fork of the Smiley Face Part II example renders a single, small circle that follows the mouse cursor within a fixed 960 by 500 SVG viewport. The application uses React's state management with `useState` and `useCallback` to track cursor coordinates from the `onMouseMove` event. It imports Three.js and attempts to parse a CSV of CSS color names from a GitHub gist, though the parsed data is only logged to the console and does not affect the visualization. The rendering is done entirely with SVG elements.

Feb 4, 2022

Loading thumbnail…

Smiley face

This example shows a simple smiley face drawn entirely with SVG shapes: a yellow circle for the head and two black circles for the eyes, centered in a 960-by-500 viewport. The face is not yet complete, as the mouth is missing. The visualization is built with React and D3 v7, using D3’s `arc` import (though unused in the final render) and hardcoded circle coordinates. React renders the SVG elements directly, with the head’s radius and stroke width derived from the center and height constants to keep proportions consistent.

Feb 1, 2022

Loading thumbnail…

Smiley face

A yellow circle with a black outline forms the face, containing two smaller black circles as eyes. The example demonstrates static SVG rendering with React, though the React library is loaded but not actively used for drawing. Instead, the visualization is created directly using SVG elements like `circle` for the face and eyes, with hardcoded coordinates and styling. The page loads React and ReactDOM via UMD bundles, but the final graphic relies purely on raw SVG markup within the HTML.

Feb 1, 2022