Skip to main content
Log in
M

Matthew Talty Colvard

@mtcolvard·14 public vizzes

Loading thumbnail…

Fork for NYC ex

This choropleth map displays COVID-19 test positivity rates across New York City ZIP code tabulation areas, with gray indicating missing data. Built with React and D3 v5, it uses `geoEquirectangular` and `geoPath` to project boundaries loaded via TopoJSON, while `scaleThreshold` and `schemeBlues` map the percentage values. Hovering highlights a region and triggers a callback with the underlying data. The visualization combines NYC MODZCTA boundary data with COVID and income statistics from gist-hosted sources.

Mar 23, 2021
Loading thumbnail…

Los Angeles Exp

A choropleth map of Los Angeles County shows COVID-19 death rates by neighborhood, with gray indicating missing data. Built with React and D3 v5, it uses `geoEquirectangular` projection and `geoPath` to render TopoJSON boundaries alongside CSV data from County of LA eGIS. A threshold color scale maps death rates to a blue sequential scheme, while mouse hover events trigger neighborhood details, demonstrating layered data integration in an SVG.

Mar 23, 2021
Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event plotted by reported date against total dead and missing. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, while React components render SVG circles for data marks. The code imports data through D3’s `csv` loader, applies date and numeric parsing in the row function, and includes interactive tooltips via SVG `<title>` elements showing formatted dates.

Mar 21, 2021
Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month, displayed as a histogram with bars representing monthly sums over time. Using React with D3.js v5, the code employs `d3.bin` to group data into monthly intervals and `d3.sum` to aggregate the casualty counts for each bin. The chart renders SVG rectangles scaled by `d3.scaleTime` on the x-axis and `d3.scaleLinear` on the y-axis, with data sourced from the Missing Migrants Dataset.

Mar 21, 2021
Loading thumbnail…

NYC Covid and Heat Islands

A choropleth map of Los Angeles County reveals the percentage of positive COVID-19 tests by Countywide Statistical Area, overlaid on neighborhood boundaries. The visualization uses a sequential blue color scale via d3.scaleSequential and d3.interpolateBlues to encode data values, with missing data rendered in gray. Built with React and D3 v5, it employs d3.geoEquirectangular projection and d3.geoPath for geographic rendering, fetching boundary data from NYC MODZCTA TopoJSON and COVID statistics from a CSV via d3.csv. Hovering a neighborhood highlights it and triggers an onHover callback to display the associated data.

Mar 14, 2021
Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

A choropleth map of global HIV/AIDS prevalence among adults aged 15–49 in 2017. Country colors encode prevalence using a sequential yellow-orange-red scale, with missing data shown in gray. Built with React and D3 v5, the map uses `geoNaturalEarth1` and `geoPath` for the projection, while country boundaries and graticules come from World Atlas TopoJSON. HIV prevalence data originates from the IHME dataset on GitHub, joined to country codes via the ISO-3166 CSV.

Mar 14, 2021
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species label in the color legend fades non-matching points to 20% opacity while highlighting the selected group. Built with React and D3 v5, the code uses `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, rendering SVG circles and axes via reusable components. The color legend triggers hover events through React state to dynamically filter and emphasize data points.

Mar 13, 2021
Loading thumbnail…

Covid Deaths by Income

This scatterplot compares cumulative COVID-19 death rates across Los Angeles County cities against median household income metrics. Users select income measures (per family, household, or non-family household) and health outcomes (cases, deaths, or rates) via ReactDropdown menus. The visualization uses d3.scaleLog for the y-axis, d3.scaleThreshold with schemeBlues for color encoding, and d3.extent for x-axis scaling. Hovering reveals tooltips through SVG circle elements, with data sourced from two CSV files loaded via d3.csv.

Mar 13, 2021
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example presents an interactive world map using a natural Earth projection, with countries colored light green and the sphere filled blue. Hovering over a country turns it red and reveals its name via a tooltip, while users can zoom and pan by dragging. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for rendering the map, and `d3.zoom` for interaction. It loads geographic data from the world-atlas package (JSON and TSV files) and leverages the TopoJSON library to convert topology into features.

Mar 13, 2021
Loading thumbnail…

Fork of Multivariate Choropleth Live Coded at Outlier

This example visualizes racial demographics across New York census tracts by blending colored transparent layers for white, black, and Asian populations. The map uses D3 v5 with `d3.geoPath` and TopoJSON to render tract polygons, while the `color-blend` library applies multiplicative blending of `scaleSqrt`-mapped opacity values for each racial group. Data comes from the American Community Survey API, fetched as JSON, with darker composite colors indicating higher population densities. The visualization supports interactive zoom via `d3.zoom` and hover logging of tract properties.

Mar 13, 2021
Loading thumbnail…

Fork of Menus with React

This interactive example demonstrates a pet-selection dropdown menu built with React. It shows a labeled `<select>` element with six animal options, defaulting to "hamster." The React code uses a `Dropdown` component that receives options, an ID, the current selected value, and a callback to update state. The `useState` hook manages the selected value, logging each change to the console. The interface relies on React and ReactDOM to render the component into the `#root` div, with styling applied via embedded CSS for large text and hidden page overflow.

Mar 13, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the population of the top 10 most populous countries as horizontal bars, sorted in descending order. The chart uses React to render SVG elements, with d3-scale for creating the linear x- and band y-scales, and d3-format to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a CSV file using d3.csv, and a tooltip appears on each bar via an SVG `<title>` element. The visualization demonstrates a clean, minimal styling with custom font and color choices.

Mar 13, 2021
Loading thumbnail…

Los Angeles Heat Islands and Covid

This visualization displays a world map with country boundaries, rendered using SVG and a Natural Earth projection. It highlights the geographic context for a study of Los Angeles heat islands and Covid, though the map itself focuses on global landmasses and graticule lines. The code uses d3.geoPath and d3.geoNaturalEarth1 for projection and path generation, with topojson to parse world-atlas data for country features and interior boundaries. Styling is applied via CSS classes, with landmasses filled in teal and graticules in light gray.

Mar 12, 2021
Loading thumbnail…

Los Angeles County Heat Islands and Covid

This visualization displays the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, using a world map where each country is colored on a yellow-orange-red sequential scale. The map, rendered as an SVG with React and d3.v5, uses the `geoNaturalEarth1` projection with graticules, and country boundaries from World Atlas TopoJSON. Data is loaded from an IHME dataset via `d3.csv`, and missing countries appear in gray.

Mar 11, 2021