laurence beattie

@lolbeat·10 public vizzes

UN Populations Bar Chart with React & D3

This example visualizes UN population data for 2019 as a bar chart, with each country represented along the y-axis using a band scale and population values on the x-axis. The React app loads CSV data via D3’s `csv` utility, parses the ’2020’ column into numeric form, and renders an SVG. It uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading and display a loading message until the dataset is ready. D3 scales (`scaleBand`) and SVG elements are used for layout, though the chart’s bars are not yet drawn in the provided code.

Nov 1, 2021

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors is rendered as an SVG, with each color mapped to a pie slice from a CSV dataset loaded via d3.csv. The visualization shows all named colors arranged in a full circle, using d3.pie and d3.arc to compute slice angles and paths. React constructs the SVG elements, mapping each data row to a <path> filled with its RGB hex value. The pie arcs have an inner radius of zero and an outer radius equal to the full width, producing a dense, colorful wheel.

Oct 6, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data, displaying the file size, row count, and column count as text. It uses `d3.csv` to fetch and parse the remote CSV file from a GitHub Gist, then formats the results with `d3.csvFormat` to calculate kilobytes. A commented alternative shows the same process using `fetch`, `async`/`await`, and `d3.csvParse`. The visualization is minimal—a single `<pre>` element updated with the parsed data summary, built with D3 v5 in a React framework.

Sep 20, 2021

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor across a 960 by 500 SVG canvas, updating its position in real time as the user moves the pointer. The React component uses `useState` to store the mouse coordinates and `useCallback` to handle the `onMouseMove` event, passing the event's `clientX` and `clientY` values to reposition the circle via its `cx` and `cy` attributes. It renders with React 17 and D3 v7.

Sep 17, 2021

Loading thumbnail…

Hello HTML

This example presents a minimal HTML page that contains no visible content in the browser window. The `index.html` file defines the document structure with a `<head>` section that declares the page title and an empty `<body>` element. The page deliberately uses no external libraries, JavaScript, or CSS, serving as a bare-bones starting point for web development. Its purpose is to demonstrate the absolute minimum required for a valid HTML document while rendering a completely blank page.

Sep 13, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It displays the file size, row count, and column count of a CSS Named Colors dataset from a GitHub gist. The code uses `d3.csv` with a Promise to fetch and parse the data, then formats a summary message with `d3.csvFormat`. An alternative commented-out approach uses `fetch`, `async/await`, and `d3.csvParse`. The result appears as large text in a `<pre>` element.

Sep 13, 2021

Loading thumbnail…

Make a Face part VI

This example displays a grid of 18 randomly generated cartoon faces, each composed of a yellow circular background with black stroke, two eyes, and a mouth. The faces are rendered as SVG elements defined by React components (`Face`, `Eyes`, `Mouth`, `BackgroundCircle`), where the `Mouth` uses `d3.arc` to generate a half-ring path. Each face’s dimensions—stroke width, eye offset, eye radius, mouth radius, and mouth width—are randomized between faces via `Math.random` within `index.js`, creating a playful ensemble of unique smiles. The rendering is handled by React’s `ReactDom.render`, producing a static composition of layered SVG primitives.

Sep 13, 2021

Loading thumbnail…

Smiley transforms

A smiling face is drawn with SVG shapes, centered on a yellow background circle, and composed of two black eyes and a curved mouth. The example demonstrates how to compose and transform a simple graphic using React-defined SVG components, including a `BackgroundCircle`, `Eyes`, and a `Mouth` built with d3’s `arc` generator. The mouth path is created by specifying inner and outer radii and angular extents, while the entire face is positioned and scaled via an SVG `transform` attribute applied to a group element.

Sep 10, 2021

Loading thumbnail…

Smiley with React & D3

This example shows a classic smiley face rendered as an SVG graphic, centered on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two eyes, and an arc-shaped mouth. The visualization is built using React to manage the SVG elements, while D3’s `arc` function generates the mouth’s path data by specifying inner and outer radii and angular start and end points. All shapes are declared declaratively within the React component and rendered via `ReactDom.render`.

Sep 8, 2021

Loading thumbnail…

Fork of Hello HTML

A React application renders a static SVG smiley face using D3’s arc generator to draw a mouth. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth path created with `d3.arc()`. The code uses React 17 and D3 v7, with coordinates and dimensions hardcoded in the script. Rendering is done through React DOM into an SVG element, with the arc’s inner and outer radii and angles specified directly in the `arc()` configuration.

Sep 8, 2021