Serind Joshua McCue

Voronoi Overlay with Labels

A multi-line chart displays cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis. On hover, a Voronoi overlay from `d3.Delaunay` highlights the nearest data point and activates the corresponding country’s line, displaying a tooltip with the country name, death count, and date. The visualization is built in React with d3 scales, line generators, and axes, rendering to SVG. Data comes from the CSSE COVID-19 time series.

Aug 25, 2022

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This visualization displays cumulative coronavirus death totals over time for multiple countries, with a Voronoi overlay that enables smooth hover interactions to highlight individual country lines. The chart uses a logarithmic y-axis to accommodate the wide range of death counts, while gray lines represent all countries and a black line marks the actively hovered one. Built with React and D3 v7, it employs d3-delaunay’s Voronoi diagram to compute pointer proximity, with data sourced from the CSSEGISandData COVID-19 global time series.

Aug 25, 2022

Coronavirus Deaths Over Time by Country

This chart displays cumulative coronavirus deaths over time for multiple countries, with each country represented by a colored line on a logarithmic y-axis. The visualization uses React and D3 v7, employing `scaleTime` and `scaleLog` for axes, and a `line()` generator to plot the data. The data is loaded from a CSSE COVID-19 time series CSV, parsed with `d3.csv` and `timeParse`. Random RGB values determine line colors, while gridlines and tick labels are rendered via custom axis components.

Pulling Live Coronavirus Data

This example displays cumulative COVID-19 deaths over time, using a logarithmic y-axis to accommodate exponential growth. The React app fetches live data from the Johns Hopkins CSSE GitHub repository via `d3.csv`, then transforms it into date/death pairs. A `d3.line` generator with `scaleTime` and `scaleLog` renders the SVG path, while `axisBottom` and `axisLeft` produce gridlines with formatted tick labels. Unused `XMarkerLine` and `YMarkerLine` components show structural possibilities for annotations, though they are not invoked.

Visualization Labels

This example shows a line chart tracking cumulative global COVID-19 deaths over time, with a logarithmic y-axis and clearly labeled axes. The visualization uses D3 v7’s `scaleTime`, `scaleLog`, and `line` generators within a React component, rendering to SVG. Axis components built with `axisBottom` and `axisLeft` include grid lines and formatted tick labels. Data is loaded via `d3.csv` from a Johns Hopkins CSSE time-series dataset, then transformed into date and death-total pairs. The chart also demonstrates custom text labels for the title and axes, styled with CSS.

CoronaVirus Log Y Axis

This chart visualizes the cumulative global death toll from COVID-19 over time, using a logarithmic y-axis to better display the exponential growth of the pandemic. The line chart is rendered using D3.js (v7) and React, with the data sourced from the CSSEGISandData/COVID-19 time series CSV. D3's scaleLog, axisBottom, and axisLeft generate the axes, while the lineGenerator creates the path from date and deathTotal values.

CoronaVirus Linear Y Axis

This visualization plots the cumulative global death toll from COVID-19 over time on a linear y-axis scale, with a line chart showing the total deaths per day. The chart includes vertical and horizontal marker lines highlighting the most recent date and the 10,000 death threshold, respectively. Built with React and D3 v7, the code uses `scaleTime` and `scaleLinear` for axes, `line` for the path generator, and `axisBottom`/`axisLeft` for tick rendering. The data is fetched from the CSSEGISandData COVID-19 time series CSV via `d3.csv`.

React + D3 Axes

A line chart tracks cumulative COVID-19 deaths over time, with a dashed marker line at 10,000 deaths and a second marker at the most recent date. The React component uses d3.scaleTime, d3.scaleLinear, and d3.line to generate an SVG path from CSV data. d3.axisBottom renders the x-axis with tick lines, while custom XMarkerLine and YMarkerLine components add annotations. The data comes from the Johns Hopkins CSSE COVID-19 time series.

Corona Virus Line Chart

This line chart visualizes the cumulative death toll from COVID-19 over time, with a single black line tracing the global trend. A horizontal marker at 10,000 and a vertical marker at the latest date provide visual reference points. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, and a `line` generator to plot data from a CSSE GitHub CSV. The SVG rendering includes custom marker components for the annotations, and data is loaded asynchronously via `d3.csv`.

Stylized Line Chart

A stylized line chart displays temperature over time for a week in San Francisco, using a natural curve that smoothes the line between data points. The visualization presents temperature readings on the y-axis and time on the x-axis, with circles marking each data value. The chart is built with React and D3 v7, using D3's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` for the visualization. Data loads from a CSV file via `d3.csv`, and the Poppins font from Google Fonts styles the axis labels.

Summarizing Coronavirus Data

This example summarizes COVID-19 death data from a time-series CSV, showing the total death count across all reported rows. It loads data with the D3.js `d3.csv` method in version 5, then extracts the value from the final date column and sums it with a `reduce` operation, displaying the result as a large text message. The visualization is a minimal, text-based summary rather than a chart, and it uses a plain HTML `pre` element for output.

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a sequential yellow-to-red color scale to indicate infection rates. Countries without data appear in gray. The visualization is built with React and D3 v7, using `geoNaturalEarth1` projection, `geoPath` to render country boundaries, and `geoGraticule` for the latitude/longitude grid. Data comes from IHME, joined to country shapes via ISO numeric codes loaded from a CSV.

(Incomplete) Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the total number of dead and missing migrants over time, using a logarithmic scale on the y-axis to accommodate extreme variations in monthly counts. The visualization aggregates raw CSV data into monthly bins using d3.histogram, then renders SVG rectangles with React. D3’s scaleTime and scaleLog handle the axes, while d3.sum calculates totals within each bin. The chart loads data from a GitHub-hosted CSV file and includes axis labels for Time and Total Dead and Missing.

Bubble Map and Histogram with Brushing

This interactive visualization combines a bubble map and a histogram to explore global migrant deaths. Users can brush over the time-series histogram to filter the map’s circles, adjusting the displayed data by reported date. The map uses a `geoNaturalEarth1` projection rendered with `d3.geoPath`, while the histogram uses `d3.brushX`, `d3.bin`, and `scaleTime`. Data comes from a CSV of Missing Migrants incidents, with circle size scaled by the square root of the death count.

Bubble Map and Histogram

This visualization combines a bubble map and a histogram to explore missing migrant incidents. The map uses a natural Earth projection with `d3.geoPath` and `d3.geoNaturalEarth1`, plotting circles scaled by the square root of casualties via `d3.scaleSqrt`. The histogram below bins reported dates monthly using `d3.bin` and `d3.timeMonths`, summing casualties per bin with `d3.sum`. Both components render in SVG within a React app, drawing from a CSV of missing migrants and TopoJSON world atlas data.

Missing Migrants Data Histogram

This histogram visualizes the total number of dead and missing migrants over time, using data from the Missing Migrants Global dataset. The chart bins reported incidents by month and sums the casualties within each bin, displayed as vertical bars. Built with React and D3 v7, the visualization uses `d3.scaleTime` for the x-axis, `d3.bin` with `timeMonths` thresholds to aggregate data, and `d3.scaleLinear` for the y-axis. SVG rectangles render the histogram bars, with hover tooltips showing exact values.

Missing Migrants on a Map

This map visualizes the locations of missing migrant incidents across the globe, using circle size to represent the total number of dead and missing. Built with React and d3, it renders an SVG using d3.geoPath to draw land and graticule from a world atlas, with circles positioned via d3.geoNaturalEarth1 projection. Data comes from a CSV of the Missing Migrants Project, with circle radii scaled using d3.scaleSqrt.

Points on a Map

A world map displays cities scaled by population using semi-transparent teal circles. The visualization renders geographic landmasses, graticules, and interior borders via d3.geoPath with a Natural Earth projection, while a d3.scaleSqrt maps population values to circle radii. City locations are projected from latitude and longitude coordinates, and data is loaded from a CSV using d3.csv. The React application overlays these marks on an SVG canvas.

Interactive Color Legend

This interactive scatterplot displays the classic Iris flower dataset, plotting petal and sepal measurements against each other with points colored by species. Users can switch the X and Y axes via dropdown menus and hover over the color legend to highlight a particular species while fading the others. The visualization uses React with D3's `scaleLinear` and `scaleOrdinal` for axes and color encoding, rendered as SVG circles with hover-based opacity transitions on the legend items.

Scatter Plot with Color Legend

This interactive scatter plot visualizes the relationships between four measurements of iris flowers, using color to distinguish species. Built with React and D3, it features dropdown menus that allow users to switch the variables plotted on the x and y axes, and a color legend that maps species to distinct hues. The plot is rendered as an SVG, with axes and ticks generated by the `AxisBottom` and `AxisLeft` components, and circles positioned using `scaleLinear` while colors come from `scaleOrdinal`. Data is loaded from a CSV file via `useData`.

Scatter Plot with Color

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measured attributes (sepal and petal dimensions) by selecting them from dropdown menus. Each flower is rendered as a circle in SVG, with position mapped by the selected X and Y axes and color encoding species via a D3 `scaleOrdinal` color scale. Built with React and D3 v7, the visualization uses `scaleLinear` for axes and interactive dropdowns to dynamically re-bind the plotted data.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to dynamically choose which numeric attributes appear on the X and Y axes via two dropdown menus. The visualization uses D3 v7 scales and SVG rendering within a React framework to plot data points as circles, with axis labels and tick marks styled through CSS. The code leverages `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and the `react-dropdown` library for the menu controls. The dataset loads remotely as CSV through `d3.csv`, with numeric parsing in the data-loading hook.

Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js, displays the Iris flower dataset, allowing users to select which attribute is plotted on the x-axis and y-axis via dropdown menus. The visualization renders data points as circular marks within an SVG, with axis labels and tick marks generated using D3's `scaleLinear` and custom components. The menus update the selected attributes, triggering a re-render of the chart with the new scales, while a tooltip on each point shows its x-value.

Dropdown in React

This example demonstrates a dropdown menu component built with React, allowing users to select a pet from a list of five options such as Goldfish, Dog, and Hamster. The React `useState` hook manages the selected value, and the custom `Dropdown` component maps over the options array to render each `<option>` element. The `onChange` event updates the selected state, and the `selected` attribute highlights the current choice. The code uses React 18.2.0 and ReactDOM to render the interface.

World Map

This example displays a natural Earth projection of the world, rendering land masses in teal with graticule lines and country borders overlaid on a light gray sphere. Using React and D3 v7, it applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the map, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from a World Atlas TopoJSON file. The SVG output includes distinct paths for the sphere, graticules, land, and borders, with styling applied via CSS classes.

Stylized Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width from the Iris dataset, fetched as a CSV via D3’s `csv` loader. It renders 150 circles using React components for axes and marks, with a linear `scaleLinear` mapping both dimensions. The SVG includes styled tick lines, labels, and a Poppins font, while hover tooltips show formatted values via the `<title>` element. The chart applies `.nice()` to round the x-axis domain and uses D3’s `extent` and `format` utilities for tick formatting.

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population using UN population data from 2019. The visualization uses D3.js v7 scales and React to render an SVG with horizontal bars, a formatted x-axis showing population in billions, and clean typography from Google Fonts. Country labels appear on the y-axis, while a native SVG `<title>` element provides tooltips with the exact population values.

Refactored Bar Chart

This refactored bar chart displays the top 10 countries by population from a 2019 UN dataset, using horizontal bars with a yellow circular background. The visualization is built with React and D3 v7, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and rendering SVG rectangles via the `Marks` component. Axes are constructed with explicit D3 tick and domain mappings, while the `useData` hook fetches and parses CSV data with `d3.csv`, converting population strings to numbers for the initial loading state.

Axes with React & D3

This example demonstrates a horizontal bar chart of the top 10 countries by population for 2020, with D3 scales and axes rendered as React SVG components. It uses `d3.csv` to load UN population data, `scaleBand` for the y-axis categories, and `scaleLinear` for the x-axis values. Axis ticks are generated manually via `xScale.ticks()` and `yScale.domain()`, drawing lines, text, and rectangles directly in JSX. The visualization updates from a loading state to the chart once data arrives.

The Margin Convention

This example demonstrates the margin convention in D3.js by rendering a horizontal bar chart of the top 10 countries by 2020 population from a UN dataset. The visualization uses SVG within a React component, with `d3.scaleBand` and `d3.scaleLinear` mapping country names to y-positions and population values to bar widths. A margin object reserves space around the chart, and the chart group is translated accordingly to align the bars within the inner plotting area.

Loading Data with React & D3 - UN population

This visualization displays the top 10 countries by population in 2020 as a bar chart, using UN population data loaded from a CSV file. It integrates React with D3 v7, employing `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values. The chart renders as SVG rectangles with widths proportional to population, and the app initially shows a “loading” state before fetching and parsing the data via D3’s `csv` function.

Loading Data with React & D3

This example demonstrates loading external CSV data with D3 and rendering it as a color wheel using React. The app fetches a dataset of CSS named colors via `d3.csv`, then maps each row to a pie slice using `d3.pie` and `d3.arc`. The circular chart displays each color’s hex value as its fill, producing a full spectrum. React’s `useState` and `useEffect` manage the asynchronous data loading, with a loading message shown until the CSV is available.

So LeWitt Reproduction

This visualization reproduces a minimalist So LeWitt drawing using React and D3 v7. It shows a single black circle that follows the mouse cursor across an SVG canvas, with the circle’s position driven by React state updates from a `mousemove` event handler. The code uses React’s `useState` and `useCallback` hooks to manage pointer coordinates, and renders the circle as an SVG element within a 960×500 viewport. The yellow background circle and static black outlines visible in the commented code suggest an intentional homage to LeWitt’s geometric wall drawings, but the active behavior focuses solely on the interactive dot.

Aug 19, 2022

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using D3 v7 and the Fetch API. The page displays a static "Hello HTML!" message, while the main activity occurs in the browser console, where `d3.csvParse` converts the downloaded text into an array of JavaScript objects. The CSV file, sourced from a GitHub gist containing CSS named colors, is retrieved asynchronously via `fetch` and `res.text()`. No visualization is rendered; the focus is solely on the data loading and parsing workflow.

Aug 18, 2022

Mouse Follower

A black circle follows the mouse cursor across a yellow SVG canvas, responding instantly to every pointer movement. The visualization uses React's `useState` hook to track the current mouse coordinates and updates the circle's `cx` and `cy` attributes on each `mousemove` event. The root SVG element captures mouse movements via React's `onMouseMove` handler, and the circle is rendered with a fixed radius and black fill, creating a simple, direct interaction between the user and the graphic.

Aug 18, 2022