Thomas Cormican

HIV/AIDS Choropleth Map

A choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, with countries colored on a sequential yellow-to-red scale based on prevalence rates. Countries lacking data appear in gray. The visualization uses React with D3 v7, employing `geoNaturalEarth1` and `geoPath` for map projection, `topojson` for world atlas geometry, and `scaleSequential` with `interpolateYlOrRd` for the color encoding. Data comes from the IHME HIV prevalence CSV dataset.

Jan 20, 2022

Organization Graph Diagram

This organization graph diagram visualizes relationships between arts and community organizations using a force-directed layout. Nodes are sized by hierarchy level—main organizations appear largest, followed by child nodes and small leaf nodes—with color groups distinguishing distinct clusters. The network interconnects four primary organizations through links while each main node branches to its affiliated sub-organizations and leaves. Implemented with d3-force simulation including forceSimulation, forceManyBody, forceLink, and forceCenter, the SVG rendering updates positions each tick while supporting drag interactions. Data originates from a hardcoded JavaScript structure defining nodes, links, distances, and color palettes from a separate color module.

Jan 16, 2022

Force Directed Graph Starter

Three SVG nodes labeled Alice, Bob, and Carol form a small linked graph, with two black lines connecting them as edges. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to animate the layout, while each tick updates circle positions and line endpoints via the simulation's event handler. Nodes are rendered as fixed-radius circles, and the graph initializes from a hardcoded dataset in the JavaScript.

Jan 16, 2022

Voronoi Overlay with Labels

This example displays global COVID-19 cumulative death totals over time as multiple line charts, one per country, on a logarithmic y-axis. Hovering over any point highlights that country’s entire line and shows a tooltip with the country name, death count, and date. The interactive hover detection uses a Voronoi overlay generated from the data points via `d3.Delaunay` and `d3.voronoi`, mapping mouse events to the nearest point. The line chart is built with React and rendered as SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line`, with data sourced from the CSSEGISandData COVID-19 time series CSV.

Jan 15, 2022

Coronavirus Deaths Over Time by Country With Voronoi Overlay

This line chart shows cumulative COVID-19 deaths over time for multiple countries, with the most recently hovered country’s line highlighted in black. A Voronoi overlay, built with `d3.Delaunay` and `d3.voronoi`, simplifies mouse interaction by assigning each data point a cell that triggers the highlight. The chart uses `d3.scaleTime` for the x-axis, `d3.scaleLog` for the y-axis, and renders paths via `d3.line`. Data comes from the CSSEGISandData COVID-19 time series CSV, parsed with `d3.csv` and `d3.timeParse`.

Jan 15, 2022

Coronavirus Deaths Over Time by Country

This visualization shows cumulative coronavirus deaths over time for each country, with a logarithmic y-axis and a time-based x-axis. The graph displays multiple country timeseries as colored paths, sourced from the CSSEGISandData COVID-19 GitHub repository. Built with React and D3.js v7, the code uses `d3.scaleTime`, `d3.scaleLog`, `d3.line`, and axis generators to render an SVG chart. Data is parsed from CSV via `d3.csv` and `d3.timeParse`, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Visualization Labels

This visualization shows global cumulative COVID-19 deaths over time using a line chart with a logarithmic y-axis to handle the wide range of values. The chart displays axis labels, tick marks, and annotation lines marking the most recent date and the five-million-deaths threshold. Built with React and D3 v7, the code uses d3.line, scaleTime, scaleLog, axisBottom, and axisLeft, rendering SVG elements. Data comes from the CSSE COVID-19 time series CSV, processed to sum daily death totals across all countries.

Coronavirus Log Y Axis

A line chart tracks global cumulative COVID-19 deaths over time, using a log-scale y-axis to reveal exponential growth patterns across orders of magnitude. The React component renders an SVG path via d3.line while d3.scaleLog and scaleTime map death totals and dates. Horizontal gridlines from d3.axisLeft and vertical ticks from d3.axisBottom structure the plot, with markers highlighting the 5,000,000 death threshold and current date. Data comes from the CSSE COVID-19 global time-series CSV, aggregated daily across all countries.

Coronavirus Linear Y Axis

This example shows the global cumulative death toll from COVID-19 over time using a linear y-axis scale, plotted as a single thick black line in an SVG. It loads time-series data from the Johns Hopkins CSSE GitHub repository, transforming daily columns into date and death-total pairs. The chart uses React with D3 v7’s `scaleTime` and `scaleLinear`, along with `axisBottom` and `axisLeft` for gridlines. A marker line and label indicate the most recent date, while another marker at 5,000,000 deaths provides a reference point on the y-axis.

React + D3 Axes

This visualization displays the global cumulative death toll from COVID-19 over time, with a line chart that includes reference markers at 5,000,000 deaths and at the most recent date. The chart is built with React and D3 v7, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` for the axes. Data is fetched from the CSSE COVID-19 global time series CSV and transformed with `d3.csv` and `d3.timeParse`. The SVG rendering includes a custom x-axis and y-axis marker lines, with gridlines and labels styled through CSS.

Fork of Coronavirus Line Chart With 5,000,000 Marker Line

A line chart tracks global cumulative COVID-19 deaths over time from JHU CSSE time-series data, using d3.scaleTime and d3.scaleLinear. A horizontal YMarkerLine highlights the 5,000,000 death threshold, while an XMarkerLine marks the most recent date. The SVG path is generated with d3.line, rendered in React, and updated to the full viewport size.

Coronavirus Line Chart With 5,000,000 Marker Line

A line chart displays worldwide cumulative COVID-19 deaths over time, with a horizontal marker line highlighting the 5,000,000 death milestone. The chart uses a React component with D3’s `scaleTime`, `scaleLinear`, and `line` generator to map dates and death totals to SVG coordinates. The marker line is positioned using `yScale(5000000)`. Data comes from the CSSEGISandData COVID-19 time series CSV, aggregated by summing daily global deaths. The SVG renders the trend as a black stroke and the threshold as a thinner line, filling the browser viewport.

Multiple Views with Brushing

A map and timeline display migration data from the Data Canvas Sense Your City dataset. Brushing the time histogram filters the circles on a natural Earth projection, with circle size encoding total deaths and missing migrants. The visualization uses React, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `bin`, `brushX`, and renders to SVG.

Jan 13, 2022

Summarizing Coronavirus Data

This visualization summarizes global COVID-19 deaths by displaying a single large number computed from the Johns Hopkins Coronavirus Dataset. It shows the total death count and the latest date column from the dataset. The code uses D3 v7’s `d3.csv` to load the data, then applies array methods like `map` and `reduce` to sum all values. It formats the result with D3’s `format` function before inserting the message into the page via `document.getElementById`.

Jan 13, 2022

Loading and Parsing Coronavirus Data

This example demonstrates the size and structure of the Johns Hopkins Coronavirus Dataset by displaying three key metrics: the total file size in kilobytes, the number of rows, and the number of columns. It loads a global CSV file of COVID-19 deaths using `d3.csv`, then formats the data with `d3.csvFormat` to calculate its byte count. The resulting statistics are displayed in large text via a `<pre>` element, with values rounded using `Math.round`.

Jan 13, 2022

Fork of Working with Time

This histogram visualizes the monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset. The code uses React to render SVG rectangles, with d3.scaleTime and d3.scaleLinear for the axes, d3.histogram to bin reported dates into monthly intervals, and d3.sum to aggregate the “Total Dead and Missing” values per bin. Axes and marks are generated via custom React components, with tooltips provided by SVG `<title>` elements.

Jan 12, 2022

Multiple Views

A global bubble map and a time-series histogram display missing migrant incidents. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with circle radii scaled by `d3.scaleSqrt` based on total dead and missing counts. The histogram aggregates reported dates into monthly bins using `d3.histogram` and `d3.timeMonths`, summing casualties per bin. Both views render as SVG within a React component, fed by a CSV dataset of global missing migrant records.

Jan 12, 2022

Missing Migrants on a Map

This visualization plots the locations of missing migrants on a natural Earth projection, with circle size encoding the total number of dead and missing per incident using d3.scaleSqrt. The map is rendered as SVG through a React component, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw land, interiors, and graticules. Data comes from the Data Canvas Sense Your City Dataset, with circles colored teal and partially transparent to reveal overlapping incidents.

Jan 12, 2022

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using data from the UN Population 2019 dataset. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping countries and population values to screen coordinates. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component renders rectangles with tooltips. The chart features a clean design with Poppins typography, a teal color scheme, and formatted population labels using d3.format.

Points on a Map

This example renders a world map with city populations using a natural Earth projection. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses, graticules, and country interiors, while scaled circles overlaid onto the map encode each city’s population with a square-root scale. The data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`. The React application asynchronously fetches the world atlas and city data, then renders the visualization as an SVG.

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, where each point represents a flower specimen. Hovering over a species in the color legend highlights all corresponding data points while fading the others, enabling quick comparison across the four measured attributes. Users can dynamically switch which attributes are displayed on the x and y axes via dropdown menus. The visualization is built with D3.v7 for scales and rendering, React for state management, and renders as SVG, leveraging D3's `scaleOrdinal` for color mapping.

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how flower measurements correlate across species. The visualization allows interactive exploration by letting users select which sepal or petal attributes appear on the x and y axes via dropdown menus. Using React and D3 v7, the chart renders SVG circles colored by species through a `scaleOrdinal` color scale, with axes generated by custom `AxisBottom` and `AxisLeft` components and a supplementary `ColorLegend`. Data loads asynchronously via D3’s `csv` parser from a remote GitHub gist.

Scatter Plot with Color

A scatter plot of the Iris dataset displays sepal width against petal length, with each point colored by species using an ordinal color scale. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv to load data. Interactive dropdown menus allow switching between four numeric flower measurements for both axes, while SVG circles include native tooltip titles.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus built with the React Dropdown library. The chart renders circles as SVG marks using React components, with axes generated by custom AxisBottom and AxisLeft components that leverage d3.scaleLinear and d3.extent. Polished styling includes Poppins fonts, tick formatting via d3.format, and tooltips using SVG title elements. Data loading relies on d3.csv with type coercion for numerical columns.

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the x- and y-axes via dropdown menus. The React-based application uses D3.js scales and axes to render SVG circles, with each point representing an iris flower. The implementation leverages React hooks (useState, useEffect) to manage data loading and selection state, while D3's csv parser loads and converts the dataset, and scaleLinear and extent functions handle axis scaling and domains.

Jan 10, 2022

Rendering data with React & D3

This visualization renders the CSS named colors dataset as a radial pie chart, with one wedge per color. Using React for the component structure and state management, it loads the CSV via d3.csv and computes arc paths with d3.arc and d3.pie, assigning each slice’s fill from the data’s RGB hex value. The SVG output centers the burst on a 960x500 canvas, displaying a loading message until data arrives.

Jan 10, 2022

Menus with React

This example demonstrates a simple pet-selection menu built with React, showing how a dropdown component manages and displays a chosen value. The app uses the `useState` hook to track the selected pet, initializing it to `hamster`, and renders a `Dropdown` component that maps over a static array of pet options. The dropdown fires `onSelectedValueChange` on user interaction, updating the state and logging each selection to the console. The code relies on React 17 and ReactDOM to render the interface, with a plain HTML `<select>` element styled via CSS.

Jan 9, 2022

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” to the page. It uses React 17.0.2 with ReactDOM to mount a functional component into a root `<div>` element. The code loads React and ReactDOM from a UMD CDN, defines the `App` component in plain JSX, and calls `ReactDOM.render` to display the output. The page is unstyled except for resetting body margins and hiding overflow, making it a clean starter template for building more complex visualizations with React.

Jan 9, 2022

World Map

This example displays a world map using the Natural Earth projection, rendered as SVG paths. It shows landmasses filled with teal, country interiors outlined with a lighter stroke, graticules, and the globe’s sphere. The visualization loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.geoGraticule` for grid lines within a React framework.

Jan 9, 2022

Working with Time

A line chart shows temperature readings over one week from the Data Canvas Sense Your City dataset. The visualization uses D3 v7 scales and axes to map time on the x-axis and temperature on the y-axis, with a smooth curve generated by `d3.line` and `curveNatural`. Rendered as SVG in a React application, the chart includes custom axis components and labeled axes.

Fork of Rendering data with React & D3

This visualization displays a bar chart of the ten most populous countries in 2020 using data from the UN Population dataset. The bars are rendered as SVG rectangles positioned with `d3.scaleBand` and scaled with `d3.scaleLinear` based on population values. React manages the component state and renders the chart, while D3 handles data loading via `d3.csv` and scaling functions. The chart updates after the data is fetched asynchronously and sorted by population.

The Margin Convention

A bar chart displays population data for ten countries, encoded as horizontal rectangles whose widths scale with each country’s 2020 population. The visualization implements the margin convention by using a translation to offset an inner group from the SVG’s edges. React manages the rendering state, loading the CSV data via `d3.csv` and applying `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart demonstrates how to structure SVG output using React and D3 v7.

Axes with React & D3

This example displays a horizontal bar chart of the top 10 countries by population in 2020, sourced from a UN dataset. The visualization uses React to manage state and render SVG elements, while D3 v7 provides scales and tick generation for the axes. Custom axis components are built manually using `scaleBand`, `scaleLinear`, and `max` from D3, with tick lines and labels positioned via SVG transforms.

Refactored Bar Chart

This example displays a horizontal bar chart of population data for the ten most populous countries, sourced from the UN Population 2019 dataset. The visualization uses React components to structure the SVG rendering, with D3 v7 handling the scales for both axes. The `scaleBand` and `scaleLinear` functions map country names and population values to pixel positions, while reusable `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks, labels, and rectangular bars via SVG `<rect>` elements.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. Built with React and D3 v7, it renders as an SVG with custom axis components and circular marks that include tooltips. The visualization uses d3.scaleLinear for both scales, d3.extent for domain calculation, and d3.format for tick labels. The Poppins font and teal-colored points give the chart a modern aesthetic while displaying all 150 iris specimens.

Rendering Data with React

Loading a CSS named colors dataset via `d3.csv`, this example renders each color as a horizontal strip in a stacked column. React manages the component state and updates the DOM directly, mapping each data row to a styled `<div>` element. The visualization leverages React's `useState` and `useEffect` hooks to fetch the data, while D3's CSV parsing handles the external file. The resulting SVG-less layout uses inline styles with the `RGB hex value` field to display all 148 colors as a simple, data-driven color swatch.

Jan 7, 2022

Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of CSS named colors. The visualization displays a text-based summary showing the file size in kilobytes, row count, and column count once the data finishes loading. The code uses React’s `useState` and `useEffect` hooks to manage the loading state, while D3’s `csv` function fetches the remote CSV file. The `message` function formats the output using `d3.csvFormat` to calculate the data size.

Jan 7, 2022

Fork of Vega-Lite API Template

This example visualizes accommodation data from a custom CSV dataset, plotting a scatter chart of Longitude against AddressRegion with tooltips showing Tags. Built using the Vega-Lite API, it registers Vega and Vega-Lite libraries with vega-tooltip for interactive hover details. The chart renders as an SVG, fills the entire window, and uses custom configuration for axis styling and dark label colors. The data is loaded via d3.csv, and the visualization is generated programmatically through the vl.markPoint and vl.encode APIs.

Jan 7, 2022

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7. It fetches a remote CSV file containing CSS named colors, parses it with d3.csvParse, and displays a summary of the file size, row count, and column count in large text. The code uses the Fetch API alongside D3’s parsing utilities, showing the resulting metadata in a pre element.

Jan 5, 2022

Mouse Follower

A smiling cartoon face follows the mouse across the screen, rendered as a yellow circle with eyes and an arc-shaped mouth. Built with React and D3 v7, the app tracks pointer movement via an SVG `onMouseMove` event, updating React state to reposition the face. The face’s components—background circle, eyes, and mouth—are composed from reusable React components, with the mouth drawn using a `d3.arc` path generator.

Jan 5, 2022