B

Blake McCarty

@Blake-design·30 public vizzes

Loading thumbnail…

labeled Coronavirus Line Chart with Voronoi Overlay

This line chart displays global coronavirus death totals across multiple countries on a log-scale y-axis over time. Hovering over any point triggers a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point and show a tooltip with the country name, death count, and date. The chart uses React with `d3.scaleTime`, `d3.scaleLog`, and `d3.line`, rendering paths and axes as SVG elements. Data comes from the COVID-19 global deaths time series CSV.

Loading thumbnail…

Coronavirus Line Chart with Voronoi Overlay

A line chart displays global coronavirus death totals over time for multiple countries, with each country shown as a gray line. Hovering over the plot reveals a highlighted black path for the selected country. The visualization uses d3.scaleTime and d3.scaleLog for axes, d3.line for path generation, and a d3.Delaunay-based Voronoi overlay with transparent cells to capture mouse events and trigger country highlighting. Data comes from the CSSEGISandData COVID-19 time series CSV, rendered as SVG with React.

Loading thumbnail…

Coronavirus data by country

A multi-line chart displays cumulative COVID-19 deaths over time, with one line per country, on a logarithmic y-axis. The visualization uses a React component that renders an SVG, employing d3's `scaleTime` and `scaleLog` for axes, and `line` to generate paths. Data is loaded from the CSSE COVID-19 time series CSV, with country names filtered out in the transformation.

Loading thumbnail…

Axis labels Coronavirus data

This example shows the global cumulative death toll from the COVID-19 pandemic as a time series line chart, with a logarithmic y-axis to accommodate the data’s wide range. The visualization uses React components to render an SVG, with D3’s `scaleTime` and `scaleLog` for scaling, and `axisBottom` and `axisLeft` for grid lines and tick marks. Custom axis titles are positioned manually via SVG transforms. Data comes from the CSSEGISandData COVID-19 time series CSV, aggregated by summing daily death totals across all countries.

Loading thumbnail…

log d3 Axis Coronavirus data

This line chart visualizes global COVID-19 death totals over time, using a logarithmic y-axis to accommodate the exponential growth of the data. The chart is built with React and d3.v7, using `scaleTime` and `scaleLog` for the axes, while `line()` generates the SVG path. Data is fetched via `d3.csv` from the CSSEGISandData COVID-19 time series repository, and axes are rendered with `axisBottom` and `axisLeft`, displaying gridlines.

Loading thumbnail…

use d3 Axis Coronavirus data

This example presents a line chart of cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins CSSE time-series dataset. Using React with D3 v7, it maps dates to a time scale and death totals to a linear scale, rendered as an SVG path. Custom XAxis and YAxis components leverage d3.axisBottom and d3.axisLeft with gridlines, while the chart’s axes and line are styled via CSS. The visualization resizes to the window dimensions and updates through a loading state while fetching CSV data.

Loading thumbnail…

Line Chart of Coronavirus data

This line chart visualizes the cumulative global death toll from COVID-19 over time. The chart uses a time-scaled x-axis and a linear y-axis, with data aggregated from the CSSE at Johns Hopkins. Built with React and D3 v7, the code constructs the chart using D3's scaleTime, scaleLinear, and line generators, while axes are rendered as SVG components using axisBottom and axisLeft, complete with grid lines.

Loading thumbnail…

coronavirus line chart

This visualization displays the total number of coronavirus deaths worldwide as a single numeric readout, updated to the dataset’s most recent date column. It uses React with a custom `useData` hook that loads the Johns Hopkins CSSE time-series CSV via `d3.csv`, then sums the last column’s values across all countries. The total is formatted with `d3.format` (the `format(",")` comma formatter) and rendered inside a React component. While called a “line chart,” the code only presents the cumulative death toll as a message, not an actual line graph.

Loading thumbnail…

coronavirus data summary

This example displays a single summary statistic: the total number of COVID-19 deaths worldwide since the most recent date in the time-series dataset. A React component fetches the global death-count CSV from the CSSEGISandData GitHub repository using d3.csv, then extracts the last column’s values and sums them with a reduce operation. The final number is formatted with d3.format(",") and rendered as text within a div, updating automatically once the asynchronous data load completes.

Loading thumbnail…

parsing Coronavirus data

This example parses and visualizes German state-level coronavirus case data, presenting each state as a large text label with its cumulative case count. The visualization uses a force-directed layout to position the labels, which are rendered as HTML text within a `<pre>` element. The code relies on the D3.js library for data parsing and layout, fetching the underlying dataset from a provided JSON source. The final view displays the parsed numbers in a simple, readable text format, emphasizing the data itself over any graphical encoding.

Loading thumbnail…

hiv aids choropleth map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-orange-red sequential color scale to indicate prevalence rates. Countries with missing data appear in grey, while the map is projected using d3.geoNaturalEarth1 and rendered as SVG paths. The visualization is built with React and D3 v7, loading world topology from TopoJSON and HIV prevalence data from an IHME CSV. Country codes are matched through a Wikipedia ISO code lookup table to link each dataset.

Loading thumbnail…

line chart

This line chart displays temperature readings from San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` to map data, `d3.line` with `curveNatural` to draw the smoothed path, and SVG circles for data points. The code loads a CSV via `d3.csv`, includes native DOM title tooltips, and renders in a React component using `useData` and SVG elements.

Loading thumbnail…

logo migrant data

This interactive visualization displays monthly totals of dead and missing migrants along global routes, using a bar chart with a logarithmic y-axis to accommodate wide value ranges. The React application fetches CSV data from a gist and uses d3.bin with timeMonths thresholds to aggregate the raw date values, while scaleTime and scaleLog handle the axes. The visualization renders as SVG with labeled axes, teal bars that reveal exact values via native tooltips, and a custom Prompt font from Google Fonts.

Loading thumbnail…

brushing migrant data on a map

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. Users brush over the histogram to filter the map, which displays circles scaled by the total dead and missing per location. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while the histogram leverages d3.bin and d3.brushX. Data comes from a CSV of Missing Migrants Global records, rendered with React and SVG.

Loading thumbnail…

multiple views migrant data on a map

This visualization combines a proportional bubble map with a time-series histogram to examine global migrant deaths and disappearances. The map plots each incident as a circle sized by the square-root scaled count of total dead and missing, overlaid on a Natural Earth land projection using d3.geoPath. A linked histogram below charts the monthly sum of deaths over time, using d3.bin and d3.scaleTime. Both views share the same dataset, rendered in SVG within a React framework using D3 v7.

Loading thumbnail…

migrant data on a map

This visualization displays global migrant fatalities using a world map. Each circle represents a data point, with its radius scaled to the "Total Dead and Missing" count via a square-root scale. The map includes landmasses, graticules, and country boundaries. The code uses d3.geoPath and d3.geoNaturalEarth1 for the projection, React for the interface, and imports CSV data through the d3.csv function. SVG circles are rendered with adjustable opacity, and the overall design uses a clean, light aesthetic.

Loading thumbnail…

migrant data part 1

This visualization displays the total number of dead and missing migrants over time, aggregated into monthly bins. The chart uses a bar chart rendered with SVG, with time on the x-axis and cumulative death counts on the y-axis. It is built with React and D3 v7, using `d3.bin` for binning, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.timeMonths` to set bin thresholds. Data comes from a CSV file of Missing Migrants Global records, loaded via `d3.csv`.

Loading thumbnail…

using size with points on a map

This example visualizes the world's most populous cities as circles overlaid on a natural Earth projection map, using square-root-scaled radii to encode population size. The map includes land masses, graticule lines, and country interiors. The visualization is built with React, uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, d3.scaleSqrt for sizing, and fetches city data from a CSV via d3.csv.

Loading thumbnail…

points on a map

This map visualization displays global city locations as semi-transparent dots overlaid on a natural Earth projection of the world. The geographic context is rendered using d3.geoNaturalEarth1 with d3.geoPath for land masses, graticules, and sphere outlines. City coordinates from a world cities CSV dataset are projected onto the SVG using the same projection function, with each point drawn as a small circle. The React component structure manages asynchronous data loading for both world atlas TopoJSON data and city coordinates.

Loading thumbnail…

interactive color legend

This interactive scatterplot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend highlights all matching data points while fading the others to 50% opacity. The visualization uses React for UI state management, d3.scaleLinear and d3.scaleOrdinal for scaling, and renders SVG circles with tooltips for exact values.

Loading thumbnail…

scatterplot with color legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Points are colored by species via a categorical ordinal color scale, with a legend identifying the three Iris species. The chart, built with React and D3.js v7, uses SVG rendering and includes dropdowns to switch which numerical attributes appear on the x and y axes, with axes and ticks generated by custom `AxisBottom` and `AxisLeft` components.

Loading thumbnail…

Fork of polished scatterplot with color

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the X and Y axes via ReactDropdown menus. The plot encodes flower species through a d3.scaleOrdinal color scale applied to circle marks. The visualization is built with React and D3 v7, using d3.scaleLinear for axes, d3.extent for domains, and d3.csv to load the remote dataset. SVG rendering displays axes and marks, with a tooltip via the title element.

Loading thumbnail…

polished scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to select any combination of four flower measurements for the x and y axes using React dropdown menus. The visualization renders circles in SVG, with axes and tick marks generated by D3’s `scaleLinear` and `extent` functions. Each data point includes a tooltip showing its x-value, while axis labels update dynamically based on menu selections. The chart uses a custom `Marks` component to plot the data, and the entire application is built with React and D3 v7.

Loading thumbnail…

scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via two dropdown menus. Built with React and D3 v7, the visualization uses `scaleLinear` and `extent` to compute scales, renders SVG circles for data points, and includes custom `AxisBottom` and `AxisLeft` components for tick marks and labels. The `useData` hook loads the CSV data with `d3.csv`, and the `Marks` component adds tooltip titles for each point.

Loading thumbnail…

world map

This example renders a world map using a Natural Earth projection, displaying landmasses in black, the sphere in light blue, graticule lines in semi-transparent blue, and country borders in red. It builds the map with `d3.geoNaturalEarth1` and `d3.geoPath`, while `topojson.mesh` generates the borders from the world-atlas dataset. The map is drawn as SVG paths within a React component, with styling applied via CSS classes.

Loading thumbnail…

scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Built with React and D3 v7, it uses d3.scaleLinear to map data values to SVG coordinates, rendering circles with tooltips. The chart includes custom axes via d3.ticks, with axis lines and labels styled through CSS. Data is loaded asynchronously from a CSV file using d3.csv.

Loading thumbnail…

style barchart

This horizontal bar chart displays population figures for ten countries using the UN Population 2019 dataset. The visualization employs React with D3 v7, using `scaleBand` and `scaleLinear` to position bars and axes. Styled with the Prompt font and light blue semi-transparent bars, the chart includes red axis ticks and hover tooltips via SVG `<title>` elements. The bottom axis formats tick values with `d3.format` to display billions.

Loading thumbnail…

refactor

This example displays a horizontal bar chart of population data for the top 10 countries, sourced from a UN population CSV file. The chart uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the y and x axes, respectively. Separate components for the bottom and left axes render tick marks and labels, while rect marks represent each country’s population value.

Loading thumbnail…

axes

This example shows a horizontal bar chart of the top 10 countries by population in 2020, with labeled axes and red grid lines for the x-axis values. The chart uses React components rendered to SVG, with D3 scale functions (`scaleBand` and `scaleLinear`) to map data to positions. Data is loaded asynchronously from a CSV file using `d3.csv`, and the tick marks and labels are generated manually by iterating over the scales' domains and tick values.

Loading thumbnail…

Fork of Hello HTML

This example displays a horizontal bar chart of the top 10 countries by population, based on UN 2019 data loaded via d3.csv. The React component uses useState and useEffect to fetch and parse the data, then computes scales with d3.scaleBand and d3.scaleLinear. SVG rectangles render the bars with dimensions derived from the scales. The visualization updates reactively when data arrives, showing a clean, minimal chart in a React-D3 hybrid setup.