Morgan

@cl1110·8 public vizzes

Fork of Mouse Follower

This example loads a CSV dataset of CSS named colors using D3’s `d3.csv` utility and displays a summary of that data’s size, row count, and column count. The React application uses the `useState` hook to manage the fetched data, initially showing the text “loading” until the asynchronous request resolves. Once loaded, the message is rendered inside an HTML `<pre>` element, with the total file size computed via `d3.csvFormat`. The visualization is minimal, focusing on the data-loading and state-management workflow rather than graphical output.

Dec 14, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading a CSV dataset of CSS named colors from a remote URL and displaying a concise summary of its contents using React state management. The app initializes with a “Loading...” message, then uses D3’s `csv` utility inside a `useEffect` hook to fetch the data, which is stored via `useState`. Once loaded, the `message` function computes the file size, row count, and column count using `d3.csvFormat` and string concatenation, rendering the result in a large `<pre>` element. The visualization relies on React’s component lifecycle and D3’s data-loading API, without any graphical charts.

Dec 14, 2024

Loading thumbnail…

Loading Data with React & D3 MORGAN

This example shows how to load and summarize a CSV dataset of CSS named colors using React and D3. The React component uses the `useState` and `useEffect` hooks to fetch data with D3’s `csv` function, storing the parsed result in state. While the data loads, the display reads “Loading...”; once ready, it formats a summary message showing the file size in kilobytes, row count, and column count using `d3.csvFormat` and the data’s `.length` and `.columns` properties. The visualization itself is a plain text readout, not a chart.

Dec 14, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React component renders a single SVG circle that follows the mouse cursor across the viewport. The application tracks pointer movement through the SVG's `onMouseMove` event handler, updating React state with the cursor's `clientX` and `clientY` coordinates. D3 v5 is loaded via CDN but is not actively used in the interaction logic. The circle's `cx` and `cy` attributes bind directly to the state, causing the shape to re-render at the new position on every mouse movement.

Dec 14, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to load and parse CSV data in a web page using the Fetch API. It sets up an `async` function that retrieves a text file from a GitHub gist URL containing CSS named colors, then logs the raw text to the browser console. The code also includes commented-out variations of the fetch calls, showing alternative ways to handle the promise chain. The page itself has no visual rendering; its purpose is to illustrate the basic mechanics of fetching remote data with JavaScript's `fetch` and processing the response as text.

Nov 27, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, then displaying basic statistics about the dataset in a large text format. Using the D3.js library (version 5), the code employs the `d3.csv` function to fetch and parse the CSS Named Colors dataset, then reports the file size in kilobytes, the number of rows, and the number of columns. An alternative commented-out approach using the Fetch API with async/await and `d3.csvParse` is also included.

Nov 27, 2024

Loading thumbnail…

SMILY FACES

A grid of 300 randomized smiley faces renders in React with SVG, each face built from a yellow background circle, two eyes, and an arc-based mouth. The code composes reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—using D3’s `arc` generator to define the mouth path. Every face varies slightly in stroke width, eye offset, eye radius, and mouth dimensions via `Math.random()`, producing a playful, procedurally generated pattern inspired by a tutorial halfway through building a smiley face.

Oct 9, 2024

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page with no visible content, serving as a starting point for web-based projects. The index.html file contains only the basic document structure—a DOCTYPE declaration, html, head, and empty body—with no JavaScript or styling. The page includes a title element and embeds a YouTube video via an iframe. It does not use any data visualization libraries or APIs, relying solely on standard HTML syntax to render an otherwise blank page.

Oct 7, 2024