M

Michael Bruno

@Brunomike·32 public vizzes

Loading thumbnail…

Organization Graph Diagram

An organization graph diagram displays a network of cultural and arts organizations, with colored nodes connected by lines to show relationships. Four primary clusters, each with a distinct color palette, contain child nodes and small leaf nodes representing affiliated groups or projects. The visualization uses D3.js v7 with `d3.forceSimulation`, `forceLink`, and `forceManyBody` to compute the layout, rendering nodes as SVG circles and links as SVG lines. Node dragging is enabled to allow manual repositioning during the simulation.

Loading thumbnail…

Force Directed Graph Starter

Three nodes labeled Alice, Bob, and Carol are drawn as circles connected by black lines, forming a small network that is laid out by simulated physical forces. Using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` from D3 v7, the simulation continuously updates each node’s position during a `tick` event, repositioning the SVG circles and lines to equilibrium. The embedded data is a fixed set of three nodes and two links provided in the code.

Loading thumbnail…

Voronoi Overlay with Labels

A multi-line chart displays cumulative COVID-19 deaths over time for multiple countries, with a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay`, captures mouse hover events across the chart area, highlighting the nearest data point and its corresponding line. A tooltip with country name, death count, and date follows the cursor, while the active series is emphasized. Data comes from the CSSE COVID-19 time series, rendered as SVG in React using d3 scales and axes.

Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This example visualizes cumulative coronavirus deaths over time for multiple countries using a log-scaled line chart. A Voronoi overlay, generated with `d3.Delaunay` and `d3.voronoi`, makes each line segment hoverable, highlighting the active country’s path in black. The chart uses `scaleTime` and `scaleLog` for axes, with data from the CSSE COVID-19 time series. React manages the hover state, while SVG renders the paths and overlay.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

This interactive SVG line chart, built with React and D3 v5, visualizes cumulative COVID-19 deaths over time for each country. Each country’s daily death total is plotted as a separate line, with a logarithmic y-axis to accommodate the wide range of values. The chart uses a time scale for the x-axis and a log scale for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is fetched from a global CSV time-series dataset, transformed, and displayed using D3’s line generator.

Loading thumbnail…

Visualization Labels

A line chart displays cumulative global COVID-19 deaths over time, using a logarithmic y-axis and a time-based x-axis. Built with React and D3 v5, it renders an SVG path via `d3.line` and `d3.scaleLog`, with axes created by `d3.axisBottom` and `d3.axisLeft`. The data comes from the CSSEGISandData COVID-19 time series CSV.

Loading thumbnail…

Coronavirus Log Y Axis

The chart shows the global cumulative death toll from COVID-19 over time on a logarithmic y-axis, making the exponential growth visible as a straight line. A React component renders a single SVG path using `d3.line`, with `d3.scaleLog` and `d3.scaleTime` mapping the data, which is loaded from the CSSEGISandData GitHub repository. `d3.axisBottom` and `d3.axisLeft` provide gridlines, while commented-out marker lines suggest intended annotations for current date and the 10,000-death threshold.

Loading thumbnail…

Coronavirus Linear Y Axis

A line chart tracks cumulative global COVID-19 deaths over time on a linear y-axis, with the x-axis showing dates from the start of the pandemic to the most recent day. The visualization highlights the exponential growth trajectory of mortality counts, using a black stroke-width of five pixels for the line. Built with React and D3 v5, it employs `scaleTime`, `scaleLinear`, and `line` generators, with axes rendered via `axisBottom` and `axisLeft`. Data comes from the CSSEGISandData COVID-19 time series on GitHub, aggregated by summing daily death totals across all countries.

Loading thumbnail…

React + D3 Axes

A line chart displays total global COVID-19 deaths over time, sourced from the CSSE COVID-19 dataset. The React component renders an SVG with `d3.scaleTime` and `d3.scaleLinear` axes, while `d3.axisBottom` generates the x-axis gridlines. A vertical marker indicates the most recent date, and a horizontal marker highlights the 10,000-death threshold, both styled with CSS classes.

Loading thumbnail…

Fork of Coronavirus Line Chart with 10,000 Marker Line

This line chart depicts the global cumulative death toll from COVID-19 over time, with a horizontal marker line at 10,000 deaths and a vertical marker at the most recent date. It uses React and D3 v5’s `scaleTime`, `scaleLinear`, and `line` to generate an SVG path from data fetched via `d3.csv` from the CSSEGISandData GitHub repository. The chart renders a single thick black line, with the marker lines and text labels styled via CSS.

Loading thumbnail…

Coronavirus Line Chart with 10,000 Marker Line

A line chart shows the global cumulative death toll from COVID-19 over time, with a horizontal marker line highlighting the threshold of 10,000 deaths. The chart uses D3 v5's `scaleTime`, `scaleLinear`, and `line` to generate the path, while React renders the SVG. The X axis maps dates parsed with `timeParse`, and the Y axis deaths from the CSSE global time-series CSV. Styling uses black strokes, with the marker line drawn as a separate SVG `<line>` element. The visualization waits for the remote data to load before drawing.

Loading thumbnail…

Summarizing Coronavirus Data

This example displays the total global deaths from COVID-19 as a large red number in a `<pre>` element, updated to the most recent date in the dataset. It loads a CSV from the Johns Hopkins CSSE GitHub repository using `d3.csv`, extracts the last date column, sums all numeric values with `Array.reduce`, and formats the result with `d3.format`. The final message combines the comma-formatted total and the date, then injects it into the page via `textContent`.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates the initial step of working with the COVID-19 time-series dataset from the CSSE at Johns Hopkins University, showing the file size, row count, and column count of the data. It loads a global deaths CSV via `d3.csv` with a promise, then extracts the latest date column from the data’s headers. The computed metadata is displayed in a large `<pre>` element using plain DOM manipulation. The code uses D3 v5’s `csv` and `csvFormat` APIs, with no additional visualization or rendering beyond text output.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a dataset of CSS named colors from a GitHub gist and displays basic statistics about it—file size in kilobytes, row count, and column count—in a large HTML text element. The code uses `d3.csv()` with a Promise chain, and also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse()`. The visualization simply presents these numeric summaries as plain text, without any graphical chart or color rendering.

Loading thumbnail…

HIV/AIDS Choropleth Map

A choropleth map of global HIV/AIDS prevalence in 2017, using a yellow-orange-red sequential color scale to show the share of the population aged 15-49 infected. The visualization renders country boundaries as SVG paths using `d3.geoPath` with a Natural Earth projection, with gray fill for countries lacking data. It joins CSV data to country geometries via ISO numeric codes, using `d3.scaleSequential` and `interpolateYlOrRd` for color encoding. Built with React and D3 v5, the map also displays graticules and interior borders.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This visualization displays the Missing Migrants Dataset as a scatter plot, where each point represents a single migration event. The x-axis encodes the reported date using a time scale, while the y-axis uses a logarithmic scale to show the total dead and missing count. The chart is built with React and D3 v5, using scaleTime and scaleLog for the axes, with SVG circles rendered by a custom Marks component. Tooltips show the full date via native SVG titles.

Loading thumbnail…

Analyzing Missing Migrants with Brushing

This interactive visualization analyzes missing migrant incidents through two linked views: a world map and a time-series histogram. The map displays each incident as a circle, with its radius scaled to the number of dead or missing, while the histogram shows monthly totals. Brushing over the histogram filters the map, updating the displayed circles in real time. Built with React and D3 v5, it uses `d3.geoPath` and `d3.geoGraticule` for geographic projections, `d3.brushX` for the selection interaction, and `d3.bin` for aggregating the data over time. Data is sourced from a CSV of global missing migrant records.

Loading thumbnail…

Missing Migrants on a Map and a Histogram

A world map and a histogram visualize the locations and monthly death tolls of missing migrants, revealing where fatalities occur and when they peak. The map uses a natural Earth projection to plot circles scaled by the square root of the number of dead and missing, while the accompanying bar chart aggregates the same data by month. Both visualizations are rendered as SVG using React, with D3.js handling the geospatial projections, graticule, and histogram binning. The data comes from the Missing Migrants Project.

Loading thumbnail…

Analyzing Missing Migrants

This visualization analyzes missing migrant data by showing the total number of dead and missing individuals aggregated by month, displayed as a bar chart with time on the x-axis and counts on the y-axis. The code uses React with D3 v5, employing `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.histogram` with `d3.timeMonths` to bin the daily records into monthly totals. Each bar includes a tooltip showing the exact monthly count, rendered as an SVG with custom axis components.

Loading thumbnail…

Missing Migrants on a Map

A world map displays the global distribution of missing migrants, with semi-transparent circles sized proportionally to the total number of dead and missing individuals at each location. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land masses, graticules, and country interiors from TopoJSON data. Circle radii are scaled using `d3.scaleSqrt` based on the dataset's maximum value. The React component hierarchy manages asynchronous data loading with custom hooks for both the world atlas and the CSV dataset.

Loading thumbnail…

Sized Points on a Map

This visualization displays the world’s most populous cities as semi-transparent points sized proportionally to their population using a square-root scale. A natural Earth projection renders landmasses, graticules, and country interiors via d3.geoPath. City data is loaded from a CSV using d3.csv, while geographic features come from the world-atlas TopoJSON, processed with topojson.feature and topojson.mesh. React components manage the SVG rendering.

Loading thumbnail…

Points on a Map

This visualization displays global city locations as small, semi-transparent points on a natural Earth projection. The map itself is rendered using SVG paths for landmasses, graticules, and interiors, computed via `d3.geoPath` and `d3.geoGraticule`. City coordinates from a CSV file are projected using `d3.geoNaturalEarth1` and plotted as circles. The React application loads world atlas TopoJSON and city data through custom `useWorldAtlas` and `useCities` hooks, illustrating a straightforward layered approach to geographic point mapping.

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with the x and y axes controlled by dropdown menus. The color legend is interactive: hovering over a species option fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and inline SVG circles for data points. Dropdown components from react-dropdown handle attribute selection for both axes.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, using color to distinguish between the three flower species. Users can dynamically change which measurements appear on the x- and y-axes via dropdown menus, allowing exploration of the dataset's relationships. The visualization is built with React and D3 v5, using React hooks for state management and D3 scales for positioning and color encoding. SVG circles are rendered as marks, with each point displaying a native title tooltip.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.extent` to compute domains, and `d3.csv` to load the data. SVG circles represent individual flowers, with native `<title>` tooltips showing coordinates. The interface uses React `useState` hooks to manage selected attributes, while reusable components render axes and marks.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as petal length and sepal width. Users select which attributes to plot on the X and Y axes via dropdown menus, with the axes, labels, and data points updating dynamically. The visualization is built with React for UI state management and D3 v5 scales for positioning. The scene is rendered as an SVG, using React components like `AxisBottom`, `AxisLeft`, and `Marks` to compose the chart, and it employs D3’s `scaleLinear` and `extent` for data mapping.

Loading thumbnail…

Menus with React

This example shows a pet-selection menu built with React. It displays a dropdown list of six animal options, with a hamster preselected. The app uses React’s `useState` hook to track the selected value, which is logged to the console on change. The `Dropdown` component, defined in a separate file, maps over the option objects to render each `<option>` element, with the selected value triggering a change event. The page loads React and ReactDOM from unpkg and renders the app into the root div.

Loading thumbnail…

React Starter

This React starter example renders the text "Hello React!" on a blank page. The project combines the React and ReactDOM libraries to build the user interface, with a minimal setup using a locally referenced bundle.js and the production builds of React and React-DOM version 16.9.0. The code defines a functional component, App, which returns a simple div containing the greeting, and mounts it to the page's root element using ReactDOM.render. The example demonstrates a basic React workflow within an HTML environment.

Loading thumbnail…

World Map

This visualization displays a world map using a Natural Earth projection, rendered as SVG paths. It shows landmasses in teal, graticule lines in light gray, and country borders highlighted with a darker teal stroke. The map is generated from TopoJSON data (world-atlas countries-50m.json) loaded with d3.json, then converted to GeoJSON using topojson.feature and topojson.mesh. The React component structure relies on hooks (useState, useEffect) to fetch and process the data, while d3.geoNaturalEarth1 and d3.geoPath handle the projection and path generation.

Loading thumbnail…

Working with Time

A line chart displays temperature measurements over the course of a week in San Francisco, with circles marking each data point. The visualization uses React components for rendering SVG elements and D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The line path is generated with D3's `line()` function and `curveNatural` interpolation, while data is loaded as CSV from a remote gist and parsed with custom row conversion.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length against sepal width. Built with React and D3 v5, it renders SVG circles using `scaleLinear` scales, `extent`, and `csv` for data loading. The axes are composed from React components (`AxisBottom`, `AxisLeft`) with custom tick formatting via `format('.2s')`. Each circle includes a native SVG `<title>` tooltip showing the petal length value.