allicia1202

Mouse Follower

A yellow circle follows the cursor across an SVG canvas. The visualization tracks the mouse's absolute client coordinates and updates the circle's `cx` and `cy` attributes in real time. Built with React, it uses the `useState` hook to store the mouse position and an `onMouseMove` handler on the `<svg>` element to capture movement. The rendering is done via React's declarative SVG output, with the canvas sized at 960 by 500 pixels.

Sep 18, 2022

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSS Named Colors CSV dataset, fetched from a GitHub gist, showing the file size in kilobytes, row count, and column count in large text. The visualization uses D3.js v5’s `d3.csv` method to load and parse the remote CSV data asynchronously, then formats the parsed result with `d3.csvFormat` to calculate byte length. The interface renders the computed metrics inside a `<pre>` element, demonstrating a minimal data-loading and parsing workflow within a React framework context.

Sep 17, 2022

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSS Named Colors dataset, showing the file size in kilobytes, the number of rows, and the number of columns. The visualization uses D3.js v5, specifically the `d3.csv` method to load the CSV file and the `d3.csvFormat` function to measure the data length. The text is rendered in a large, fixed-size font within an HTML `<pre>` element, updating the message container dynamically once the data is parsed. The data source is a remote GitHub gist containing the named colors.

Sep 17, 2022

Fork of Smiley Face Part III

A smiling face is drawn using SVG shapes, composed of a yellow circle for the head, two black eyes, and a curved mouth created from an arc path. The visualization is built with React, which renders the SVG elements, while D3.js provides the arc generator function for the mouth’s shape. All positioning is calculated relative to the center of the viewport, with fixed pixel values for dimensions and offsets, and the rendering uses D3 v5 within a React framework.

Fork of Smiley Face Part III

Fork of Smiley Face Part V

A React-built smiley face rendered as an SVG, composed of a yellow background circle, two black eyes, and a curved mouth. The code splits reusable components into separate ES6 modules, using React Fragments to group the eyes. D3’s `arc` generator creates the mouth path based on specified radius and width, while the main app arranges all shapes within a centered SVG group using fixed pixel dimensions.

Fork of Smiley Face Part III

This example shows a smiling face composed of a yellow circle with two dark eyes and a curved mouth, rendered as an SVG graphic. The face is centered on a 960 by 500 canvas using React components that generate SVG elements, with D3’s `arc` function creating the mouth’s path. Coordinates for the eyes, mouth radius, and stroke width are defined as constants, and the face is grouped and translated to the center. The code uses React 16.9 and D3 v5, with no external data source.

Fork of Let's Make a Face Part I

This example shows a simple smiley face drawn with SVG primitives, consisting of a yellow circular head, two black eyes, and an arc-based mouth. The face is centered within a 960×500 viewport using a `<g>` transform. The code uses React for component rendering and D3 v7’s `arc` generator to compute the mouth path with specified inner and outer radii and angular extents. Circle elements define the head and eyes, with fixed offsets and radius values, while stroke styling creates the face’s outline.

Fork of Let's Make a Face Part I

A basic SVG face uses three circles to depict a yellow head with black outline and two dark eyes, forming a static, unfinished smiley. The code defines the SVG canvas at 960 by 500 pixels and positions each circle via explicit `cx` and `cy` attributes, with the head's `r` set to 245 and `stroke-width` of 10. No JavaScript libraries are used; the rendering relies purely on inline SVG elements with hardcoded coordinates. This example demonstrates a minimal, non-interactive vector graphic.

Fork of Fork of React Starter

This example renders a static “Hello React!” message centered on the page. It uses React 16.13.1 to define a functional component and `ReactDOM.render` to mount it into a `#root` div. The styling is applied via an inline CSS class that sets the font size to 13em and centers the text. The visualization does not include any data or interactive behavior, serving as a minimal demonstration of a React setup.

Fork of React Starter

This example displays a full-screen “Hello React!” message centered on the page. It uses React 16.13.1 and ReactDOM to render a single `<div>` element with the class `message`. The styling applies a large 13em font size and center alignment via CSS. The code imports React and ReactDOM, defines a simple functional component, and mounts it to the `#root` element.

Fork of Hello HTML

This example is a minimal HTML page that displays no visible content; it is a fork of the "Hello HTML" template, showing an empty document with only a title in the browser tab. The underlying structure uses plain HTML markup, defining the page’s skeleton with the `<!DOCTYPE html>` declaration and a basic `<html>` element containing a `<head>` and an empty `<body>`. No data-visualization libraries, APIs, or rendering approaches are present; the page simply demonstrates the fundamental building blocks of an HTML document.