RyAlpha

Dataviz 12 - Multiple views with brushing

This visualization combines a world map and a histogram to display global migrant deaths and disappearances over time. A bubble map shows individual incidents with circle size scaled by the square root of the death toll, using a Natural Earth projection with graticules from the World Atlas TopoJSON. A date histogram below aggregates the same data monthly. Brushing a time range on the histogram filters the map’s displayed incidents, demonstrating linked views via `d3.brushX` and `d3.event.selection` within a React framework.

Nov 27, 2021

Dataviz 12 - Multiple views

This interactive visualization combines a proportional symbol map with a time-series histogram to explore migration incidents. The map uses a D3 natural Earth projection with graticules, plotting circles sized by the square-root scaled total dead and missing from the Simplemaps World Cities Database, overlaid on World Atlas TopoJSON land boundaries. Below, a date histogram bins reported incidents by month using D3's `scaleTime` and `histogram` APIs, displaying the aggregated casualty count per bin with axes from custom `AxisBottom` and `AxisLeft` components, all rendered as SVG in React.

Nov 27, 2021

Dataviz 11 - Missing migrants #3

A world map displays incidents of missing migrants, with semi-transparent circles sized by the total number of dead and missing at each location. The visualization uses a natural Earth projection via `geoNaturalEarth1` and renders country boundaries, graticules, and the sphere through `geoPath`. Circle radii are scaled with `scaleSqrt` based on the maximum value. React manages the component state, while `useWorldAtlas` and `useData` load TopoJSON land and interior mesh data alongside a CSV of migrant incidents, all rendered as SVG elements.

Dataviz 10 - Points on map with sizes

A world map displays global cities with populations over 50,000, using circle size to encode each city’s population. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, country interiors, graticules, and a sphere backdrop. City coordinates are projected onto the map, and circle radii are scaled with `scaleSqrt` based on population data from Simplemaps. Built with React and d3.v5, the SVG rendering includes styled land, sphere, and interior boundary paths for a polished cartographic appearance.

Dataviz 11 - Missing migrants #2

This histogram visualizes the number of dead and missing migrants over time, with each bar representing cumulative fatalities per month. Built with React and D3 v5, it uses `d3.csv` to load a subset of the Missing Migrants Global dataset, `scaleTime` and `scaleLinear` for axes, and `bin()` with `timeMonths` thresholds to aggregate data. SVG rectangles render the bars, with tooltips via SVG `<title>` elements. The visualization includes labeled axes for "Time" and "Total Dead and Missing," styled with a Poppins font.

Dataviz 11 - Missing migrants #1

This scatter plot visualizes the relationship between reported dates and total dead and missing migrants from a subset of the Missing Migrants Global dataset. The visualization uses React with D3 v5 to render SVG circles, with d3.scaleTime and d3.scaleLinear mapping time and migrant counts to positions. Axes are custom-built components, and hovering over each circle reveals the exact date via a native SVG title tooltip. The chart highlights temporal patterns in migrant fatalities, with axis labels identifying the time and casualty variables.

Dataviz 10 - Points on map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, using data from the Simplemaps World Cities Database. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, featuring graticules, land masses, and interior boundaries from the World Atlas TopoJSON. City locations are plotted as semi-transparent teal circles positioned via the projection function. The visualization is built with React and D3 v5, loading geographic and city datasets asynchronously through custom hooks before rendering.

Dataviz 9 - Scatter plot with Menus (Interactive Colour Legend)

This interactive scatter plot displays the classic Iris dataset, letting users choose any two attributes for the x- and y-axes via React dropdown menus. The visualization uses an interactive color legend where hovering over a species name dims all other points, highlighting the selected species. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` to map measurements and species to positions and colors, rendering all marks as SVG circles.

Dataviz 9 - Scatter plot with Menus (Colour Legend)

This scatter plot displays the Iris dataset, showing relationships between sepal and petal measurements for three iris species. Users can select different attributes for the X and Y axes via dropdown menus, with species colors differentiated through an ordinal color legend using d3.scaleOrdinal. The visualization uses React with SVG rendering, importing axis components (AxisBottom, AxisLeft), a ColorLegend, and Marks that render circles with tooltips. Data loading relies on d3.csv from a CDN-hosted gist, with linear scales mapping the numeric measurements.

Dataviz 9 - Scatter plot with Menus (Coloured)

This interactive scatter plot visualizes the Iris Dataset, letting users independently choose which of the four flower measurements to plot on the X and Y axes using React dropdown menus. Species are distinguished by color through a d3.scaleOrdinal mapping to a three-color palette. The visualization is rendered as SVG using React components, with axes and marks generated via d3.scaleLinear, d3.extent, and custom React components for the bottom and left axes, alongside d3.csv for data loading and d3.format for tick labels.

Dataviz 9 - Scatter plot with Menus (Polished)

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Dropdown menus on the left allow users to switch which quantitative attributes are plotted on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` for axes, `extent` for domain calculation, and leverages SVG circles for each data point. Data is loaded asynchronously via D3’s `csv` function, with dropdowns implemented using the react-dropdown library.

Dataviz 9 - Scatter plot with Menus

This interactive scatter plot explores the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. Each point represents a flower specimen, positioned according to its sepal and petal dimensions. The visualization uses React for state management and rendering, while D3.js v5 handles data loading, linear scaling (scaleLinear), and SVG axis generation. The data is parsed from a CSV file using D3’s csv function, and axis labels update dynamically to reflect the selected attributes.

Dataviz 9 - Menus

This example demonstrates a simple pet-selection interface built with React. A dropdown menu lets users choose from a list of six animals, including dog, cat, hamster, parrot, spider, and goldfish, with the selected value logged to the console. The code uses React’s `useState` hook to manage the current selection and renders a custom `Dropdown` component, which wraps a native HTML `<select>` element. The `Dropdown` receives options, an ID, and a change handler, updating the state whenever the user picks a new value.

React Starter

This example demonstrates a minimal React application that renders a simple “Hello React” message to the DOM. It uses React 17 and ReactDOM to mount the `App` component into a root div, with the page styling hiding overflow. The code relies on `ReactDOM.render()` and a production build of React, showing the basic setup for a React-based visualization or dashboard.

Dataviz 8 - World map

This example shows a world map rendered as an SVG, displaying country land masses in teal with graticule lines and country borders in contrasting colors. The visualization uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw the spherical Earth and its features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `feature` and `mesh` from topojson. The React component `Marks` iterates over land features, while the sphere, graticules, and interiors are each rendered as distinct SVG paths with CSS-defined fills and strokes.

Nov 25, 2021

Dataviz 7 - Line chart

This line chart shows daily temperature readings in San Francisco over a week, plotted as a smooth curve rendered as an SVG path with d3.line and curveNatural. The React app loads the dataset from a CSV using d3.csv in a custom useData hook, then scales time and temperature values with d3.scaleTime and d3.scaleLinear, while using d3.timeFormat for the weekday axis labels.

Nov 25, 2021

Dataviz 7 - Scatter plot

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis for individual flowers. The visualization uses React with D3 v5, employing `scaleLinear` for both axes and rendering SVG circles via the `Marks` component. Axes are built with reusable `AxisBottom` and `AxisLeft` components, while a native SVG `<title>` element provides hover tooltips. The data loads asynchronously from a remote CSV using the `csv` function from D3, with numeric fields parsed on ingestion.

Dataviz 6 - Styling the bar chart

A horizontally oriented bar chart displays the ten most populous countries in 2020, with bars colored teal and axes labeled in muted gray. The visualization uses React components to render SVG elements, with `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. D3’s `csv` loader fetches the UN World Population Prospects 2019 dataset, and tick labels are formatted with `d3.format` to abbreviate values like “1.3B”. A tooltip via SVG `<title>` elements shows exact population figures on hover.

Dataviz 6 - Refactoring

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It shows each country’s population as a bar, with axes for both countries and population values. The visualization is built with React and d3.v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and the `csv` loader to fetch and parse the data. All marks and axes are rendered as SVG elements through reusable React components.

Dataviz 6 - Axes with React and D3

This example displays the top 10 most populous countries as a horizontal bar chart, with axes manually constructed using React and D3 v5. The chart shows population values on a linear x-axis and country names on a band y-axis, both built from `d3.scaleLinear` and `d3.scaleBand`. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The visualization renders as SVG, with tick marks and labels generated by mapping over `xScale.ticks()` and the y-scale domain.

Dataviz 6 - Margin convention

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as simple bars without axes or labels. It demonstrates the margin convention by using D3’s scaleBand and scaleLinear to map country names and population values to pixel ranges within an inner chart area. The React component loads CSV data via useCallback and useEffect, then renders SVG rectangles inside a translated group element. The code uses d3.csv, scaleBand, scaleLinear, and max from d3.v5.

Dataviz 6 - Bar chart with React and D3

A bar chart displays the top 10 most populous countries from the UN World Population Prospects 2019 dataset. The visualization shows horizontal bars whose lengths correspond to each country's 2020 population, rendered as SVG rectangles. React manages the component state, loading data via the `csv` function from D3 v5, while `scaleBand` and `scaleLinear` position the bars and map population values to widths. The chart intentionally omits axes, presenting only the ranked bars.

Dataviz 6 - Visualizing data with React and D3

This example visualizes CSS named colors from a remote CSV dataset as a radial burst of colored arcs arranged in a pie chart. The SVG rendering is powered by React, which maps each data row to a `<path>` element, while D3’s `pie` and `arc` utilities compute the angular segments. The chart’s center-aligned arcs use the data’s “RGB hex value” field for fill colors, and the interface initially displays a loading state before the data arrives.

Nov 21, 2021

Dataviz 5 - Iterating fast with Vega Lite API

A scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with color encoding country of origin and size encoding weight. Built using the Vega-Lite API with D3.js for data loading, the visualization renders interactively with tooltips showing model names. The code reads from an auto-mpg CSV dataset via d3.csv. The example demonstrates rapid iteration through concise declarative specifications, where the vl.markCircle function encodes all visual channels directly.

Nov 20, 2021

Dataviz 4 - Loading data in React

This example demonstrates loading a CSV dataset in a React application and displaying summary statistics as plain text. The interface shows a loading message until the data arrives, then displays the file size in kilobytes, row count, and column count. It uses the `useState` and `useEffect` hooks to trigger a async `csv` call from d3.v5, which fetches a gist containing CSS named colors. The `message.js` module formats the result using `d3.csvFormat` to calculate the data size. Rendering is handled by ReactDOM into a `<pre>` element.

Nov 20, 2021

Dataviz 4 - Parsing CSV data with D3

This example demonstrates how to load and parse CSV data using D3, displaying the resulting dataset’s size as a simple text summary. It fetches a remote CSV file of CSS named colors via the `d3.csv()` method, then uses `d3.csvFormat()` to calculate the formatted data size in kilobytes, alongside row and column counts. The output is rendered in a large `<pre>` element. The code also includes commented-out alternatives using `fetch()` and `d3.csvParse()`, highlighting the preferred D3 approach.

Nov 20, 2021

Dataviz 3 - Interaction with React

A React-based SVG visualization demonstrates mouse interaction by rendering a single yellow circle that follows the cursor. The circle’s position updates on every `mousemove` event within the SVG element, using React’s `useState` hook to track coordinates and `useCallback` to optimize the handler. The app imports React and ReactDOM, renders an SVG of 960×500 pixels, and initializes the circle at the center. The code shows direct state-driven rendering without external data sources or animation libraries.

Dataviz 2 - Loading data (Fetch)

This example demonstrates how to load external data into a web page using the JavaScript `fetch` API. It retrieves a CSV file containing CSS named colors from a GitHub Gist and logs the raw text to the browser console. The code defines an asynchronous helper function `fetchText` that requests the URL and parses the response as text using `response.text()`. A commented-out alternative shows chained promises for the same operation. The visualization itself is not rendered; the example focuses solely on the data-loading step.

Dataviz 1 - Face (Multiple files + ES6 Modules)

This gallery example renders a yellow, black-outlined face built from SVG primitives—a circle for the head, a pair of circles for eyes, and an arc-based mouth. It uses React components (Face.js, Eyes.js, Mouth.js) to compose the figure, with the mouth’s curved path generated by D3’s `arc` API. The example demonstrates how multiple ES6 modules and React’s `Fragment` and `transform` attributes can be combined to structure a simple visualization.

Dataviz 1 - Face (React components + ES6)

This example renders a simple cartoon face using React components and ES6 syntax, combining SVG circles and a d3 arc path. It shows a yellow circular head with black stroke, two offset eyes, and a curved mouth spanning the lower half. The code imports `arc` from `d3` to generate the mouth path, while React manages the component structure and rendering into the DOM via `ReactDOM.render`. D3 v7 and React 17 are loaded from CDN, with all face dimensions defined as constants.

Dataviz 1 - Face (React + D3)

This example uses React and D3.js v7 to render a simple, static smiley face as an SVG graphic. It shows a yellow circle for the head, two black circles for eyes, and a curved arc for a mouth, all positioned relative to a central coordinate system. The React component defines the SVG elements with numeric values for dimensions, offsets, and radii. The mouth shape is generated using D3's `d3.arc()` function to create a path with specified inner and outer radii and angular range, and the component is mounted to the DOM using `ReactDOM.render()`.

Dataviz 1 - Face Practice (React + D3)

This example builds a stylized face using React and D3 v7, rendered as SVG. It shows a static composition of a yellow circle for the head, two black circles for eyes, and arcs for a mouth and moustache, all positioned with SVG transforms. The code uses `d3.arc()` to define the mouth and moustache paths with specific inner/outer radii and angle ranges. React 17 renders the SVG elements, while D3 provides the arc generator, with all dimensions and offsets hard-coded.

Dataviz 1 - Face (React)

A simple face composed of three SVG circles rendered with React. The yellow head and two black eyes are drawn using React's JSX syntax within an SVG element, with dimensions defined as constants. It uses React 17 and ReactDOM to mount the component into the DOM, demonstrating basic React rendering of static SVG shapes without external data or interactivity.

Dataviz 1 - Face (HTML, CSS, SVG)

This example shows a simple cartoon face made of three SVG circles: a large yellow head and two smaller black eyes. The visualization uses static, hand-coded SVG elements within an HTML page, with CSS setting the body margin to zero and hiding overflow. It renders directly in the browser without any JavaScript libraries or data processing, relying solely on the SVG circle elements and their fill, stroke, and stroke-width attributes.