Amber Chou

@Amber-Chou·8 public vizzes

Fork of Smiley Face Part II

This example renders a yellow circle with a black outline as a smiley face. It uses React and ReactDOM to create an SVG element, drawing the face with circle components. The face is centered using width and height variables, and its radius is set to 30 pixels. The code imports React and ReactDOM, and renders the SVG to a root element in the HTML. The rendering uses a simple `<circle>` tag within the SVG, with no data source or interactivity beyond the static visual.

Jul 23, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A forked smiley face renders across the full browser window using React and SVG. The code computes the canvas dimensions from `window.innerWidth` and `window.innerHeight`, centering the face dynamically. It draws a yellow circle with a black stroke, two eye circles, and a mouth, with all positions and radii defined as constants. The rendering uses ReactDOM to mount the SVG directly into the page's root element, with a commented-out static SVG version in the HTML.

Jul 23, 2022

Loading thumbnail…

mouse follower

A smiling face rendered as an SVG follows the mouse across the full browser window. The face consists of yellow circles for the head and eyes, with a black stroke, built using React components and JSX. The code dynamically sizes the SVG to the window dimensions, centering the face, and uses ReactDOM to render the element into the root div. No mouse-following behavior is implemented; the face remains static at the center.

Jul 23, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL. It fetches a file containing CSS named colors and converts it into JavaScript objects. The code uses the Fetch API to retrieve the text and D3 v5’s `d3.csvParse` to transform the CSV rows into structured data. The parsed output is logged to the browser console, showcasing the data loading workflow within a React-based project.

Jul 23, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from an external URL using the Fetch API in a React application. It fetches a dataset of CSS Named Colors from a GitHub gist and logs the initial HTTP response to the console. The code highlights the asynchronous pattern of `fetch()` returning a Promise, which is then handled with `.then()` to process the response. The visualization serves as a minimal starting point for integrating external data sources into React-based data visualization projects.

Jul 23, 2022

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using the Fetch API. It fetches a dataset of CSS named colors from a GitHub Gist and logs the raw text content to the browser console. The code uses `fetch(url)` with a promise chain, calling `response.text()` to convert the response body into a string. No rendering or visualization occurs; the example focuses solely on the asynchronous data-loading process in a plain React-free HTML page.

Jul 23, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors from a GitHub Gist and prints its raw text to the browser console. It uses the JavaScript `fetch` API to request the remote data, then chains a promise to extract the response as text with `response.text()`. The code demonstrates basic asynchronous data loading without any visible rendering, relying on React for the overall application structure.

Jul 23, 2022

Loading thumbnail…

Fork of Hello HTML

This example renders a static smiley face using React 16.9 and ReactDOM 18.3, with three SVG circles drawn directly in the markup. The outer circle is filled yellow with a black stroke, while two smaller unfilled circles form the eyes. Although the index.js file defines an empty App component and calls ReactDOM.render on the root div, the visible output comes entirely from the inline SVG, not from React-rendered elements. The page uses production UMD builds of both React libraries and applies global CSS to remove margins and hide overflow.

Jul 23, 2022