RMartins11

Organization Network Graph

This visualization shows a small organizational network with three nodes connected by two links, representing relationships between an arts organization and two community partners. Circle sizes correspond to node size values, with labels placed at each node’s center. Using d3.forceSimulation, the layout applies forceManyBody and forceLink forces to position nodes dynamically, while the tick handler updates SVG circle, text, and line positions. The data originates from a static JavaScript file imported into the main script.

May 7, 2021

Coronavirus Deaths Over Time By Country with Voronoi Overlay

This interactive line chart shows the progression of global coronavirus deaths over time, with each country represented as a thin black line. Hovering over any line highlights that country in blue by displaying its complete timeseries. The visualization uses a D3 Voronoi overlay, computed via `d3.Delaunay`, to capture mouse proximity and trigger the hover effect. Data comes from the CSSE at Johns Hopkins, loaded with `d3.csv`, and rendered as an SVG within a React framework.

May 7, 2021

Coronavirus Deaths Over Time By Country

A multi-line chart tracks cumulative COVID-19 deaths over time for each country, with a logarithmic y-axis to compare trends across vastly different magnitudes. The visualization uses React and D3 v5, loading global time-series data from the CSSEGISandData repository and rendering paths via `d3.line` onto an SVG canvas, with axes from `d3.axisBottom` and `d3.axisLeft`.

Visualization Labels

This visualization shows the global cumulative death toll from COVID-19 over time as a single thick black line. The chart uses a logarithmic y-axis scale to accommodate the exponential growth of deaths, with a time-scaled x-axis. Built with React and D3 v5, it loads data from a CSV file hosted on GitHub and renders as an SVG. The line is generated using the `d3.line` path generator, while `d3.scaleTime` and `d3.scaleLog` handle the axes. Axis components use `d3.axisBottom` and `d3.axisLeft` with grid lines, and title and axis labels appear via SVG text elements.

Coronavirus Log Scale

This visualization charts global cumulative COVID-19 deaths over time using a logarithmic y-axis, emphasizing exponential growth patterns. The line chart, built with React and D3 v5, uses `scaleTime` and `scaleLog` to map dates and death totals, with axes rendered via `axisBottom` and `axisLeft`. Data comes from the CSSE COVID-19 time series CSV, aggregated daily. Gridlines and manual markers for "now" and the one-million threshold enhance readability, while SVG paths render the trend line with a thick black stroke.

Coronavirus Linear Y Axis

This example shows the global cumulative death toll from COVID-19 over time as a single black line on a full-screen SVG chart. The y-axis uses a linear scale, with explicit reference markers for the 1,000,000-death threshold. Built with React and D3 v5, the visualization loads data from the CSSE COVID-19 time-series CSV and uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the path, while custom axis components render gridlines via `d3.axisBottom` and `d3.axisLeft`.

Coronavirus Line Chart with D3 Axes

A line chart displays global cumulative COVID-19 deaths over time, sourced from the CSSE at Johns Hopkins. The React component renders an SVG path generated with d3.line and scales using d3.scaleTime and d3.scaleLinear. Horizontal and vertical marker lines indicate the one-million deaths threshold and the most recent date, labeled "now". Custom axes use d3.axisBottom with tick marks extending across the chart, while CSS styles the path and gridlines.

Fork of Coronavirus Line Chart with Marker Line

A line chart visualizes the global cumulative COVID-19 death total over time, with a vertical marker line at the most recent date and a horizontal marker line at the one-million-death threshold. The chart uses React and D3 v5 (including `scaleTime`, `scaleLinear`, and `line`) to render an SVG path from CSV data sourced from the COVID-19 Data Repository. Marker lines are drawn as SVG elements via custom components, and the chart updates with the latest available daily data.

Coronavirus Line Chart with Marker Line

This visualization displays global COVID-19 death totals over time as a single bold line, with a horizontal marker line highlighting the one-million-death threshold. The React component uses d3.scaleTime and d3.scaleLinear to map dates and cumulative deaths to SVG coordinates, while d3.line generates the path. Data comes from the CSSEGISandData COVID-19 time-series CSV, loaded via d3.csv and aggregated daily. The marker line is a static SVG `<line>` positioned using the y-scale’s output for one million deaths.

Sumarizing Coronavirus Data

This visualization summarizes the global death toll from the Johns Hopkins Coronavirus Dataset. It displays a single large red number for the total deaths, followed by the latest recorded date, in a plain text format. The code loads the CSV data with d3.csv, extracts the last date column, and sums all values using array reduce. It then formats the result with d3.format and writes it to a pre element in the HTML.

Loading and Parsing Coronavirus Data

This example displays the size and structure of the Johns Hopkins Coronavirus time-series dataset as large text. It uses D3 v5’s `d3.csv` to load the global COVID-19 deaths CSV and `d3.csvFormat` to measure the file size in kilobytes. The code then counts the number of rows and columns and updates the page’s `<pre>` element with these three statistics.

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single event. The x-axis shows reported dates over time, while the y-axis displays the total dead and missing using a log scale to accommodate the wide range of values. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLog` for axes, alongside custom `AxisBottom`, `AxisLeft`, and `Marks` components. The code leverages D3's `csv` loader to fetch data and renders interactive tooltips via the SVG `title` element.

HIV/AIDS Choropleth Map

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, with countries shaded on a yellow-to-red sequential color scale based on infection percentages. The visualization uses React and D3 v5, employing d3.geoNaturalEarth1 and d3.geoPath to render world atlas TopoJSON boundaries with graticules, while missing data appears gray. Data comes from an IHME CSV dataset, linked to country shapes via ISO numeric codes.

Multiple Views with Brushing - Faster

Brushing a time-series histogram filters a world map of migrant disappearance incidents, with circles sized by the square-root-scaled death toll. The React app uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map projections, while `d3.scaleTime`, `d3.histogram`, and `d3.brushX` handle temporal binning and selection. Data comes from a CSV of Missing Migrants records, rendered as SVG with `useMemo` to cache computations.

Missing Migrants Multiple Views with Brush

This visualization presents global missing migrant incidents through a linked bubble map and time-based histogram. The map uses a natural Earth projection with translucent circles scaled by death counts, while the histogram aggregates monthly totals. A brush on the histogram filters the map’s displayed data in real time, enabling temporal exploration. Built with React and D3 v6, it employs `geoNaturalEarth1`, `scaleSqrt`, `bin`, `brushX`, and TopoJSON world atlas data from the Missing Migrants Project dataset.

Multiple Views with Brushing - Working

This example displays migration incidents on a world map with bubble markers sized by the total number of dead and missing, alongside a time-series histogram of the same metric. A brushable time range on the histogram filters the map’s bubbles to show only incidents within the selected period, demonstrating linked views. The visualization uses React, D3 version 5, and SVG rendering, with `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for brushing, and data from the Missing Migrants Project.

Missing Migrants Multiple Views

This visualization combines a world map and a time-series bar chart to explore data on missing migrants. The map uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, with circle sizes scaled by the square root of the total dead and missing count. The histogram below aggregates monthly totals using d3.bin and d3.sum, with axes from custom React components. Both views share the same dataset, loaded via d3.csv from a subset of the Missing Migrants Project.

Missing Migrants Date Histogram

This visualization presents a histogram of missing migrants over time, aggregated by month, with bar heights representing the total number of dead or missing individuals. The chart uses a time-scaled x-axis and linear y-axis, with bars colored teal. Built with React and D3 v6, the code leverages d3.bin, d3.timeMonths, and d3.scaleTime to compute monthly bins, while d3.scaleLinear handles the count axis. The SVG rendering includes custom axis components that draw ticks and labels, and each bar includes a tooltip via an SVG title element. The data comes from the Missing Migrants dataset (Data Canvas Sense Your City).

Missing Migrants on a Map

A world map uses semicircular bubbles to show the total number of dead and missing migrants by location, based on a subset of the Missing Migrants Global dataset. The visualization renders land, interiors, graticules, and a sphere using `d3.geoNaturalEarth1` and `d3.geoPath`, while bubble sizes are scaled with `d3.scaleSqrt`. React components manage the map and data loading, with CSV parsing via `d3.csv` and TopoJSON world atlas features via `topojson.feature`.

Points on a Map

A world map rendered with a natural Earth projection displays cities as semi-transparent teal circles, with circle area scaled by population using a square-root scale. The visualization pairs D3’s geoNaturalEarth1 projection and geoPath with React components to draw landmasses, graticules, and country interiors. City coordinates and population data come from a CSV file, while geographic boundaries load via TopoJSON from the world-atlas package.

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses hover interactions on the color legend to highlight data points of a selected species while dimming others. Built with React and rendered as SVG using D3 v6 scales, the interface features dropdown menus for selecting X and Y axis attributes alongside the color-coded species legend.

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Data Set, allowing interactive exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the X and Y axes via dropdown menus. Each flower species is encoded by color, with a legend displaying the categorical color scale. The visualization is rendered as SVG using React, leveraging D3's `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom components for axis ticks and marks.

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Data Set, letting users explore relationships between four flower measurements. A dropdown menu for each axis allows selection of sepal length, sepal width, petal length, or petal width, with points colored by species. Built with React and D3 v6, it uses `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering SVG circles with tooltips showing formatted values.

Polished Scatter Plot with Menus

A scatter plot of Fisher’s Iris dataset visualizes flower measurements, with dropdown menus to select which attribute appears on each axis. The chart is built with React and D3 v6, using SVG circles for marks and custom axis components. Data loads via D3’s `csv` parser, while `scaleLinear` handles scaling and `format` tick labels. Yellow background circles, poppins typography, and tooltips on hover complete the polished presentation.

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Data Set, allowing users to explore relationships between four flower measurements (sepal and petal length and width) and species. Two dropdown menus let users select which attributes to plot on the x-axis and y-axis, with labels updating accordingly. Built with React and D3 v6, the visualization uses `scaleLinear` for axes, `extent` for domain calculation, and renders SVG circles with tooltips via `<title>` elements. Axis tick marks and labels are generated from D3's scale objects.

Menus with React

This example demonstrates how to build interactive dropdown menus using React. It shows a form with a label and a select element that lets users choose a pet from a predefined list of options. The application uses the `useState` hook to manage the currently selected value and logs each selection to the console. The reusable `Dropdown` component handles rendering the options and triggers a callback, `onSelectedValueChange`, whenever the user makes a new selection. The interface is styled with large text for clarity.

React Starter

This example demonstrates a minimal React application that renders a static text message. The code defines a functional component, `App`, which returns a simple "Hello React!" message, and then mounts it to the DOM using `ReactDOM.render` targeting the `root` element. The setup relies on the React and ReactDOM libraries, loaded via a CDN, along with a custom `bundle.js` file. The page itself is styled with CSS to remove margins and hide overflow, serving as a foundational template for integrating React into a visualization context.

World Map

This example shows a world map rendered as an SVG using React and D3 v6. The map displays land masses in teal, with country borders drawn as interior lines, overlaid on graticules and a light sphere background. It loads geographic data from the world-atlas TopoJSON file, using `d3.json` to fetch the data and the TopoJSON `feature` and `mesh` functions to extract land and interior boundaries. The `d3.geoNaturalEarth1` projection and `d3.geoPath` generate the map paths, while the `BackgroundCircle` component draws a yellow circle behind the map.

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

Working with time

This scatter plot visualizes the relationship between time and temperature using the Data Canvas Sense Your City dataset. The visualization employs a yellow background circle with black stroke as a decorative frame. The chart uses D3 v6 scales (scaleTime and scaleLinear) to map timestamps and temperature values, with circles representing individual data points that display tooltips on hover. The React application constructs SVG elements through custom components for axes and marks, with specific styling applied to axis ticks and labels.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Data Set, showing the relationship between sepal length and sepal width. The visualization uses React with D3 v6’s `scaleLinear` for axis scaling and renders points as SVG circles within a yellow, black-bordered background circle. The code loads data via D3’s `csv` function, applies custom formatting with `format`, and sets axis tick styles through CSS. A Poppins font and muted grays give the chart its distinctive look, while data points appear in teal.

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population in 2020, using horizontal bars rendered as SVG rectangles. The chart features a clean, minimalist design with a yellow background circle, Poppins typography, and custom-styled tick marks. Built with React and D3 v6, it loads UN population data from a CSV file using d3.csv, then uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Tooltips, formatted with d3.format to abbreviate large numbers, appear when hovering over each bar.

Refactored Bar Chart

A horizontal bar chart displays the top 10 countries by 2020 population, sourced from a UN population CSV loaded via `d3.csv`. React components render SVG axes and marks, with `d3.scaleBand` mapping countries to vertical bands and `d3.scaleLinear` mapping population values to bar widths. The chart includes custom `AxisBottom` and `AxisLeft` components with tick lines and labels, demonstrating a modular React+D3 refactoring pattern.

Axes with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, rendered as SVG using React components. D3 utilities load the CSV dataset and compute scales, while React handles the rendering of axes, tick labels, and bars. The code explicitly builds the x-axis with `xScale.ticks()` and gridlines, and the y-axis from `scaleBand` domains, using `d3.csv`, `scaleLinear`, and `scaleBand` from d3 v6. Data comes from a UN Population 2019 CSV file loaded via a gist URL.

The Margin Convention

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2020, using a bar for each nation’s population. Built with React and D3 v6, it loads data from a CSV file via `d3.csv`, then uses `scaleBand` and `scaleLinear` to map countries and population counts to SVG rectangles within a specified margin. The code highlights the "margin convention" by offsetting the chart’s group with `translate`, ensuring axes align to the drawing area’s inner bounds.

Fork of Rendering Data with React and D3

This example renders a bar chart of the top 10 countries by 2020 population using React and D3. It loads CSV data from a remote URL with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map countries and population values to SVG rectangles. The visualization highlights a hybrid approach where D3 handles data loading and scales while React manages the SVG component structure. A commented-out section shows an alternative radial burst layout using d3.pie and d3.arc, though the active code uses a simple horizontal bar format.

Rendering Data with React and D3

This visualization displays CSS named colors as a radial burst, with each color represented by a wedge-shaped slice arranged around a central point. The code loads color data from a CSV file using D3’s `csv` utility, then uses `d3.pie` and `d3.arc` to compute the slice geometries. React renders each slice as an SVG `<path>` element, with the fill color set from the `RGB hex value` column. A yellow background circle with a black stroke provides contrast behind the colorful wedges.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, reporting the file size, row count, and column count in a large text display. It uses D3 v5’s `d3.csv` method to fetch and parse the remote dataset, then accesses the parsed data array and its `.columns` property. The code also includes commented alternatives using `fetch` with `async/await` and `d3.csvParse`, highlighting different approaches for handling tabular data. The rendering relies solely on the DOM’s `textContent` to update the preformatted message container.

Loading Data with React and D3

This example demonstrates how to load CSS named colors data from a CSV file and render it as horizontal color bars using React and D3. The application uses D3’s `csv` function to fetch the dataset, then React’s `useState` and `useEffect` hooks manage the asynchronous loading and display a “Loading…” message until the data arrives. Each row is rendered as a colored strip based on the `RGB hex value` column, with the SVG framework applied through the `BackgroundCircle` component.

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across an SVG canvas. Built with React and D3 v6, the app tracks the pointer's `clientX` and `clientY` coordinates on a `mousemove` event, updating the circle's `cx` and `cy` properties via React state. The `BackgroundCircle` component renders the static yellow circle, while the main `App` component manages the interactive position updates. The visualization demonstrates real-time data binding between user input and SVG element attributes.

Smiley Face Part I

A yellow, wire-framed smiley face rendered in SVG demonstrates reusable React components for composing static figures. The face uses `BackgroundCircle` for the head, `Eyes` for the pupils, and `Mouth`, which applies a d3 `arc` path generator with fixed start and end angles to draw an open-mouth shape. A `FaceContainer` wraps the SVG group, centering all elements via a translation transform. The example runs with React 17 and D3 v6, and the component props (including eye offset, radii, and stroke width) are set dynamically in the main app.