AoibhinnRed

@AoibhinnRed·13 public vizzes

Fork of Loading data with React and D3

This example renders a grid of 10-pixel squares, each filled with a CSS named color loaded from a remote CSV file. It uses React state to manage the fetched data, triggering a re-render once the data arrives via D3’s `csv` utility. The display initially shows “Loading…” before the color swatches appear, demonstrating data loading and state management in a React-D3 integration.

Oct 8, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates how React state and D3 utilities can work together to load and summarize a dataset. The page displays a plain-text message reporting the number of rows, columns, and file size of a CSV file containing CSS named colors, fetched from a GitHub gist. The code uses React’s `useState` and `useEffect` hooks to trigger a `d3.csv` request, storing the parsed data in state before formatting the summary with `d3.csvFormat`. Until the data arrives, the interface shows a “Loading…” placeholder. The project relies on React 16 and D3 v7.

Oct 8, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst of all CSS named colors, with each color rendered as a wedge in a full circle. The code loads color data from a CSV file using `d3.csv`, transforms it with `d3.pie` and `d3.arc`, then maps each slice to a React `<path>` element filled with the corresponding hex value. The visualization uses SVG within a React component, relying on `useState` and `useEffect` to fetch data asynchronously. The outer radius of each arc matches the SVG width, creating a dense, colorful disk.

Oct 8, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

Oct 4, 2021

Loading thumbnail…

Loading and parsing CSV data wih D3

This example demonstrates how to load and parse CSV data using D3 v7. It displays the row count, column count, and file size in kilobytes as large text on the page. The code uses `d3.csv()` to fetch and parse a CSV file from a GitHub gist, then processes the resulting data array and columns. It also includes commented-out alternatives using `fetch()` with `async/await` and `d3.csvParse()` to illustrate older parsing approaches.

Oct 1, 2021

Loading thumbnail…

Mouse follower

A React component renders an SVG circle that follows the mouse cursor across a 960 by 500 pixel canvas. The circle starts at the center and updates its position on every `mousemove` event via React's `useState` and `useCallback` hooks. The `handleMouseMove` callback reads the event's `clientX` and `clientY` coordinates to set the new circle center, using ReactDOM to mount the app. No data source is involved; the visualization simply tracks pointer movement in real time.

Oct 1, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load a remote CSV file and print its raw contents to the browser console. It uses the Fetch API with asynchronous `async`/`await` syntax to retrieve the text from a GitHub Gist URL containing color name and CSS value pairs. The code first defines an async function that fetches the URL and returns the response as text, then chains a `.then()` callback to log the parsed output. No visualization is rendered; the focus is solely on the data-loading and parsing step.

Sep 29, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, then displays a summary of the dataset—file size, row count, and column count—as large text. The visualization uses the D3.js library (v5) with its `d3.csv` function to asynchronously fetch and parse the remote CSV, and also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`. The rendered output updates a `<pre>` element, showing metadata about the parsed data.

Sep 28, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example displays a grid of eighteen smiley faces, each generated as a separate React component with randomized eye sizes. The visualization splits the face into modular components—background circle, eyes, mouth, and a container—using ES6 modules and React Fragments. It relies on D3 v5 for generating the mouth’s arc path via `d3.arc` and for the `range` function that creates the array of faces. All elements are rendered as SVG within a fixed-width canvas, with the smiley faces centered via SVG transforms.

Sep 28, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face centered in an SVG canvas, composed of a yellow background circle, two black eyes, and a D3-generated arc for the mouth. The React components `BackgroundCircle`, `Eyes`, and `Mouth` each render simple SVG shapes, with the mouth path created using the D3 `arc()` API. The face is positioned via an SVG `<g>` transform, and the code uses React 16 and D3 v5 to assemble the static visualization, with dimensions and offsets defined as constants. The final output is a fixed, non-interactive SVG graphic.

Sep 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and D3. The face is composed of SVG elements, including a background circle, two eye circles, and a mouth arc, all positioned relative to the window center. The code uses D3’s `arc` function to create the mouth path with specified inner and outer radii and start/end angles. React components manage the SVG structure, while D3 v7 provides the geometric calculations. The visualization demonstrates a component-based approach to building a simple chart-like graphic.

Sep 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A fork of the "Let's Make a Face" tutorial renders a yellow smiley face using React and SVG elements. The visualization defines a fixed canvas of 960 by 500 pixels, positioning a large circle for the head and two smaller circles for eyes based on calculated coordinates and offsets. React's declarative component structure, using `ReactDOM.render`, builds the SVG scene, with hardcoded style properties like fill color and stroke width specified directly in the markup. The example demonstrates a straightforward, programmatic construction of a basic geometric shape composition through React's JavaScript API.

Sep 23, 2021

Loading thumbnail…

Smiley face part 1

This example shows the early stages of a smiley face drawn as static SVG shapes: a yellow circular head with a black outline and two black eye circles, each with no fill. The design intentionally omits the mouth, leaving the face incomplete. The code uses inline SVG elements within an HTML page, setting explicit coordinates and radii for each circle, and CSS to hide scrollbars. The rendering approach is straightforward vector graphics with no JavaScript libraries or data sources involved.

Sep 22, 2021