R

Richard Burd

@Richard-Burd·16 public vizzes

Loading thumbnail…

conditional (ternary) operator in a return value

This example shows a colorful, radial SVG pattern built from CSS named colors loaded from a remote CSV file. Each color is rendered as a thin arc segment radiating from the center, with alternating fills that create a pinwheel effect. The code uses React hooks (`useState`, `useEffect`) to fetch and store the data, then maps it to SVG `<path>` elements using the `d3.arc()` generator. A ternary operator alternates each segment's fill between the color value and black, while `fill-opacity` decreases with index.

Loading thumbnail…

Loading Data with Fetch

This example demonstrates how to load and display data from an external CSV file using the Fetch API in plain JavaScript, without any visualization libraries. It shows three different code patterns—nested promise callbacks, an async function with a variable URL, and an async function using the `.then()` method—all logging the raw text of the CSS named colors dataset to the console. The data comes from a raw GitHub gist containing a comma-separated list of color names and values. The example focuses on data loading techniques rather than visual output.

Loading thumbnail…

useEffect

This example demonstrates the React useEffect hook by showing how a web application responds to user-triggered state changes. Three buttons—Posts, Users, and Comments—update a resource type displayed as a header, while the hook logs lifecycle events to the console on mount, on resource change, and during cleanup. The code uses React 16.9.0 with the useState and useEffect APIs directly from the React and ReactDOM UMD builds, and it renders the interface into a root div using ReactDOM.render.

Loading thumbnail…

useState

A React counter demonstrates the `useState` hook for managing numeric state, with buttons that increment and decrement a displayed number. The code uses functional updates to avoid stale closures and shows how initial state can be provided either directly or lazily via a function, logging console messages to illustrate when each initialization runs. Rendering uses `ReactDOM.render` into a root div, with the interface styled by large CSS font sizes.

Loading thumbnail…

Early Stage Fetching

This example demonstrates early-stage data fetching with the browser’s native Fetch API, loading a CSV file of CSS named colors from a GitHub gist. It shows two asynchronous techniques: a standard promise chain using `fetch().then()` and `response.text()`, and an `async`/`await` pattern within a custom `myFetcher` function. Both approaches log the fetched text to the console, highlighting the sequence of network requests before any page content renders. The code uses no external libraries, relying solely on vanilla JavaScript and the Fetch API.

Loading thumbnail…

Completed Episode 24 Bar Chart

This bar chart displays the top ten countries by population in 2020, sourced from UN population data. The visualization uses React with SVG rendering, and D3 v5 utilities for data loading, scales, and formatting. Horizontal bars are drawn with the `scaleBand` and `scaleLinear` scales, while `csv()` loads the dataset, `format('.2s')` abbreviates tick labels, and `<title>` elements provide tooltips.

Loading thumbnail…

Left off here on 23/JAN/2022

This bar chart displays the top ten countries by 2020 population, sourced from a UN population CSV loaded via `d3.csv`. The React app uses `useState` and `useEffect` to fetch and slice the data, then renders an SVG with `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values. Gridlines and tick labels are generated with `xScale.ticks()`, while each bar is a `<rect>` positioned using the scales. The code includes a commented-out static circle example, indicating an early stage of the visualization project.

Loading thumbnail…

Datavis 2020 Episode 22 - Margins and Axes

This example shows a horizontal bar chart of the top ten countries by 2020 population, with bars extending from a shared left axis and value labels along the bottom. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population counts to screen coordinates. Margins are applied via a translated `<g>` group, and custom gridlines and tick labels are generated using `xScale.ticks()` instead of D3’s axis components. Data comes from a CSV of UN population estimates loaded through `d3.csv`.

Loading thumbnail…

Datavis 2020 Episode 21 - Making a Bar Chart with React & D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, loaded from an external CSV of UN Population data. The React component uses `useState` and `useEffect` to fetch and parse the data with `d3.csv`, then renders SVG `<rect>` elements. Scales are created with `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the quantitative population axis, with bar widths proportional to population values. Rendering is handled entirely through React JSX, while D3 v5 provides the data loading and scaling functions.

Loading thumbnail…

Mouse Follower

A single yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React’s `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, then re-renders the circle’s `cx` and `cy` attributes. It is built with React 16.9 and rendered as SVG, with the initial circle centered at a fixed width and height of 960 by 500 pixels.

Loading thumbnail…

Episode 25 Complete - Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for each flower specimen. The visualization uses d3.scaleLinear to compute x- and y-axis scales from the data extent, with React functional components rendering SVG marks and axes. Hovering over a circle reveals a tooltip displaying the petal length value via the native SVG <title> element. The chart fetches CSV data from a GitHub gist using d3.csv and applies tick formatting with d3.format, styled with Poppins typography and a teal color scheme.

Loading thumbnail…

Datavis 2020 Episode 20 - Visualizing Data with React & D3

A pie chart displays every CSS named color as a wedge with equal angular size, filled with its corresponding hex value. The chart uses React state to load the color data via `d3.csv`, then computes the arc paths with D3's `pie` and `arc` generators. Rendering occurs in an SVG, with the pie centered in a 960×500 viewport. Loading text appears before the data arrives.

Loading thumbnail…

Datavis 2020 Episode 16 - Loading Data in React

This example demonstrates how to load external data in a React application using D3 utilities, displaying file size, row count, and column count asynchronously. The app uses React hooks (`useState`, `useEffect`) to manage loading state and fetch a CSV file of CSS named colors from a GitHub gist. Once loaded, the `d3.csv` function parses the data, and `d3.csvFormat` calculates the data size in kilobytes for display. The interface shows a large text message before and after loading, with React re-rendering the output once the data arrives.

Loading thumbnail…

Datavis 2020 Episode 15 - Parsing CSV Data with D3

This example shows the size and structure of a CSV dataset by displaying its kilobyte size, row count, and column count as large text. It loads a remote CSV file containing CSS named colors using d3.csv, which parses the data asynchronously. The code also includes an alternative commented-out approach using the Fetch API with async/await and d3.csvParse to achieve the same result. The displayed values are generated by d3.csvFormat to measure the data length, plus data.columns to count columns.

Loading thumbnail…

Complete Smile Face

A grid of randomly generated smiley faces appears, each rendered as a yellow circle with black strokes, two eyes, and an arc-shaped mouth. The example demonstrates modular React components composing an SVG face, with properties like eye offset, radius, and mouth width varied per instance using `Math.random()`. It uses D3’s `arc` generator to draw the mouth path and the `range` function to create eighteen faces, showcasing reusable component design with JavaScript XML (JSX) in a React 17 application.

Loading thumbnail…

Smile Face Part Three

A grid of eighteen smiling faces fills the screen, each rendered as a yellow SVG circle with black strokes, two eyes, and an arc-shaped mouth. The faces vary slightly in stroke width, eye position and radius, and mouth dimensions due to random values. Built with React and D3 v5, the example uses the `arc()` generator from D3 to create mouth paths, while reusable React components manage the face, eyes, background, and SVG container.