James Rhodes

Project Algernon

Project Algernon visualizes cycling rides by mapping GPS coordinates with D3's `geoPath` and `geoMercator` projection, alongside a time-series chart that plots power output in watts. The chart uses `scaleTime` and `scaleLinear` axes, with a moving average window selectable via dropdown (1s to 1h). A gradient-stroked line and interactive circles with tooltips show power over time, while the map displays the ride route. Data loads from JSON files via the `json` API, rendered as SVG within a React interface.

Apr 21, 2022

Project Algernon - Fit Parser

This interactive visualization parses uploaded FIT files and displays the extracted fitness data. Built with React, it uses the fit-parser library to decode binary FIT file structures, including message definitions, record fields, and timestamp offsets. The parser handles various data types like date_time, uint16, strings, and byte arrays, converting them into readable values. The interface provides a simple file input for users to load and process their fitness tracking data, though the current implementation focuses on the parsing pipeline rather than visual output.

Apr 19, 2022

Iris Scatterplot With Interactive Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to compare any two of the four measured attributes via dropdown menus. Hovering over the color legend highlights only the corresponding species, dimming the others through opacity changes. The visualization is built with React and D3 v7, using `scaleLinear` for axes, `scaleOrdinal` for species colors, and SVG rendering for marks and interactive legend elements.

Apr 18, 2022

Project Algernon - Dashboard V1

This dashboard visualizes indoor ride data from Project Algernon, displaying a line chart of power output in watts against time in minutes. A picker lets users switch between ride sessions, each sourced from JSON files. The visualization is built with React and rendered as an SVG using D3 v7, specifically leveraging `scaleLinear` for axes, the `line` shape for the path, and `curveCardinal` for smoothing. A custom linear gradient colors the stroke, while data smoothing via a rolling average is applied to the wattage values.

Apr 18, 2022

D3 Course - Missing Migrants, Multiple Views

This interactive visualization combines a natural Earth projection world map with a time-series histogram to explore the Missing Migrants Dataset. The map displays each migrant event as a semi-transparent circle scaled by total dead and missing using `d3.scaleSqrt`, while the histogram aggregates monthly deaths using `d3.histogram` and `d3.sum`. A brush on the histogram, implemented with `d3.brushX`, filters the map’s displayed events based on the selected date range, linking the two views. The code uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, with country boundaries from World Atlas TopoJSON.

Apr 17, 2022

Project Algernon - Loading Multiple Data Sources

An interactive line chart displays a single indoor cycling ride's power output over time. A dropdown menu allows users to switch between ride data files loaded from a remote JSON repository. The visualization uses React and D3 to fetch and parse data, then renders the chart as an SVG. A gradient stroke and tooltip on each data point provide visual feedback based on the power value.

Apr 15, 2022

Project Algernon - Drawing a map

A choropleth-style map of China rendered with React and D3.v7 draws each land feature as an SVG path, filled with a solid green hue. Using a GeoJSON topology from a GitHub-hosted file, the code relies on `d3.geoMercator` for projection, `d3.geoPath` for converting features to path data, and `topojson.feature` to transform the topology. The map is scaled and translated to fit the 960-by-500 viewport, displaying the country's shape without additional styling.

Apr 14, 2022

D3 course - World Map

This example displays a world map rendered as an SVG, using a natural Earth projection to show countries, graticules, and a stylized globe with colored landmasses and ocean. It loads GeoJSON data from the world-atlas TopoJSON file, converting it with `feature` and `mesh` from topojson. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, React hooks for data fetching, and CSS to style the map elements.

Apr 13, 2022

D3 Course - Missing Migrants Date Histogram

This interactive visualization displays a date histogram of the monthly total dead and missing migrants, using data from the Missing Migrants Dataset. The chart employs React with D3 v5 to build an SVG visualization, using `d3.bin` to group records into monthly bins and `d3.sum` to aggregate the death counts. Axes and rectangular marks are generated through custom React components, with tooltips exposing precise values via SVG `<title>` elements. The time scale is formatted with `d3.timeFormat` and the visualization leverages `d3.scaleTime` and `d3.scaleLinear` for proportional mapping.

Apr 12, 2022

D3 course - Missing Migrants

This scatter plot visualizes the Missing Migrants dataset, showing each event as a point with its reported date on the x-axis and total dead and missing on the y-axis. Users can toggle between raw data, monthly bins, and annual bins via radio buttons, which aggregate events using d3.bin with time thresholds. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleSqrt for scaling, with circles colored by a linear color scale from orange to dark red based on severity. Data is loaded from a CSV file and rendered using React with SVG elements, incorporating tooltips that display event details on hover.

Apr 11, 2022

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the dataset’s row count, column count, and file size in a large text block. It uses the `d3.csv` method to fetch a remote CSS named colors dataset and `d3.csvFormat` to calculate its size in kilobytes. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. D3 v7 loads the data asynchronously via promises, with results rendered into a `<pre>` element.

Apr 11, 2022

Polished Iris Scatterplot With Menus

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes from two dropdown menus. The SVG rendering uses React components with d3.scaleLinear for axes and d3.scaleOrdinal for species-based coloring, while d3.csv fetches the dataset and positions circles with tooltips showing exact values. The visualization features a clear legend, styled ticks, and axis labels that update dynamically based on menu selections.

Apr 10, 2022

D3 course - Missing Migrant Data

This interactive visualization maps recorded migrant deaths and disappearances worldwide, with each city’s circle radius scaled by the square root of its reported total dead and missing. The map renders landmasses in gray on a dark globe, with graticules and country boundaries drawn via `d3.geoPath` and `d3.geoGraticule`. It projects the data using `d3.geoNaturalEarth1`, overlays circles via React SVG, and loads city records from a CSV, with sizes determined by `d3.scaleSqrt`. Missing migrant data comes from a public subset, while country shapes use the World Atlas TopoJSON.

D3 course - World Map With Cities >50000

This interactive world map displays all cities with populations exceeding 50,000, using circle size to encode population magnitude through a square-root scale. Built with React and D3 v7, the visualization renders SVG paths from TopoJSON world atlas data alongside city coordinates from a CSV dataset. The natural Earth projection draws graticules and styled landmasses, while hover tooltips reveal country, city name, and formatted population using d3.format.

Iris Scatterplot With Menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute to plot on the x-axis and y-axis, with the chart dynamically updating the scales and axis labels. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` for domain calculation, and SVG rendering for the scatterplot marks. Data is fetched from a GitHub gist using D3's `csv` loader, with axis components defined as reusable React functions.

Stylized Bar Chart

A stylized bar chart displays the top 15 most populous countries from the United Nations World Population Prospects 2019 dataset. React renders SVG elements while D3 v7's `scaleBand` and `scaleLinear` position bars for country populations. The chart features custom axes, a Poppins font, and a teal color scheme. Tooltips appear on hover using SVG `<title>` elements.

D3 Course - Menus with React

This example demonstrates a pet-selection menu built with React, showing how a Dropdown component updates displayed text based on user choices. The interface uses React’s `useState` hook to manage the selected value, while the `Dropdown` component renders a `<select>` element with options for various pets. When a user changes the selection, the `onSelectedValueChange` callback updates state, and the page displays a sentence like “You selected: dog” or “No pet selected” if no option is chosen. The code uses React 16.9 via UMD scripts and a plain HTML select, with no D3-specific APIs involved.

Apr 7, 2022

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers, with hover tooltips revealing exact measurements. The chart uses React with D3 v7, employing `scaleLinear` for axes and `extent` for domain calculation, while SVG circles render the data points. Axis components generate ticks and labels through D3's `ticks()` method. The visualization uses `d3.csv` to fetch and parse the dataset, with marks styled using CSS classes and a Poppins font.

Apr 7, 2022

Menus with React - Dict test

This example demonstrates a simple React-based dropdown menu for selecting a pet, with a list of six animal options ranging from goldfish to spider. It shows how to structure and render a form control using React components, separating the dropdown’s configuration data from its presentation. The code uses React 16.9 and ReactDOM to mount the app, mapping over an array of dropdown objects to generate labels and menu elements. A basic `Dropdown` component is defined as a placeholder, though its current implementation renders an empty div, and styling is applied via a shared CSS rule.

Apr 6, 2022

React starter

A minimal React starter template renders a static "Hello react!" message inside a div. The code imports React and ReactDom, creates a functional App component, and uses ReactDOM.render to mount it to the root element. The accompanying stylesheet defines CSS classes for a yellow face and black eyes, though the current code does not instantiate any of those shapes. The template loads React and ReactDOM from unpkg CDN scripts.

Apr 6, 2022

D3 color experiments

This example showcases color scales by displaying a series of color swatches as text labels, each filled with a distinct color derived from a linear scale spanning green, purple, and teal. It also renders the minimum temperature from a San Francisco weekly temperature CSV dataset. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for color mapping, `d3.csv` for data loading, and SVG text elements to render the colors against a black background.

Apr 6, 2022

D3 course - working with time

This example visualizes a week of San Francisco temperatures in degrees Celsius using a line chart with a gradient stroke and colored scatter points. It shows temperature fluctuations over time, with each point offering a tooltip displaying the exact date and rounded temperature. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` for axes, `d3.line` with curve interpolation for the path, and a custom `linearGradient` for the stroke. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

Apr 5, 2022

Refactored Bar Chart

This example displays a horizontal bar chart ranking the ten most populated countries for 2020, sourced from a UN population CSV. The React app uses d3.csv for loading and parsing data, with d3.scaleBand and d3.scaleLinear for positioning bars along the y- and x-axes respectively. Axes and marks are rendered as separate React components producing SVG elements, with the chart area defined by explicit margins within an svg of fixed dimensions.

Feb 19, 2022

Visualising UN Data With React & D3

This example shows a horizontal bar chart comparing population figures for the top 10 countries in 2020, using UN population data loaded as CSV. The visualization renders as SVG, with React managing the component state and D3 v7 handling data loading and scales. Key APIs include `csv`, `scaleBand`, and `scaleLinear` for positioning bars and ticks, while React’s `useState` and `useEffect` manage the asynchronous data retrieval. The chart displays country names on the y-axis and population values on the x-axis, with axis ticks and labels generated manually.

Feb 19, 2022

Visualising Data With React

A colorful pie chart displays the full set of MDN CSS color names as equal-width slices, each filled with its corresponding RGB hex value. Built with React and D3 v7, the app fetches CSV data via `d3.csv` and computes the pie layout with `d3.pie` and `d3.arc`, rendering SVG `<path>` elements inside a React component using hooks for state and effects.

Rendering Data With React

This example shows a horizontal bar of CSS colors, one stripe per color, rendered as a 960-pixel-wide strip of 4-pixel-tall divs. It fetches a CSV of CSS color names and hex values from a GitHub gist using `d3.csv`, then maps each row to a React component. The React app uses `useEffect` and `useState` to load the data asynchronously, displaying a “Loading…” message until the data arrives, and `ReactDOM.render` mounts the component to the DOM.

Vega-Lite API Practice 2

This example visualizes weekly temperature data for San Francisco as a single smoothed line, with each point’s exact value accessible via tooltip. It uses the Vega-Lite API to declaratively encode the timestamp and temperature fields, while the `d3.csv` loader fetches the data from a GitHub gist. The chart is styled with a custom configuration that removes axis domains and increases font sizes, and it renders as a full-window, responsive SVG via `vega-lite-api` with `vega-tooltip` for interactivity.

Vega-Lite API Template Practice

This example demonstrates how to use the Vega-Lite API to create an interactive scatter plot of automotive data, mapping origin, horsepower, weight, and acceleration to visual channels. The visualization renders as an SVG. The code imports data from a CSV file via `d3.csv` and constructs the chart using `vega-lite-api` methods such as `markCircle` and `encode`, with `vega` and `vega-lite` registered for chart compilation. Tooltips are added through the `vega-tooltip` library, and the chart is configured to fit the browser window.

Loading Data With React D3

This example demonstrates how to integrate D3 data loading utilities with React state management. It uses React’s `useState` and `useEffect` hooks to fetch a CSV file of CSS color names from a GitHub gist via `d3.csv`, then displays the file size in kilobytes, row count, and column count in a large `<pre>` element. The code references D3 v7 and React 16.9, showing a minimal pattern for asynchronous data retrieval and rendering feedback while data loads.

Feb 7, 2022

Mouse Follower

A full-screen SVG circle follows the mouse cursor in real time, with its center tied directly to the pointer’s clientX and clientY coordinates. Built with React, the example uses the `useState` and `useCallback` hooks to track mouse position and update the circle’s `cx` and `cy` attributes on every move. Rendering is handled via ReactDOM to an SVG element that spans the entire browser window, with no explicit data source beyond user input.

Feb 6, 2022