Ben Seebeck

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 color scale to represent prevalence rates. Countries with missing data appear in gray. The visualization is built with React and D3 v7, using `geoNaturalEarth1` and `geoPath` to render world countries from TopoJSON data, with geographic graticules and interiors drawn as overlays. The data comes from a CSV file containing HIV prevalence statistics from IHME.

Nov 10, 2021

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes missing migrant incidents over time, with the y-axis using a logarithmic scale to accommodate the wide range of reported deaths. The visualization shows each incident as a circle plotted against its reported date and total dead and missing count. The code uses d3.scaleLog and d3.scaleTime for scaling, React for component structure, and SVG for rendering. Data comes from the Data Canvas Sense Your City Dataset, loaded via d3.csv from a GitHub gist.

Nov 10, 2021

Multiple Views with Brushing

This example combines a geographic bubble map with a time-series histogram, linked through interactive brushing. The map displays the total number of dead and missing migrants by location, with circle sizes scaled using d3.scaleSqrt, while the histogram aggregates the same data by month using d3.bin and d3.timeMonths. Dragging a brush across the histogram filters the map’s circles to show only incidents within the selected date range, implemented with d3.brushX and React state. Both views use SVG rendering via d3.geoNaturalEarth1 and d3.geoPath for the map, with data sourced from the Missing Migrants Project CSV.

Nov 10, 2021

Missing Migrants on a Map with Bars

This visualization combines a world map with a time-series bar chart to show the global distribution and monthly trends of missing migrants. The map uses a natural Earth projection with semi-transparent circles scaled by the square root of the total dead and missing, while the lower histogram aggregates the same metric by month. Built with React and D3 v7, the map employs `geoNaturalEarth1` and `geoPath` for geographic rendering, while the histogram uses `scaleTime`, `histogram`, and `scaleLinear` to bin data from the Missing Migrants Project CSV. SVG renders all marks, with tooltips on bars for exact values.

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants, with circles sized by the total number of dead and missing per location. D3’s `geoNaturalEarth1` projection and `geoPath` render land, country interiors, and graticules from TopoJSON data. The circular marks, scaled using `scaleSqrt`, overlay incident coordinates from a CSV subset of the Missing Migrants Project dataset. Built with React and D3 v7, the SVG plot shows darker clusters around major migration routes across the Mediterranean and the US–Mexico border.

Missing Migrants Bar Chart

This bar chart visualizes the monthly total of dead and missing migrants from the Data Canvas Sense Your City dataset, using a histogram binning approach with d3.bin and timeMonths thresholds. The React-driven visualization employs d3.scaleTime and d3.scaleLinear to map time and counts, while SVG rectangles render the aggregated values. Axes are drawn with custom React components, and tooltips display exact totals via the native title element, with d3.csv loading the data and Poppins typography styling the interface.

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length and sepal width on the x- and y-axes with species as color. A legend built with SVG circles and text responds to mouse hover, fading unrelated data points and highlighting the selected species. The code uses React hooks (`useState`) to manage the hovered value, D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and coloring, with data loaded asynchronously via `d3.csv`.

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with a color legend for species. The d3.v7 scales (scaleLinear, scaleOrdinal) position circles within an SVG rendered via React. Axis components handle tick generation, while d3.csv loads and parses the data. A color scale assigns distinct hues to the three iris species, with a legend generated from the color domain.

Scatter Plot with Color

This interactive D3.js scatter plot, built with React and rendered as an SVG, visualizes the classic Iris dataset. It displays the relationship between petal length (x-axis) and sepal width (y-axis), with each of the three iris species distinguished by a unique color using `scaleOrdinal`. The visualization employs `scaleLinear` for both axes, and the `csv` function from D3 is used to load and parse the data. Interactive tooltips are provided via SVG `<title>` elements, showing the precise petal length of each point.

Nov 8, 2021

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements from four flower attributes. Users select which attributes appear on the X and Y axes through two dropdown menus, with axis labels and scales updating accordingly. The visualization is built with React and D3 v7, using `scaleLinear`, `extent`, `max`, and `format` functions to position marks and format tick labels. SVG circles represent individual iris samples, with native `<title>` tooltips revealing exact values on hover. The example demonstrates a polished, reusable component architecture with axes, marks, and dropdowns split into separate functional components.

Nov 8, 2021

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG in React, lets users select which attribute appears on each axis through two dropdown menus. The chart maps petal and sepal measurements, using `d3.scaleLinear` for scales and `d3.extent` to compute domains. Axes are drawn with shared `AxisBottom` and `AxisLeft` components, while `Marks` renders circles with tooltips. The code loads CSV data via `d3.csv`, and the dropdowns update state to reassign the x and y values dynamically.

Nov 8, 2021

Menus with React

This example demonstrates a pet-selection interface built with React, showing how a dropdown menu synchronizes its displayed value with application state. The user can choose from six predefined pet options, and the current selection is logged to the console. The code uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component that renders a standard HTML `<select>` element. ReactDOM renders the main `App` component, which passes the options array and state update function to the dropdown via props.

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” to the browser. The code defines a simple `App` component returning a `<div>` element, then mounts it into the DOM via `ReactDOM.render` targeting the `#root` element. It uses the production UMD builds of React 17.0.2 and React-DOM loaded from unpkg, with the page styling hiding margins and overflow. No additional data or visualizations are present; the example focuses on the basic setup and rendering pipeline for a React-based visualization project.

World Map

A world map rendered in SVG using a Natural Earth projection, with landmasses in teal, graticules in light gray, and country borders drawn as interior mesh lines. The visualization loads world-atlas TopoJSON data via `d3.json` and uses `topojson.feature` and `topojson.mesh` to extract land polygons and boundary paths. The `geoNaturalEarth1` projection and `geoPath` generate the geographic shapes, while a sphere outline and graticule layer provide context. React manages the component structure, with D3 handling data loading and geometry calculations.

Line Chart

This line chart displays weekly temperature readings from the Data Canvas Sense Your City dataset, plotting timestamp on the x-axis and temperature on the y-axis. The visualization uses React with D3 v7 to create an SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, and d3.line for the smoothed path with its curveNatural interpolation. Tick marks are rendered through reusable axis components, while the Poppins font styles the labels and axis text.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. Built with React and D3 v7, it uses `d3.scaleLinear` for axes and maps the data to SVG circles with a teal fill. Axis components render ticks and labels with custom tick formatting via D3’s `format` function. A native SVG `<title>` element provides hover tooltips showing the petal length. The Poppins font and muted gray axis styling give the chart a modern, clean aesthetic.

Stylized Bar Chart

This stylized bar chart visualizes the top ten countries by population according to the United Nations World Population Prospects 2019. It presents categorical data horizontally, with countries along the y-axis and population values along the x-axis. The visualization uses D3 v7 within a React framework, rendering SVG marks and axes. D3’s `scaleBand` and `scaleLinear` position the bars, while `format(".2s")` converts tick labels from gigabytes to billions. A Poppins font and muted custom color scheme define the stylized aesthetic.

Refactored Bar Chart

This chart displays population data for ten countries, using a horizontal bar layout with categorical country names on the y-axis and a linear population scale on the x-axis. Built with React and D3 v7, the SVG visualization separates concerns into modular components for axes and marks. Data loads asynchronously from a CSV file into React state via a custom `useData` hook, while `scaleBand` and `scaleLinear` position bars and ticks.

Axes with React & D3

A bar chart displays the ten most populous countries for 2020, using CSS named colors for the bars. The example combines React state management with D3 utilities, loading CSV data, and computing scales via `d3.scaleBand` and `d3.scaleLinear`. It renders axes and rectangles directly in SVG, with React handling the dynamic updates from the fetched data.

The Margin Convention

This visualization, “The Margin Convention,” displays the ten most populous countries in 2020 as a horizontal bar chart. It uses React state to manage data loaded via D3’s `csv` utility, with `scaleBand` and `scaleLinear` defining the axes. The bars are rendered as SVG `rect` elements within a group that is translated by a fixed margin, demonstrating the standard margin convention for chart layout.

Pathetic Bar Chart

A horizontal bar chart displays the ten most populous countries in 2020, with each bar's length proportional to its population. The chart is built with React and D3, loading CSV data via `d3.csv` and rendering SVG rectangles positioned by `d3.scaleBand` and scaled by `d3.scaleLinear`. The D3 maximum utility `d3.max` sets the x-axis domain, and bars are colored with the default fill.

Rendering Data with React & D3

This example renders a radial burst of every CSS named color from a CSV dataset loaded with D3’s `csv` utility. The visualization shows a complete pie chart where each slice’s fill matches its corresponding hex value, using React state and `useEffect` to fetch the data. D3’s `pie()` and `arc()` functions compute the slice geometry, while React’s `map` method generates the SVG `path` elements. The code relies on React 17, ReactDOM, and D3 v7, all rendered as SVG in a 960×500 viewport.

Rendering Data with React

This example displays a full-width stacked bar of CSS named colors, with each row’s height fixed at 4 pixels and its background set to the corresponding hex value from the dataset. It loads color data from a GitHub Gist CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. Once loaded, the `data.map()` function renders a `div` for each color, demonstrating a simple React-driven rendering pipeline alongside D3 for data loading.

Loading Data with React & D3

This example demonstrates how to integrate D3's data-loading utilities with React's state management. It fetches a CSV file containing CSS named colors from a GitHub gist, then displays a summary of the loaded data. The visualization renders a text message showing the file size in kilobytes, row count, and column count. The code uses React's `useState` and `useEffect` hooks, along with D3's `csv` function for parsing and `csvFormat` for calculating file size.

Vega-Lite API Template

This example visualizes the relative population sizes of religious groups across countries using a bubble chart, where circle size encodes population and the axes list countries and religions. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch data from a Gist derived from the UCI Auto MPG dataset. It applies a custom dark-themed configuration for axes and labels, and renders as a responsive SVG that fits the window, with tooltips enabled through `vega-tooltip`.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in D3.js, displaying a summary of the resulting dataset. It fetches a CSV file containing CSS named colors from a GitHub gist using `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its size in kilobytes. The visualization presents three key metrics as plain text: the data size, row count, and column count, all rendered in a large `<pre>` element. The code also includes commented alternatives using the Fetch API with `d3.csvParse` to show different parsing approaches.

Mouse Follower

This example shows a simple interactive visualization where a gray circle follows the mouse cursor across an SVG canvas. The circle starts at the center of a 960 by 500 pixel viewport and repositions instantly whenever the pointer moves. The code uses React's `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, updating the circle’s `cx` and `cy` attributes through ReactDOM rendering. It demonstrates basic state-driven SVG updates in a React application.

Nov 3, 2021