R

RichardPearce60

@RichardPearce60·34 public vizzes

Loading thumbnail…

Missing Migrants Bar Chart (binned)

This bar chart visualizes the monthly counts of dead and missing migrants, using binned time-series data from a CSV of global migrant incidents. The visualization aggregates reported dates into monthly bins via d3.bin and timeMonths, summing the "Total Dead and Missing" values per bin with d3.sum. A time scale maps dates to the x-axis, while a linear scale handles the y-axis counts. The React-based component renders SVG rectangles for each bin, with axes generated through custom components and D3's scaleTime, scaleLinear, and timeFormat utilities.

Loading thumbnail…

Temp Line Chart (Min & Max Points)

This chart displays temperature fluctuations over time for San Francisco using hourly data from a CSV file. A smooth curve, generated with d3.line and curveNatural, connects daily temperature points, while red and blue highlighted circles mark the maximum and minimum values with callout labels. The visualization is built with React and D3 v7, using SVG rendering with dynamic scales (scaleTime and scaleLinear). Data is loaded via d3.csv, and the implementation includes custom axis components and temperature annotations formatted with the d3.format function.

Loading thumbnail…

Smily Part One

A smiling face built from geometric primitives occupies a 960-by-500 SVG canvas, with a yellow circle, black stroke, two eyes, and a mouth. The code uses React to render the SVG and d3’s `arc` API to generate the eye and mouth path data, specifying inner and outer radii and start/end angles. The face is centered via a coordinate transform, with eye offset and radius constants, and the mouth is a partial annulus. The drawing uses only D3’s arc generator and React DOM, with no external data source.

Loading thumbnail…

Optimized Brushing Missing Migrants Data

This interactive dashboard visualizes missing migrant incidents worldwide, combining a bubble map with a brushing histogram. A world map shows the geographic distribution and magnitude of casualties via scaled circles, while a time-based histogram below allows users to brush a date range, filtering the map to display only incidents within that period. Built with React and D3 v7, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projections, `d3.bin` for histogram aggregation, and `d3.brushX` for interactive selection, with data sourced from the Missing Migrants Project.

Loading thumbnail…

Brushing Missing Migrants Data

Brushing a time-series histogram filters a world map of missing migrant incidents, showing only records within the selected date range. The map renders with `d3.geoNaturalEarth1` and `d3.geoPath`, sizing circles by total dead and missing via a square-root scale. The histogram uses `d3.bin`, `d3.brushX`, and React state to update the filtered data. Data comes from a Missing Migrants Project CSV subset, with world geography from TopoJSON.

Loading thumbnail…

Missing Migrants Refactored

This interactive visualization combines a world map with a time-series histogram to explore data on missing migrants. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with circles sized by the square-root scale of the reported deaths and missing persons. The lower panel displays a monthly histogram of the same metric, binned using `d3.bin` with `d3.timeMonths` thresholds. The visualization is built with React and D3 v7, rendering SVG elements, and sources data from a CSV of the Missing Migrants project.

Loading thumbnail…

Missing Migrants on World Map

This visualization displays missing migrant incidents on a world map as semi-transparent circles. The map uses a D3 geographic projection (geoNaturalEarth1) with SVG paths for land, graticules, and country interiors rendered through d3.geoPath. Circle radii encode the total dead and missing count via d3.scaleSqrt, and the data comes from the Missing Migrants Global dataset. The React-based component loads world topology from TopoJSON and plots each incident at its parsed coordinates from the CSV.

Loading thumbnail…

Missing Migrants Bar Chart

This bar chart visualizes the numbers of dead and missing migrants over time, with each bar representing a reported date and its height corresponding to the total casualties. The chart uses a time-based x-axis and a linear y-axis to display the raw data from a Missing Migrants Global dataset subset. Built with React, it leverages d3.scaleTime, d3.scaleLinear, and d3.extent to map data to SVG rectangles, while custom axis components render ticks and labels using d3’s timeFormat.

Loading thumbnail…

United Nations Bar Chart - Using React Keys

This example presents a horizontal bar chart of 2020 population estimates for ten countries, sourced from the United Nations population data for 2019. The visualization uses React to render SVG elements, with D3 scales handling the spatial mapping. Unique React keys, derived from country names and tick values, manage element updates. The chart displays a grid of x-axis ticks and labeled bars, with axes and labels generated through D3’s scaleBand and scaleLinear APIs.

Loading thumbnail…

Iris Scatter Chart

This scatter chart displays the sepal width and sepal length of 150 iris flowers from the classic Iris dataset, emphasizing the distribution across species. Built with React and D3 v7, it loads the CSV data via `d3.csv`, converts numeric fields, and uses `scaleLinear` with `.nice()` to map values. SVG circles represent data points, while custom React components `AxisBottom` and `AxisLeft` render tick marks and grid lines. The visualization highlights clear clustering in the measurements, with axis labels and a formatted tick system using `d3.format`.

Loading thumbnail…

World Map with Data Points

This visualization displays world city population data as scaled circles on a natural Earth projection. The React app combines D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render landmasses, country interiors, and graticules, while `scaleSqrt` maps population values to circle radii. Data comes from a preprocessed world cities CSV, with city coordinates projected via D3’s `projection` function to position each semi-transparent point.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. Hovering over a species in the color legend highlights only the corresponding data points while fading the others. The visualization is built with React and D3 v7, using `scaleLinear`, `scaleOrdinal`, and SVG elements for rendering.

Loading thumbnail…

Scatter Chart with Color Legend

This interactive scatter chart visualizes the Iris dataset, showing relationships between sepal and petal measurements across three species. Users select which attributes appear on the x and y axes via ReactDropdown menus. The SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for species color coding, with a custom ColorLegend component displaying capitalized species names. Axes are generated through reusable AxisBottom and AxisLeft components that create tick marks and labels. Hover tooltips reveal formatted numeric values through SVG title elements.

Loading thumbnail…

Scatter Chart with Color

This interactive scatter chart displays the Iris dataset, plotting sepal and petal measurements against each other with points colored by species. Users can dynamically switch which measurement appears on each axis via dropdown menus. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical color mapping, and SVG circles for rendering data points. The code demonstrates reusable axis and mark components with React state management.

Loading thumbnail…

Polished Iris Scatter Chart with Menus

This interactive scatter chart displays the classic Iris dataset, allowing users to toggle which flower measurements appear on the x and y axes via dropdown menus. Built with React and D3 v7, the visualization renders circles as SVG marks inside a polished chart with labeled axes and tooltips. The axis scales are computed using D3’s scaleLinear and extent functions, while the menus are implemented with the ReactDropdown library. Data loading is handled through D3’s csv method with numeric parsing.

Loading thumbnail…

Iris Scatter Chart with Menus

This interactive scatter chart displays the classic Iris flower dataset, plotting sepal and petal measurements as SVG circles with dropdown menus to switch which measurements appear on the x- and y-axes. Built with React hooks, the chart uses d3.scaleLinear for both axes and d3.extent to compute domains from the CSV data loaded via d3.csv. The axes are rendered as custom React components that map tick values to SVG lines and text labels, while each data point includes a native title element for hover tooltips.

Loading thumbnail…

Menus with React

This example shows a React application that renders a dropdown menu for selecting a pet from a fixed list of options, with the selected value displayed in the browser console. The `Dropdown` component uses a native HTML `<select>` element and maps over the options array to generate `<option>` elements. State management relies on React's `useState` hook, while `ReactDOM.render` mounts the app to the DOM. The styling sets large font sizes for the label and dropdown, demonstrating a basic interactive form element built with React and vanilla HTML.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” into a web page. The code imports React and ReactDOM, defines a simple `App` component returning a `<div>`, and uses `ReactDOM.render` to mount it into the `#root` element. The page includes production builds of React and ReactDOM from unpkg, with basic body styling and a hidden overflow, serving as a foundational starter template rather than a data-driven visualization.

Loading thumbnail…

World Map

This example displays a natural Earth projection map of the world, with landmasses rendered in teal and graticules drawn as light gray lines. It uses React for component structure and D3 v7’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the geographic features. The land and country boundary data come from the World Atlas TopoJSON file, with interior borders generated via `mesh` from topojson.

Loading thumbnail…

United Nations Bar Chart with SVG

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart rendered with React and D3 v7. It loads UN population data from a CSV file, scales the bars with d3.scaleLinear, and positions country labels using d3.scaleBand. Each bar is annotated with a flag image fetched from an external SVG collection, placed at the end of the bar with xlink:href. Axes and gridlines are generated via d3’s scale.ticks(), and the chart updates asynchronously after data loading.

Loading thumbnail…

United Nations Bar Chart (Axis with React and D3)

This example shows a horizontal bar chart of the top 10 most populous countries in 2019, with countries on the y-axis and population on the x-axis. The React component loads CSV data via `d3.csv`, transforms the population column with a row function, and stores it using `useState` and `useEffect`. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars, while `xScale.ticks()` generates gridlines and tick labels in the SVG. React renders the rects, lines, and text elements directly, with axes drawn manually rather than through D3 axis helpers.

Loading thumbnail…

United Nations Bar Chart - Refactored

A horizontal bar chart displays the top 10 countries by 2020 population, using United Nations data loaded via D3's `csv` and rendered as SVG through React components. Population values from the CSV are parsed and converted to counts, with a linear scale mapping them to bar widths and a band scale for country positions. The visualization includes formatted axes with tick labels, a population axis label, and tooltips showing abbreviated values via D3's `format`. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the chart, while D3 v7 handles scales, data loading, and formatting.

Loading thumbnail…

Temp Line Chart

This visualization displays temperature fluctuations in San Francisco over a week, using a line chart with data points rendered as circles to highlight individual measurements. The chart is built with React and D3 v7, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis, while `line` with `curveNatural` draws the smoothing path. The SVG output includes axis ticks, labels, and formatted tooltips showing temperature in Celsius, styled with custom CSS.

Loading thumbnail…

Fork of United Nations Bar Chart (Margin Convention)

This example displays a horizontal bar chart of the top 10 most populous countries in 2020, using data from the United Nations population dataset. The chart applies the margin convention to create space for axes and labels, with bars sized proportionally to population values. Built with React and D3 v7, it loads the CSV data asynchronously using `d3.csv`, scales the bar lengths with `d3.scaleLinear`, and positions countries vertically using `d3.scaleBand`. The visualization renders as SVG, with each bar drawn as a `rect` element inside a translated group.

Loading thumbnail…

United Nations Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries in 2019 using data from the United Nations. React manages the component state, loading CSV data via d3.csv, while D3’s scaleBand and scaleLinear map country names and population values to screen coordinates. The SVG rectangles are rendered dynamically in a React map function, with bar widths proportional to each country’s estimated 2020 population. The visualization updates once data is fetched, showing a clean, static comparison of national population sizes.

Loading thumbnail…

Pie Chart Render of CSS Color Data in React & D3

This visualization renders all 148 CSS named colors as segments of a single pie chart, using each color's actual hex value as its fill. The chart is built with React 17 and D3 v7, loading data from a CSV file of CSS color names. The code uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path shapes. Each segment is equally sized, and the resulting ring displays the full spectrum of named colors in a circular arrangement.

Loading thumbnail…

Loading and Visualizing Color Data in React & D3

This example visualizes the CSS named colors dataset, loading it from a remote CSV file and rendering each color as a full-width horizontal strip labeled with its keyword. The visualization displays all color entries in sequence, with each row’s background color derived directly from the data. The implementation uses React hooks, specifically `useState` and `useEffect`, to manage asynchronous data loading with d3.csv, while the rendering maps the loaded array into styled div elements. The code demonstrates a basic React-D3 integration pattern for fetching and displaying tabular data without additional charting abstractions.

Loading thumbnail…

Parsing CSV Data in React & D3

This example demonstrates how to load and parse CSV data in a React application using D3. It fetches a CSV file containing CSS named colors via `d3.csv` and displays the dataset’s size in kilobytes, row count, and column count as formatted text. The React component uses the `useState` hook to store the parsed data, initially showing a “Loading” message until the promise resolves. The code highlights the interplay between D3’s data-loading API and React’s state-based rendering.

Loading thumbnail…

Parsing CSV Data

This example demonstrates loading and parsing a CSV file using D3.js within a React application. It fetches a dataset of CSS named colors from a GitHub gist, displaying the file size in kilobytes, row count, and column count in a large text message. The code uses d3.csv to load the remote data and d3.csvFormat to recalculate the file size, while also logging the formatted CSV data to the console.

Loading thumbnail…

Loading Data

This example demonstrates how to load and display text from an external CSV file using the Fetch API. The page shows a large “Load Data” message, and the code uses `fetch` with async/await syntax to retrieve a plain-text CSV of CSS named colors from a GitHub gist URL. The fetched text is logged to the browser’s console, illustrating a basic asynchronous data-loading pattern without any visualization or DOM updates.

Loading thumbnail…

Mouse Follower

A large blue circle follows the mouse cursor as it moves over an SVG canvas. The visualization uses React's `useState` and `useCallback` hooks to track the pointer's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move. The circle is rendered as a literal SVG `<circle>` element with a fixed radius of 30 pixels, centered initially at the middle of a 960×500 viewport.

Loading thumbnail…

Fork of Smiley Part Six

A grid of eighteen randomly generated smiley faces renders in SVG via React. Each face uses d3-arc to construct the mouth and eye highlights, while the eyes’ placement and radii, mouth width, and stroke thickness vary per face through Math.random. The FaceContainer component creates the SVG coordinate system, and BackgroundCircle draws the yellow head with a black outline.

Loading thumbnail…

Fork of Fork of Smily Part Five

A stylized smiley face rendered in SVG via React, composed of a yellow background circle, two eyes with white arc-shaped pupils, and a crescent mouth. The eyes use `d3.arc()` to generate the pupil paths, while the mouth is also built with `d3.arc()` and its inner/outer radii define the smile’s thickness. All components are positioned relative to a central group transform, with hard-coded dimensions and offsets. The visualization runs in React 17 with D3 v7, demonstrating modular component composition and SVG drawing through D3 shape generators.

Loading thumbnail…

Fork of Smily Part Four

A stylized smiley face is drawn entirely with SVG shapes. The yellow circular head, black outline, two dark eyes, and a crescent-shaped mouth are all generated through React components and D3’s arc generator, which defines the eye and mouth paths. D3 v7 calculates the arc’s inner and outer radii and angles, while React manages the SVG elements and transforms for positioning. The face is centered on a 960 by 500 canvas, with hardcoded coordinates and no external data source.