Frederick O'Brien

@frederickobrien·21 public vizzes

Organisation Network Graph

This example displays an organization network graph, visualizing the relationships between teams and tools. Larger hub nodes represent main departments, while smaller connected nodes show their related sub-teams or platforms, with colors grouping different functional areas. The graph uses D3’s force simulation (`d3.forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`) to position nodes and links dynamically. Nodes are rendered as SVG circles with labels, and links as lines, with drag interaction applied via `d3.drag` on the simulation.

Mar 2, 2022

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents a single flower sample, with a native tooltip revealing the precise x-value on hover. Built with React and rendered as SVG using d3.scaleLinear for both axes, the visualization employs custom AxisBottom and AxisLeft components for tick marks and labels. The d3.csv loader fetches the data, while the marks are drawn as circle elements with dark red fill, styled with the Bebas Neue font.

Feb 19, 2022

Loading thumbnail…

HIV/AIDS Chloropleth Map

This interactive choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a sequential yellow-orange-red color scale. Country colors represent infection rates, with missing data shown in light gray. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for country boundaries, React for the UI, and D3's scaleSequential for color mapping. Data comes from the IHME HIV/AIDS prevalence dataset, joined to country codes via the ISO-3166 CSV. The render uses SVG, with a sphere outline and graticule overlay.

Jan 27, 2022

Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, showing each recorded migration event as a point over time on the x-axis and the total dead and missing count on the logarithmic y-axis. The visualization uses React with D3 v5, employing `scaleTime` for the date domain and `scaleLog` to handle the wide range of casualty counts. SVG circles render each data point with a `title` element for tooltips, while custom `AxisBottom` and `AxisLeft` components generate the ticks and grid lines. The log scale compresses large values while revealing patterns in smaller incidents.

Jan 24, 2022

Loading thumbnail…

Missing migrants on a map

This interactive visualization plots the locations of missing migrants worldwide as semi-transparent maroon circles on a world map, with circle size proportional to the count of dead and missing individuals. A linked time-series histogram below the map shows monthly totals and includes a brush control that filters the map to show only incidents within the selected date range. The map uses a `geoNaturalEarth1` projection rendered via `d3.geoPath`, while the histogram employs `d3.bin`, `d3.scaleTime`, and `d3.brushX`. Data comes from the Missing Migrants Project subset loaded with `d3.csv`; the world atlas geometry uses TopoJSON from the `world-atlas` package.

Jan 24, 2022

Loading thumbnail…

Migrant deaths

This visualization displays the total number of migrant deaths and missing persons over time, using a bar chart where each bar represents a monthly bin. The bars are overlaid with a dark red line chart that connects the sum of deaths for each month, providing a clear trend line. The chart is built with React and D3.js v7, using the `bin` and `timeMonths` functions to aggregate the data into monthly intervals and `scaleTime` and `scaleLinear` for the axes. The data is loaded from a CSV file of Missing Migrants Global records, and the visualization is rendered as SVG.

Jan 18, 2022

Loading thumbnail…

Points on a map sized circles

A world map displays cities as green circles sized by population using a square root scale. The example combines a Natural Earth projection with D3 v7’s `geoPath` and `geoGraticule` to render landmasses, borders, and graticules in SVG, while React manages component state and data loading. City coordinates and population values come from a CSV file, loaded via `d3.csv`, and the atlas topology is fetched from the world-atlas package. Circle radii range from zero to twenty pixels, with semi-transparent fill for overlap visibility.

Jan 6, 2022

Loading thumbnail…

Points on a map

A world map rendered in SVG displays all cities from a CSV dataset as small translucent red points. The map is built with React and D3, using the `geoEqualEarth` projection, `geoPath`, and `geoGraticule` to draw land masses and graticules from a TopoJSON atlas, while the points are plotted by projecting each city’s longitude and latitude with `projection([d.lng, d.lat])`. The visualization highlights the global distribution of urban centers through a sparse scatterplot overlay.

Jan 5, 2022

Loading thumbnail…

Scatter plot with menus

A scatter plot of the Iris Dataset allows users to explore relationships between flower measurements via two dropdown menus for selecting X and Y axes. Points are colored by species, with a legend that dims non-hovered categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data loading, rendering as SVG with custom axis components and ReactDropdown for the menus.

Jan 4, 2022

Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet, with the chosen value logged to the console and reflected in the selected option. It uses the `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a `<select>` element. The code integrates React 17 and D3 v7 via CDN, with a custom `onSelectedValueChange` callback to update state. The interface includes a labeled dropdown with options for dog, cat, hamster, parrot, spider, and goldfish, styled with large text for readability.

Dec 1, 2021

Loading thumbnail…

React starter

This React starter demonstrates a minimal setup for integrating D3 with a React application. The code renders a simple "Hello, React" message inside a root element using ReactDOM, with D3 v7, React 17, and react-dom loaded via UMD scripts. While no D3 functions are currently invoked, the structure—including the `index.html` entry point and webpack-bundled `bundle.js`—provides a foundation for building interactive visualizations that combine React components with D3’s capabilities.

Dec 1, 2021

Loading thumbnail…

World map

This example shows a world map rendered as an orthographic projection of landmasses and graticules, with country borders highlighted. It uses D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, graticule grid, and land features from a TopoJSON world-atlas dataset, while `topojson.feature` and `topojson.mesh` extract geometries and interior borders. React manages the component structure and data loading via a custom `useData` hook, with all shapes output as SVG paths.

Dec 1, 2021

Loading thumbnail…

Working with time

A line chart tracks temperature in San Francisco across a week, with individual data points marked as circles. The x-axis displays time using abbreviated weekday labels, while the y-axis shows temperature values. Built with React and D3 v7, the visualization uses `scaleTime` and `scaleLinear` to map data, `line()` with `curveNatural` to draw the smoothed path, and SVG elements for rendering. Data comes from a CSV file loaded via `d3.csv`.

Nov 26, 2021

Loading thumbnail…

Axis with React & D3

This example displays a horizontal bar chart of population figures for eleven countries, using a D3 scaleBand for the y-axis and scaleLinear for the x-axis. React components such as AxisBottom, AxisLeft, and Marks render the SVG elements, with d3.csv loading UN population data from a GitHub gist. The chart supports formatted tick labels using d3.format and interactive tooltips via SVG title elements.

Nov 12, 2021

Loading thumbnail…

Rendering Data with React & D3

This example renders a dataset of CSS named colors as a circular donut chart using React and D3. Each slice represents a single color, filled with its corresponding hexadecimal value from a CSV file loaded via `d3.csv`. React manages the component state and lifecycle with `useState` and `useEffect`, while `d3.arc` and `d3.pie` compute the slice geometry. The chart is drawn as SVG paths, centered within a 960×500 viewport.

Nov 11, 2021

Loading thumbnail…

Rendering Data with React

A React component renders a vertical stack of thin, colored horizontal bars, one for each named CSS color, using an async `d3.csv` fetch from a GitHub gist of RGB hex values. The `useEffect` hook triggers the data load, and the `useState` hook stores the parsed CSV rows before mapping them to a series of `<div>` elements with inline `backgroundColor` styles. The resulting visualization is a compact, continuous color spectrum ordered by the source data's sequence.

Nov 11, 2021

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a temperature time series as a line chart over the full viewport. The visualization displays temperature readings across timestamps, with tooltips showing individual values on hover. The code loads CSV data from an external URL via the `d3.csv` method, then constructs the chart using `vl.markLine` and `vl.encode` functions from the `vega-lite-api` library. Appearance is customized through a configuration object that adjusts axis labels and title styles.

Nov 8, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data in a React component using D3 utilities, displaying the dataset’s size and structure as formatted text. It fetches a CSV file of CSS named colors via D3’s `csv` method, stores the result in React state with `useState` and `useEffect`, and renders a message summarizing the file’s kilobytes, row count, and column count. The visualization updates from a “loading” placeholder to the final summary once the asynchronous data request resolves.

Nov 8, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing CSV data with D3.js. It fetches a remote CSV file containing CSS named colors and displays three summary statistics in a large-text format: the file size in kilobytes, the number of data rows, and the number of columns. Using `d3.csv` with a promise chain, the code accesses the parsed data object and calls `d3.csvFormat` to measure the raw string length. The interface is a simple `<pre>` element updated via `textContent`, with commented alternatives using `fetch` and `d3.csvParse` for comparison.

Nov 5, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The React component uses the `useState` and `useCallback` hooks to track mouse coordinates via an `onMouseMove` event handler, rendering the circle with dynamic `cx` and `cy` attributes. Built with React 17 and D3 v7, the example demonstrates a simple interactive data-binding pattern without external data sources.

Nov 3, 2021

Loading thumbnail…

Smiley Face

This example shows a grid of smiley faces, each rendered as a yellow circle with black outlines, eyes, and a curved mouth. The faces are generated using React components, with each face composed of separate `BackgroundCircle`, `Eyes`, and `Mouth` parts. D3’s `arc` function creates the mouth shape, while `range` from D3 drives the generation of 18 distinct faces, each with randomized eye and mouth dimensions. The SVG output is centered within a fixed-width container, and the code relies on React’s declarative component structure to assemble each face.

Nov 1, 2021