Daniel Russell-Brain

Polished Scatter Plot

This example shows an interactive scatter plot of the Iris flower dataset, with dropdown menus to select which measurements appear on the x- and y-axes. The visualization uses React class components in conjunction with D3 scales (scaleLinear, scaleOrdinal) to map sepal and petal dimensions to positions and colors by species. SVG circles render the data points, while D3 transitions animate the points to new positions when the axis selections change. The plot includes formatted axis ticks and tooltips displaying values on hover.

Nov 2, 2020

Polished Bar Chart

A horizontal bar chart displays the top 10 countries by population in 2020, using a clean, polished aesthetic with steel-blue bars, gray axis labels, and a Montserrat font. The chart is built with React and D3 v6, employing `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded from a CSV via `d3.csv` and rendered as SVG, with tooltips showing population values on hover.

Nov 2, 2020

React Starter

This example demonstrates the minimal setup required to run a React application on the VizHub platform. The page renders a single "Hello React" message using the React and ReactDOM libraries, with a simple yellow smiley-face SVG drawn as a supporting visual. The code initializes a React class component with a `render()` method and mounts it to the root DOM element. It imports D3 v6 for potential data manipulation, though no D3 functions are actively used in this bare-bones starter template.

React Dropdown - Classes

This example shows a React class-based application with a dropdown menu for selecting a pet. The dropdown updates a displayed selection using React's component state, managed through a constructor and the `handleChange` method, rather than hooks. The `Dropdown` component receives options, a selected value, and an onChange callback, rendering a native `<select>` element with styled labels. The code uses React 16.13.1, ReactDOM 17.0.1, and D3 v6.2.0, though D3 is loaded but not visibly used in the interaction logic.

React Dropdown - Classes

This example shows a React class-based application with a dropdown menu for selecting a pet. The dropdown updates a displayed selection using React's component state, managed through a constructor and the `handleChange` method, rather than hooks. The `Dropdown` component receives options, a selected value, and an onChange callback, rendering a native `<select>` element with styled labels. The code uses React 16.13.1, ReactDOM 17.0.1, and D3 v6.2.0, though D3 is loaded but not visibly used in the interaction logic.

React Starter

This example demonstrates the minimal setup required to run a React application on the VizHub platform. The page renders a single "Hello React" message using the React and ReactDOM libraries, with a simple yellow smiley-face SVG drawn as a supporting visual. The code initializes a React class component with a `render()` method and mounts it to the root DOM element. It imports D3 v6 for potential data manipulation, though no D3 functions are actively used in this bare-bones starter template.

Refactored Bar Chart

This bar chart displays the populations of ten countries from a UN 2019 dataset, with countries on the y-axis and population on the x-axis. It uses React components to render SVG elements, with D3 scaleBand and scaleLinear handling the axes and bar positioning. The code is refactored into separate modules for axes, marks, and data loading, demonstrating a clear separation of concerns in a React+D3 visualization.

Rendering Data With React - Bar Chart

A React-driven bar chart displays 2020 UN population estimates for ten countries, sourced from a CSV file. The example uses d3.csv for data loading and d3.scaleBand with d3.scaleLinear to construct the horizontal bars and axes. SVG elements are rendered declaratively through React components, with d3.arc used in a separate face component that visualizes a smiley face, demonstrating how to combine React state management with D3 scales and shape generators.

Rendering Data With React

This example shows a bright yellow smiley face that follows the mouse across the screen, rendered as a React component using SVG shapes. The face is built from a yellow background circle, two black eyes, and a mouth created with D3’s `arc` generator. Mouse position tracked via React state updates the face’s center coordinates. The code also loads a CSV of named CSS colors from a remote URL and draws a pie-like color wheel using `d3.arc`. Data loading uses D3’s `csv` function within a React `useEffect` hook.

Rendering Data With React

A React application renders a smiling face that follows the mouse cursor, with yellow circular background, eyes, and a mouth drawn using D3’s `arc` generator. The face’s position updates reactively via React state and event handlers, while D3’s `csv` fetches CSS named colors data, which is displayed as a vertical strip of colored rectangles beneath the face. The code combines React components with D3’s `arc`, `csv`, and `csvFormat` utilities, using `useState` and `useEffect` for data loading.

Loading and Parsing CSV Data

This example demonstrates the process of loading a remote CSV file and inspecting its basic properties. It fetches the data from a GitHub gist containing CSS named colors and uses the D3.js library's `d3.csv` method to parse the text. The resulting message displays the number of rows and columns in the dataset, along with an approximate file size in kilobytes, all rendered in a large `<pre>` element. The code relies on the JavaScript `fetch` API to retrieve the raw text before parsing, showcasing a straightforward parsing workflow.

Oct 28, 2020

Face Making

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arc-based mouth. The example demonstrates React components composing SVG shapes, where each face is built from `<circle>` elements and a D3 `arc` path for the mouth. Eye size varies per face via `Math.random()`, while D3's `range` generates the 24 faces in the layout, using d3.v6 and React 16.13.1.

Oct 28, 2020