RonandLion

@RonandLion·8 public vizzes

Loading and parsing CSV data

This example demonstrates the simplest possible workflow for fetching an external CSV file from a GitHub gist URL using JavaScript's built-in `fetch` API. The page shows no visualization, instead logging the raw `Response` object to the console, which would contain the CSV text if parsed. The code relies on the modern `fetch` function and a hardcoded URL pointing to a CSS color dataset hosted on GitHub, but it does not parse or render the data, making it a minimal first step toward loading external tabular data.

Aug 24, 2020

Loading thumbnail…

Hello HTML

This example demonstrates the minimal structure of an HTML document. It consists of a basic page with a title and an empty body, showing the fundamental skeleton required for any web content. The code uses standard HTML markup, including the doctype declaration, html, head, and body elements. This serves as a starting point for building more complex web pages and visualizations, as it contains no external libraries or styling.

Aug 24, 2020

Loading thumbnail…

Smiley Face Part VI

A grid of randomly generated smiley faces shows how small variations in facial features create distinct expressions. The React components accept numeric props for eye offset, eye radius, and mouth curvature, while each face is rendered as SVG circles and a D3 arc path that forms the smiling mouth. The project imports React and D3 v5 directly via CDN, and the unseeded `Math.random` calls in the array map mean every page load produces a unique set of emoji.

Aug 7, 2020

Loading thumbnail…

Smiley Face Part V

A yellow smiley face is rendered in the center of a 960-by-500 SVG canvas. The face consists of a filled yellow circle with a black stroke, two black circular eyes offset symmetrically from the center, and a black arc-shaped mouth. The code uses React components to structure the face, eyes, and mouth, with rendering handled by ReactDOM. The mouth is generated using the D3 arc API, which defines its inner and outer radii and angular span. The face and eyes are plain SVG circles with defined radii and positions, while the overall composition is translated to the canvas center.

Aug 7, 2020

Loading thumbnail…

Smiley Face Part IV

A static smiley face is drawn with yellow circular face, black outlined eyes, and a black arc-shaped mouth. The SVG rendering uses React to structure the graphic and D3’s `arc` function to compute the mouth’s path. The face is centered with a stroke width of 25, and the mouth is an arc from 90 to 270 degrees with a defined radius and width.

Aug 7, 2020

Loading thumbnail…

Smiley Face Part III

A React and D3.js (v5) visualization renders a yellow smiley face in SVG, with black circular eyes and a thick stroked outline. Using D3's `arc()` API, a path creates the smile as a semicircular ring, with its inner radius and start/end angles defining the curve. The composition is centered via an SVG `<g>` transform, with fixed pixel coordinates for facial features.

Aug 6, 2020

Loading thumbnail…

Smiley Face Part II

This example renders a yellow smiley face in an SVG using React. It draws a large yellow circle with a black stroke as the face, and two smaller black circles as eyes, positioned symmetrically around the center. The code uses React’s `createElement` through JSX and mounts the SVG via `ReactDOM.render` into a `div`. The SVG dimensions and circle radii are defined as constants, with coordinates calculated relative to the center.

Aug 5, 2020

Loading thumbnail…

Smiley face Part I

A simple SVG drawing depicts a yellow circle with a black outline, representing a face. Two smaller black circles serve as eyes, positioned symmetrically within the larger shape. The code uses the SVG markup directly within an HTML file, setting the canvas dimensions to 960 by 500 pixels and applying coordinates to place each circle. The drawing is static, with no animation or interaction, and the face appears incomplete without a mouth.

Aug 5, 2020