MegRocky

@MegRocky·6 public vizzes

Fork of Fork of Fork of Hello HTML

A grid of randomly generated cartoon faces appears, each rendered as an SVG with a yellow circular background, eyes, brows, and a mouth. The faces vary in feature size and position, driven by random values passed as props from React components. The example uses React to compose reusable components like `Face`, `Eyes`, and `Mouth`, while leveraging D3’s `arc` generator to create the curved mouth and brow paths. All output is drawn with SVG elements on a blank page.

Jun 23, 2021

Loading thumbnail…

Csv Parse

This example demonstrates how to fetch and parse a CSV file containing named CSS colors, then calculate and log basic statistics about the dataset. It uses the Fetch API to retrieve the remote CSV file and d3.csvParse to convert the raw text into an array of objects. The code counts the number of rows and estimates the file size in kilobytes, though the results are not displayed visually. The example highlights the basic workflow of loading tabular data with d3 v5 in a minimal HTML page.

Jun 23, 2021

Loading thumbnail…

mouse follower

A yellow smiley face follows the mouse cursor across an SVG canvas. The face’s components—eyes, brows, and an arc-shaped mouth—are built with React state and D3’s `arc` generator, repositioned via a `transform` attribute on each mouse move. The example uses `useState` and `useCallback` to track cursor coordinates, and ReactDOM renders the interactive graphic.

Jun 23, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file’s size, row count, and column count for a dataset of CSS named colors. Using d3.csv from D3 v5, it fetches the remote CSV and processes the resulting array. The code also includes commented alternatives that use fetch with async/await and d3.csvParse, plus a “pyramid of doom” example, to illustrate different parsing strategies. The parsed data is rendered as plain text in a large-preformatted element.

Jun 23, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

This example renders a minimal yellow smiley face as a static SVG graphic using React and D3.js version 6. The face consists of a large circle for the head, two smaller circles for eyes, and D3's `arc` function to generate the path data for the mouth and eyebrows. The React application uses inline SVG elements within a `<g>` transform to position features around the center coordinate. The code imports `arc` from the D3 library and demonstrates how to construct and render arc-based shapes in a React component.

Mar 16, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face rendered as SVG in a React application. The face is composed of a circle for the head, two smaller circles for the eyes, and a mouth drawn as an arc path. The code uses React 17 and ReactDOM to mount the component, while D3 v6’s `arc` function generates the mouth’s path data. The SVG is statically defined with fixed dimensions and coordinates, and the component structure is defined in `index.js` while `index.html` provides the root mount point.

Mar 15, 2021