B

Ben Brophy

@brenjamin·42 public vizzes

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes San Francisco temperature readings over a week, with a smooth curve connecting data points and circular markers for each observation. Time is plotted on the x-axis using a d3.scaleTime with weekday tick labels, while temperature appears on the y-axis via d3.scaleLinear. The React components (AxisBottom, AxisLeft, Marks) use SVG rendering with d3.line and curveNatural to generate the path, and circles include native title tooltips. Styling comes from Poppins font, custom tick colors, and a teal stroke on the marks.

Loading thumbnail…

HIV/AIDS Choropleth Map

A choropleth map visualizes global HIV/AIDS prevalence in 2017, with countries shaded along a yellow-orange-red sequential scale and gray indicating missing data. The visualization uses React with D3.js v7, employing `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country shapes from TopoJSON world atlas data. HIV prevalence values are loaded from an IHME dataset and mapped to numeric country codes for accurate geographical association.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the 2020 populations of ten countries using horizontal bars styled with a teal fill and subtle gridlines. Built with React and D3 v7, it employs `scaleBand` for the categorical country axis, `scaleLinear` for population, and custom React components for axes and marks. Population values are loaded from a CSV using `d3.csv`, formatted with `d3.format`, and rendered as SVG rectangles with native tooltips. The chart includes labeled axes and a clean, modern aesthetic.

Loading thumbnail…

Organization Graph Diagram

This example visualizes the relationships between arts organizations and their affiliated projects using a force-directed graph. It shows four main parent nodes connected by links, each with child nodes and leaf nodes that represent smaller entities. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute layout positions, and renders circles and lines as SVG elements. Node colors and sizes are defined in a separate data module, and nodes can be dragged interactively using d3.drag.

Loading thumbnail…

Voronoi Overlay with Labels

A multi-line chart tracks cumulative COVID-19 deaths over time for multiple countries, with a logarithmic y-axis and interactive hovering. A Voronoi overlay computed with `d3.Delaunay` divides the chart into cells that trigger hover events, highlighting the nearest date’s data point and displaying a tooltip with the country name, death total, and date. The tooltip is rendered as SVG text, and the active country’s line is emphasized. Data comes from the CSSE COVID-19 time series, parsed via `d3.csv` and `timeParse`.

Loading thumbnail…

Global Coronavirus Deaths Over Time by Country with Voronoi Overlay

This example visualizes global coronavirus deaths over time for each country, using a log-scaled y-axis to accommodate the wide range of values across nations. A Voronoi overlay, generated via `d3.Delaunay`, maps the nearest data points to enable smooth hover interactions that highlight the selected country’s line. The chart is built with React and D3 v7, rendering SVG paths for the time series and axes, with data sourced from the CSSE COVID-19 global time series dataset.

Loading thumbnail…

Global Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 death totals for each country over time, with a logarithmic y-axis compressing large differences and a grid of light lines for readability. Country trajectories are drawn as randomly colored SVG paths using React and d3.v7, with scales from `scaleTime` and `scaleLog` and axis components rendered via `axisBottom` and `axisLeft`. Data comes from the JHU CSSE daily time-series CSV, processed in `useData` with `csv` and `timeParse` before being mapped to lines.

Loading thumbnail…

Visualization Labels

This visualization displays global COVID-19 death totals over time as a line chart, using a logarithmic y-axis to accommodate the wide range of values. Built with React and D3 v7, it renders SVG elements including an axis with gridlines and a labeled path. The chart includes descriptive text labels for the title, x-axis, and y-axis, with data sourced from the CSSE COVID-19 time series dataset. The code uses D3’s `scaleTime`, `scaleLog`, `line`, and `axisBottom`/`axisLeft` APIs to construct the visualization.

Loading thumbnail…

Coronavirus Log Y Axis

This example visualizes the global cumulative COVID-19 death toll over time, using a logarithmic y-axis to reveal the exponential growth pattern of the pandemic. A line chart shows daily totals from the Johns Hopkins CSSE time-series dataset, with gray gridlines and a “Now” marker at the most recent date. The React app uses D3 v7’s `scaleLog`, `scaleTime`, and `line` generators to build the SVG, while custom `XAxis` and `YAxis` components leverage `axisBottom`, `axisLeft`, and `tickSize` to render gridlines. Marker lines highlight the current value and date.

Loading thumbnail…

Coronavirus Linear Y Axis

This visualization displays global cumulative COVID-19 deaths over time using a line chart with a linear y-axis scale. The data comes from a CSV file containing time-series death totals, aggregated by summing all countries’ daily counts. The chart employs React with D3 v7, using `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line` to generate the SVG path. Gridlines are drawn via `axisBottom` and `axisLeft` with tick sizes, while marker lines highlight the most recent date and annotate values alongside the axes.

Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 Marker Line with React + d3 axes

This example shows the global death toll from COVID-19 as a line chart over time, with a horizontal marker at one million deaths and a vertical marker at the most recent date. The chart uses d3.scaleTime and d3.scaleLinear to map dates and death totals to SVG coordinates, while d3.line generates the path. React components wrap the axes, created with d3.axisBottom, and custom marker lines highlight key thresholds. Data is loaded from the CSSE COVID-19 time series CSV and aggregated by summing daily totals across all countries.

Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 Marker Line

This line chart displays the cumulative global death toll from COVID-19 over time. A horizontal marker line at 1,000,000 deaths and a vertical marker at the most recent date highlight key thresholds. The chart uses D3’s `scaleTime`, `scaleLinear`, and `line` to generate the SVG path from the CSSE COVID-19 time-series data, while React renders the visual and the custom `YMarkerLine` and `XMarkerLine` components draw the annotations.

Loading thumbnail…

Coronavirus Line Chart

This line chart visualizes the global cumulative COVID-19 death total over time, using a simple black line against a white background. A horizontal marker line highlights the point at which deaths reach one million. The visualization is built with React and D3 v7, using `scaleTime`, `scaleLinear`, and `line` to render an SVG path from a CSV dataset provided by the Johns Hopkins CSSE GitHub repository. The chart updates responsively to fill the full browser window.

Loading thumbnail…

Summarizing Coronavirus Data

This visualization summarizes global COVID-19 deaths by fetching the latest cumulative death count from a Johns Hopkins CSSE time-series dataset. It displays a single large red number, formatted with commas via d3.format, along with the date of the last recorded update. The example uses d3.csv to load the remote CSV, maps over rows to extract the final column’s values, and reduces them into a total, which is then written into a pre element. The entire presentation is deliberately minimal, emphasizing the raw magnitude of the data rather than a traditional chart.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates the initial step of loading and parsing a global coronavirus death time-series dataset from the Johns Hopkins CSSE GitHub repository. The page prominently displays the raw CSV data in a large, readable font within a `<pre>` element, though the code itself only retrieves the data and identifies the latest date column from the dataset. The visualization uses `d3.csv` to fetch and parse the remote CSV file, with the D3 library version 7 loaded from a CDN. The code explicitly references the final column containing the most recent date's death counts.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single migration event. The x-axis maps the reported date using a time scale, while the y-axis uses a logarithmic scale to display the number of dead and missing individuals. Built with React and D3 v5, the visualization renders SVG circles for each data point, using helper components for axes and marks, and includes tooltips showing the full event date on hover.

Loading thumbnail…

Fork of Missing Migrants Map + Histogram With Brushing

This visualization presents migration incidents worldwide as a bubble map, with circle sizes proportional to the total dead and missing per location, overlaid on a world atlas rendered with `d3.geoNaturalEarth1` and `d3.geoPath`. A linked date histogram below aggregates monthly totals, and its `d3.brushX` interaction filters the map in real time based on brush selection, updating circles to show only incidents within the chosen time range. The app uses React for state management, D3 v7 for scales, binning, and geographic rendering, and loads missing migrant data from a CSV file.

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a world map of bubble markers with a time-series histogram, linked through interactive brushing. The map displays the spatial distribution of migrant deaths and missing persons using proportional circles, while the histogram aggregates the same data by month. Users can brush over the histogram’s time axis to filter the map’s bubbles dynamically. The code uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for the brushing interaction, and d3.bin for histogram binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Missing Migrants Map + Histogram Combined

This visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection with proportional circles sized by the total dead and missing per location, while the histogram shows monthly totals over time. The code applies d3.geoPath for map rendering and d3.bin with time thresholds for histogram aggregation. React manages the component structure, with data loaded from a CSV of the Missing Migrants Project. SVG rendering renders both the map and the histogram, with a square root scale controlling circle radii.

Loading thumbnail…

Missing Migrants on a Map

A world map displays the locations of missing migrant incidents, with semi-transparent circles sized by the total number of dead and missing individuals. The visualization uses D3’s geographic projections (`geoNaturalEarth1`, `geoPath`, `geoGraticule`) combined with React and SVG rendering. Circle sizes are scaled with `scaleSqrt`, and the map includes land masses, interior borders, graticules, and a sphere background. Data comes from a CSV of Missing Migrants Global records, while world geography uses TopoJSON from the world-atlas package.

Loading thumbnail…

Migrant Dataset

This visualization displays a bar chart of migrant deaths and missing persons over time, aggregated by month. The chart uses SVG rendering with React and D3.js v7, employing `scaleTime` for the x-axis and `scaleLinear` for the y-axis. Data is binned using `bin()` with monthly thresholds, and the sum of deaths per bin is computed. Hovering over a bar reveals the exact count via a tooltip. The dataset is loaded from a CSV file.

Loading thumbnail…

Points on a Map

This example displays a world map with cities sized by population. Natural Earth projection renders landmasses, graticules, and country borders using d3.geoPath. City points from a CSV dataset are projected onto the map and drawn as semi-transparent circles, with radius scaled by population using d3.scaleSqrt. React manages component state and rendering, while d3.v7 handles geographic calculations and data loading.

Loading thumbnail…

Interactive Color Legend

A scatterplot of the Iris dataset displays petal length against sepal width, with each species colored distinctly. Hovering over a color legend item highlights that species’ points at full opacity while fading all others. The code uses React for component structure and SVG for rendering, with D3’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales and axes. Data loads via D3’s `csv` from a GitHub gist.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with each point colored by species and a legend identifying the three categories. Built with React and D3 v7, the visualization uses `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and SVG circles for marks. Data is loaded asynchronously via `csv`, with axis components and a color legend rendered as reusable React functions.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between measurements by selecting which attribute appears on each axis via dropdown menus. The visualization, built with React and D3 v7, uses `scaleLinear` for both axes and renders SVG circles for data points, with axes generated through reusable React components. The menus provide options for sepal length, sepal width, petal length, petal width, and species, making it easy to compare different variable combinations dynamically.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered in SVG, with dropdown menus to select which attribute appears on each axis. The visualization includes four numeric measurements—sepal length, sepal width, petal length, and petal width—as well as species. Built with React and D3 v7, it uses `scaleLinear` for axes, `extent` for domains, and React state to update the chart when menu selections change. The menus and labels are generated from a shared attribute list.

Loading thumbnail…

Iris Scatterplot

This interactive scatterplot visualizes the Iris Dataset, a classic collection of measurements for three flower species. The SVG-based React application plots sepal length against sepal width for each of the 150 samples, using a custom d3.scaleLinear transformation to map data to pixel coordinates. Tooltips display the precise sepal length on hover. The chart is built with React components (AxisBottom, AxisLeft, Marks) and leverages D3’s csv parsing and extent functions, with a clean, Poppins-styled interface and axis labels for clarity.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. The visualization uses React to render SVG elements, with d3.scaleLinear for positioning and d3.scaleOrdinal for categorical color mapping. Custom React components for axes and marks handle the rendering, while d3.csv loads and parses the dataset. A d3.format function formats tick labels, and the color scheme distinguishes the three iris species.

Loading thumbnail…

Fork of Scatter Plot with Color - Correct Version

This example displays the classic Iris dataset as a scatter plot of petal length versus sepal width, with points colored by species. The visualization uses SVG rendering within a React application, leveraging d3-scale functions like `scaleLinear` and `scaleOrdinal` for positioning and color encoding. Axis components are built with `d3.ticks` to generate tick marks, while the data is loaded asynchronously via `d3.csv` from a GitHub gist. The code also includes custom formatting with `d3.format` for the bottom axis labels.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot of the Iris Dataset allows users to explore relationships between sepal and petal measurements. Two dropdown menus, built with ReactDropdown, select the attributes for the X and Y axes, with axis labels updating accordingly. The SVG visualization uses D3 scales, extents, and formatting via `scaleLinear`, `extent`, and `format` to render axes and a static set of teal circular marks, each with a tooltip showing the x-value. Data is loaded from a CSV file hosted on GitHub using D3's `csv` function.

Loading thumbnail…

Menus with React

This example shows a React-based menu system for selecting a pet from a dropdown list, using the `useState` hook to track the currently chosen value and the `Dropdown` component to render the select element. The code relies on React 17 and ReactDOM for component rendering, with options defined as an array of value-label pairs. As users change the selection, the `onSelectedValueChange` callback updates the displayed state, demonstrating controlled form inputs within a React application.

Loading thumbnail…

React Starter

This React starter example renders the text “Hello React!” onto a blank HTML page. It uses the React and ReactDOM libraries (version 17.0.2 from unpkg) to define a simple component called `App`, then mounts it to the `#root` div via `ReactDOM.render`. The page is styled with no margin and hidden overflow, and the example serves as a minimal template for React-based visualization projects.

Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection, showing landmasses in teal with country borders and graticules overlaid on a light gray sphere. The visualization fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using topojson’s `feature` and `mesh` functions. It renders with React and D3 v7, applying `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to draw the map and its decorative overlays in SVG.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of population data for ten countries, with axes rendered as React components. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while the axis ticks and grid lines are generated by mapping over the scales inside JSX. Data comes from a CSV file parsed with D3’s `csv` function, and the bars are drawn as SVG `<rect>` elements. The code explicitly imports React and D3 utilities, demonstrating a hybrid approach where React manages the DOM and D3 provides scaling and data parsing.

Loading thumbnail…

Bar Chart - Margin Convention

A bar chart displays the top 10 countries by 2020 population from a UN dataset, with horizontal bars scaled by population count. The React component loads CSV data via D3’s `csv` method, then uses `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. SVG rectangles are rendered inside a translated group element that applies the margin convention, with dimensions calculated from fixed `width`, `height`, and `margin` objects. The chart updates after asynchronous data loading, showing a loading state initially.

Loading thumbnail…

Country Population Bar Chart

This example shows a horizontal bar chart of the top ten countries by 2020 population, ordered from largest at the top to smallest at the bottom. The bars are rendered as SVG `rect` elements inside a React component, with scales created using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file using `d3.csv`, with the population column coerced to numeric values. The chart uses React state and the `useEffect` hook to fetch and transform the data before rendering.

Loading thumbnail…

Loading Data with React & D3: Color Visualization

This visualization displays a color wheel with 148 segments, each representing a named CSS color from a CSV file loaded via the `d3.csv` utility. The pie chart, rendered as SVG paths, uses the `d3.pie` layout with a constant value per row, and the `d3.arc` generator to create the pie slices, filled with each color’s hex value from the data. React manages the asynchronous data loading and renders the output.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a simple data-loading workflow using React and D3. It fetches a CSV file of CSS named colors from a GitHub repository using the `d3.csv` function, then renders a vertical list of color swatches, one for each row. Before the data arrives, the interface shows a “Loading...” message. The `Message.js` utility calculates and returns a summary string with file size, row count, and column count, though it is not displayed here. The visualization relies on React’s `useState` and `useEffect` hooks to manage the asynchronous data fetch.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and parse a CSV file of CSS named colors using React and D3. It fetches the data with `d3.csv` and displays summary statistics—file size in kilobytes, row count, and column count—in a large `<pre>` element. The code also includes commented-out alternatives using the browser’s `fetch` API with `async`/`await` and `d3.csvParse`, illustrating different approaches to asynchronous data loading in a React context. The visualization is minimal, focusing on the data-loading process rather than graphical output.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3 v7, displaying summary statistics about the dataset in a large text element. It fetches a CSV file containing CSS named colors from a GitHub gist, then uses `d3.csv` to parse the remote data and `d3.csvFormat` to calculate the formatted size in kilobytes. The output shows the total data size, row count, and column count, rendered directly into an HTML `<pre>` element via `textContent`.

Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor in real time across an SVG canvas. The circle’s position updates directly from pointer movement events, not from any external dataset. The example uses React’s `useState` hook to manage the live mouse coordinates, with an `onMouseMove` handler on the SVG element. D3.js v7 is loaded in the page, though the interaction relies entirely on React state updates and native SVG rendering. The SVG viewport is a fixed 960 by 500 pixels, and the circle has a radius of 30 pixels.

Loading thumbnail…

Smiley Face Part 1

A grid of eighteen identical smiley faces appears, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, mouth width, and mouth radius, creating subtle differences across the grid. Built with React and D3 v7, the visualization uses D3’s `arc()` generator to define the mouth path and SVG circles for the face components. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` within a translated `<g>` element, mapping each face from a `range(6*3)` array.