Joakim Warholm

HIV / AIDS Choropleth Map

This visualization uses a natural Earth projection with D3’s `geoNaturalEarth1` and `geoPath` to draw world landmasses, graticules, and sphere outlines, overlaid with circles sized by city population via `scaleSqrt`. The React component loads World Atlas TopoJSON for boundaries and a CSV of HIV/AIDS prevalence data for cities, mapping each city’s longitude and latitude to screen coordinates. Semi-transparent teal circles highlight population distribution, while the underlying choropleth styling uses SVG paths and CSS classes. Data sources include the World Atlas TopoJSON and a Simplemaps-derived cities dataset.

World map

This world map visualization displays countries and their borders using an equal Earth projection, rendered as an SVG with distinct fills for land, sphere, and interior boundaries. It loads geographic data from the World Atlas TopoJSON file, converting it with the `feature` and `mesh` functions from TopoJSON. The React-based component uses D3 v5's `geoEqualEarth` and `geoPath` to project and draw paths, with a red stroke highlighting country interiors. The visualization loads asynchronously via the `useData` hook and presents a clean, color-coded global view.

Fork of Working with Time

This example shows a scatter plot of temperature readings over time, drawn from the Data Canvas Sense Your City Dataset. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with React components structuring the axes and circular marks. Axis ticks are generated from d3 scale methods, and each circle includes a native SVG `<title>` element for tooltips. The chart is rendered with React and D3 v5, loading data asynchronously via d3.csv.

Loading data with React and D3

This example demonstrates how to load and display a dataset using React state and D3 utilities. It fetches a CSV file of CSS named colors with `d3.csv` and stores it via the `useState` hook, showing a loading message until the data arrives. Once loaded, the visualization renders each color as an SVG path using the `d3.arc` generator, with the fill color mapped from the CSV’s `RGB hex value` column. The app uses React 16.9 and D3 v7, combining React’s declarative rendering with D3’s data transformation and arc layout functions.

Fork of Rendering Data with React & D3

A radial burst of CSS named colors, loaded from a CSV file, fills an SVG canvas as hundreds of wedge-shaped paths radiating from the center. React 16.9 manages the component state and rendering, while D3 v5 utilities `csv`, `pie`, and `arc` handle data loading, angle computation, and path generation. Each slice’s fill color comes directly from the dataset’s RGB hex values, with the outer radius set to the full viewport width.

Fork of Vega-Lite API Template

This example streams weekly San Francisco temperature data from a CSV file into a Vega-Lite line chart, rendered as an SVG via the vega-lite-api and vega-tooltip libraries. The visualization uses `vl.markLine` with a time-encoded x-axis and quantitative y-axis, while `vl.x().fieldT()` and `vl.y().fieldQ()` define the encodings. Configuration in `config.js` removes axis domains, sets custom label fonts, and applies a dark color scheme. The code loads data with `d3.csv` and fits the chart to the full window size.

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. It fetches the remote CSV using D3's `d3.csv` method and then displays three summary statistics: the file size in kilobytes, the number of rows, and the number of columns. The output is rendered as plain text within an HTML `<pre>` element, with the font size enlarged via CSS. The code also includes a commented-out alternative using `fetch` and `d3.csvParse`, showing a manual parsing approach.

Mouse follower

A single circle follows the mouse cursor within an SVG canvas. The circle’s position is updated via React state, triggered by an `onMouseMove` handler that tracks `clientX` and `clientY` coordinates. The example uses React 16.9 with hooks (`useState`, `useCallback`) and renders the SVG element with the circle’s `cx` and `cy` attributes bound to the current mouse position. The visualization demonstrates a simple interactive pattern with minimal code, relying solely on React’s state management and SVG rendering.

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by displaying key statistics about the CSS Named Colors dataset, including file size, row count, and column count. It uses d3.csv to fetch the remote CSV file and returns a promise that resolves with the parsed data. The code also includes commented-out alternatives using fetch with async/await and d3.csvParse, as well as a nested promise “pyramid of doom” pattern, to illustrate different approaches to asynchronous data loading in D3 v5.

Bo Face Fork

A grid of fifteen stylized faces is rendered, each composed of a yellow circle with black outlines, eyes, eyebrows, and an arc-shaped mouth. The faces vary randomly in eye radius and eyebrow angle, creating subtle differences across the repeated pattern. Built with React and D3 v7, the visualization uses D3's `arc` generator for the mouths and maps over an array generated by `d3.range` to produce each face component. All elements are drawn as SVG shapes within a transformed coordinate system.