K

Kevin McMorrow

@kmcmorrow·43 public vizzes

Loading thumbnail…

Organization Graph Diagram

This example shows an organization graph diagram rendered in SVG, displaying a network of main organizations and their associated child nodes with leaf connections. The visualization uses D3’s force simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`) to position nodes and links, with drag interaction enabling manual repositioning. Node sizes and colors are defined in the data files, distinguishing main nodes, children, and leaves. The code draws the network as circles, lines, and text labels within an SVG container, updating positions on each simulation tick.

Loading thumbnail…

Force Directed Graph Starter

A force-directed graph renders three named nodes (Alice, Bob, Carol) as circles and two links as lines in an SVG container. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes. On each tick, circle and line positions update via the simulation's event handler, showing how D3 applies physical forces to a small static dataset.

Loading thumbnail…

Voronoi Overlay with Labels

This visualization charts global COVID-19 death tolls over time, with each country's cumulative deaths represented as a line on a log-scaled Y-axis. It uses a Voronoi overlay generated via `d3.Delaunay` and `voronoi.renderCell` to partition the chart space, making each line segment easily hoverable. When a user hovers over a point, the corresponding country's line is highlighted in black, and a label appears showing the country name, total deaths, and date. The interactive labels are implemented in React with SVG rendering, and the data is loaded from the CSSEGISandData COVID-19 global time series CSV.

Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

Multiple countries' cumulative COVID-19 death tolls are plotted as grey lines on a logarithmic scale over time, with a black line highlighting whichever country the user hovers over. A semi-transparent Voronoi overlay, generated with `d3.Delaunay` and `d3.voronoi`, partitions the chart area into clickable cells to make hovering easier. The React-based visualization uses D3 v7 scales, axes, and line generators, pulling data from the CSSE COVID-19 global time-series CSV.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

A multi-line chart displays cumulative COVID-19 death totals over time for each country, with a logarithmic y-axis to accommodate wide numeric ranges. The visualization uses React with D3 v7’s `scaleTime`, `scaleLog`, and `line` generators to render SVG paths, while `axisBottom` and `axisLeft` produce gridlines and ticks. Data is loaded from the CSSE COVID-19 global deaths time series CSV and transformed by filtering provincial rows and parsing daily columns.

Loading thumbnail…

Visualization Labels

This visualization displays global coronavirus deaths over time using a logarithmic scale for cumulative deaths. The React-based line chart, rendered as SVG with D3 v7, includes axis labels for time and death totals alongside an explicit "now" marker line. It processes COVID-19 data from the CSSE at Johns Hopkins CSV, using D3’s `scaleTime`, `scaleLog`, and `line` generators to map the data points.

Loading thumbnail…

Coronavirus Log Y Axis

A line chart tracks cumulative global COVID-19 deaths over time, using a logarithmic y-axis to reveal exponential growth patterns that a linear scale would compress. The visualization loads time-series data from the CSSE at Johns Hopkins and renders an SVG path via React and d3.v7, with `scaleTime` and `scaleLog` mapping dates and death totals. Dashed marker lines highlight the current date and the one-million-death threshold, while grid lines generated by `axisBottom` and `axisLeft` aid comparison across the pandemic's trajectory.

Loading thumbnail…

Coronavirus Linear Y Axis

This chart shows global COVID-19 deaths over time on a linear y-axis, using a single bold black line to trace cumulative totals from COVID-19 data aggregated from the CSSE Johns Hopkins repository. The chart includes gridlines from both the d3.axisBottom and axisLeft components, with SVG marker lines and labels indicating the current date and the one-million-death threshold. The React component structure uses d3.scaleTime and d3.scaleLinear for positioning, while d3.line generates the path, with axes and markers rendered as separate modular components.

Loading thumbnail…

React + D3 Axes

This example shows the global cumulative death toll from COVID-19 over time, using a line chart with time and linear scales. D3's `scaleTime`, `scaleLinear`, and `line` generate the path from CSV data, while React components wrap D3 selections for gridlines and axes via `axisBottom`. Horizontal and vertical marker lines label the one-million-death threshold and the current date. The chart renders as SVG, with data fetched from the CSSE COVID-19 GitHub repository.

Loading thumbnail…

Fork of Coronavirus Line Chart with 1M marker line

This line chart tracks global cumulative COVID-19 deaths over time, using data from the CSSE at Johns Hopkins. It plots a bold black line and overlays a horizontal marker at the 1,000,000 death threshold, plus a vertical marker at the latest date labeled “now.” Built with React and D3 v7, it uses `scaleTime`, `scaleLinear`, and the `line` generator, rendering as SVG. The `YMarkerLine` and `XMarkerLine` components draw the reference lines and labels.

Loading thumbnail…

Coronavirus Line Chart with 1M marker line

This chart shows the global cumulative COVID-19 death toll over time, with a horizontal marker line at the one-million-death threshold. The line chart uses d3.scaleTime for dates, d3.scaleLinear for deaths, and d3.line to generate the path. A horizontal `line` element is positioned using the y-scale’s value for 1,000,000. Data comes from the CSSE COVID-19 time series CSV, aggregated daily across all countries, and renders as an SVG in a React component.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example shows the total number of global COVID-19 deaths from a live CSV dataset, displayed as a large red number in a web page. It loads the data with `d3.csv` and identifies the latest date column from the dataset’s headers, then sums the death counts from all countries using `Array.reduce`. The result is formatted with `d3.format` and inserted into the page via `document.getElementById`. The data source is the CSSE COVID-19 time series from Johns Hopkins University.

Loading thumbnail…

HIV / AIDS Choropleth Map

This HIV/AIDS choropleth map visualizes the percentage of the population aged 15-49 infected with HIV for the year 2017, using a yellow-orange-red sequential color scale to indicate severity. Countries without data appear in grey. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render the world map, with graticules and country interiors drawn for context. React manages the component state, while d3.csv fetches the HIV prevalence data from the IHME dataset and d3.json loads the World Atlas TopoJSON.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes reported deaths and missing migrants over time, with each circle representing a single incident. The visualization employs a logarithmic y-axis scale to accommodate the wide range of casualty counts, while the x-axis uses a time scale for chronological ordering. Built with React and D3 v7, the code renders SVG circles using custom AxisBottom, AxisLeft, and Marks components. The graph loads CSV data asynchronously via d3.csv and applies scales through scaleLog and scaleTime. Hovering reveals the exact date through native SVG tooltips.

Loading thumbnail…

Missing Migrants Multiple Views with Brushing

This interactive visualization combines a natural Earth projection bubble map of missing migrants with a linked brushing-enabled date histogram. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses from TopoJSON, with circle radii scaled by d3.scaleSqrt based on total dead and missing counts. The histogram bins monthly totals via d3.bin and d3.timeMonths, and the d3.brushX selection filters map circles in real time. Both views use SVG rendering within a React framework, loading data from a CSV of Missing Migrants Global incidents.

Loading thumbnail…

Missing Migrants Multiple Views

This visualization combines a bubble map and a histogram to explore the global count of dead and missing migrants. The map uses a natural earth projection to place circles on a world map, where each circle’s radius is scaled to the total number of dead and missing for a given location. A time-series histogram below aggregates the data by month, showing the sum of deaths over time. The map is rendered using D3’s `geoNaturalEarth1` projection and `geoPath`, while the histogram leverages D3’s `bin` and `timeMonths` functions. Both views are built with React, drawing SVG marks.

Loading thumbnail…

Missing Migrants - Aggregate by Month

This chart aggregates monthly totals of dead and missing migrants from a global dataset. Bars represent the sum of recorded deaths and disappearances for each month, using a time series on the x-axis and a linear count on the y-axis. The visualization is built with React and D3 v7, using `d3.bin`, `d3.scaleTime`, and `d3.scaleLinear` to process and render the data as SVG rectangles. Tooltips reveal exact counts on hover.

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 per event. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders landmasses, graticules, and country borders using `d3.geoPath`. Circle radii are scaled with a square-root scale `d3.scaleSqrt` based on the dataset from the Missing Migrants Project, loaded as CSV. The React app fetches world atlas TopoJSON and the CSV data through custom hooks.

Loading thumbnail…

Missing Migrants

This scatterplot displays reported dates of missing migrant incidents against the total dead and missing, using an SVG rendered with React and D3 v7 scales. The chart plots each incident as a circle, with time on the x-axis and casualty counts on the y-axis, colored in teal. Data is loaded via `d3.csv` from a GitHub Gist, and axes are constructed with `scaleTime` and `scaleLinear`. Native SVG `<title>` elements provide tooltips showing the formatted date on hover.

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

Loading thumbnail…

Interactive Colour Legend

This interactive scatterplot displays the Iris dataset, plotting two selectable attributes against each other. An interactive colour legend on the right allows users to hover over a species to highlight only those points, fading the rest. The visualization uses D3.js scales and axes with React components for rendering SVG circles and the legend. Dropdowns use the React Dropdown library to change the plotted attributes.

Loading thumbnail…

Scatter Plot with Colour Legend

This interactive scatter plot displays the Iris flower dataset, letting users compare any two measured attributes (sepal length, sepal width, petal length, petal width) by selecting them from dropdown menus. The species of each flower is encoded through color and shown in a separate legend. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and renders all marks and axes as SVG elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Loading thumbnail…

Scatter Plot with Colour

This interactive scatter plot explores the classic Iris flower dataset, letting users compare numeric attributes by choosing which measurements appear on the x- and y-axes via two dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical palette, and tooltips reveal exact petal or sepal values. The React-based visualization uses d3.scaleLinear for both axes, renders circles as SVG elements, and reads the CSV data with d3.csv, with brushing and zooming absent from this implementation.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements as teal circles with axes and tick labels generated using d3.scaleLinear and custom SVG axis components. Two dropdown menus, built with the React-Dropdown library, let viewers switch which numeric attribute appears on each axis. React manages state for the selected attributes, while d3.csv loads and parses the data, and the visualization uses SVG circles with tooltips via the <title> element.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus for the x- and y-axes. The chart renders data points as SVG circles using React components and D3 scales (scaleLinear, extent) for positioning. Axis components generate ticks and labels, while menu options dynamically update the displayed dimensions. The visualization uses React state to manage selected attributes and d3.csv to load the data, with axis formatting applied via d3.format.

Loading thumbnail…

Menus with React

This example shows a simple pet selector interface built with React. A dropdown menu lets a user choose from a list of animals—dog, cat, hamster, parrot, spider, and goldfish—with the currently selected value displayed via a console log. The implementation uses React's `useState` hook to track the selected value and a custom `Dropdown` component that renders an HTML `<select>` element, mapping options with `options.map`. The app is mounted into the DOM using `ReactDOM.render` from the ReactDOM library, with the UI styled through inline CSS in the index.html file.

Loading thumbnail…

React Starter

This React starter example renders a simple greeting message, "Hello React!", directly into an HTML page. It imports the React and ReactDOM libraries to create an `App` component that returns the text, and then uses `ReactDOM.render` to mount that component into the `#root` div. The page's styling is minimal, with no margins and hidden overflow, while the components are loaded from the unpkg CDN and a separate `bundle.js` file.

Loading thumbnail…

World Map

This world map visualization displays countries in teal against a light gray sphere, with graticules and interior boundaries rendered in subtle strokes. It uses d3’s geoNaturalEarth1 projection and geoPath to draw geographic features, while topojson’s feature and mesh functions extract land and country borders from the World Atlas dataset. The React app loads data asynchronously via useData and renders the geographic layers as SVG paths within a fixed 960×500 viewport.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over a week in San Francisco, using a smooth natural curve to connect data points. The chart is built with React and rendered as SVG, with D3 v7 handling data loading via `d3.csv`, linear and time scaling through `scaleLinear` and `scaleTime`, and axis generation. Styling uses the Poppins font with teal-colored marks and custom tick formatting for weekday labels, while the underlying data comes from a CSV file containing timestamp and temperature values.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the relationship between petal length and sepal width in Fisher’s Iris dataset, encoding each flower as a circle with a tooltip showing its petal length on hover. The D3.js v7 scales (`d3.scaleLinear`) map the data to SVG coordinates, with axes drawn via custom `AxisBottom` and `AxisLeft` components. The React application loads the CSV using `d3.csv`, formats tick labels with `d3.format`, and renders the plot using SVG elements. The Poppins font and muted color scheme give the chart a clean, modern aesthetic.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by their 2020 population, sourced from a UN dataset. It uses a horizontal bar format with a styled dark teal fill and a clean, modern design. The chart is built with React and D3 v7, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG rendering. Population values are formatted with a custom tick label function that converts large numbers to a readable "B" suffix for billions.

Loading thumbnail…

Refactored Bar Chart

This horizontal bar chart displays the population of the top 10 countries in 2020, with country names on the y-axis and population values on the x-axis. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to map data to SVG coordinates. The chart is separated into modular components—`AxisBottom`, `AxisLeft`, and `Marks`—each rendering SVG elements like lines and text. Data is loaded asynchronously from a CSV file via `d3.csv`, and all visual elements are rendered declaratively with React's SVG output.

Loading thumbnail…

Axes with React & D3

A bar chart displays population data for ten countries from a UN 2019 CSV file. The visualization combines React for component structure and state management with D3 for scales and rendering in SVG. D3’s `csv`, `scaleBand`, and `scaleLinear` handle data loading and axis mapping, while React’s `useState` and `useEffect` manage asynchronous loading. The chart includes labeled x-axis ticks and y-axis country names, with rectangular bars sized proportionally to population values.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from a UN population dataset. The chart uses a React component with D3 scales (`scaleBand`, `scaleLinear`) to position and size SVG rectangles within a translated group element, explicitly reserving space via a margin object. The x-axis encodes population in 2020, while the y-axis displays country names. The code applies D3's `csv` loading and React's `useState` and `useEffect` hooks for data fetching.

Loading thumbnail…

Rendering Data with React & D3

This example renders all CSS named colors as a pie chart using React for component structure and D3 for data processing and SVG path generation. It loads color data from a CSV file via `d3.csv`, then uses D3’s `pie` layout and `arc` generator to create donut-like slices filled with each color’s hex value. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while the SVG is rendered declaratively inside a `<g>` transform. The visualization fills the screen, showing the full spectrum of CSS colors in a single circular layout.

Loading thumbnail…

Rendering Data with React

This example renders CSS color data as a full-screen stack of horizontal stripes, one per color, using React to map each row of the CSV to a styled div. The data is loaded asynchronously with D3’s `csv` function from a GitHub gist, and React’s `useState` and `useEffect` manage the loading state. The visualization shows a large, colorful gradient-like composition that fills the viewport, with each stripe’s background color set to the corresponding CSS color’s hex value.

Loading thumbnail…

Vega-Lite Stacked Bar Chart

This example visualizes the distribution of religious affiliations across countries using a stacked bar chart. Each bar represents a country, segmented by religion, with segment size encoding population. Built with the Vega-Lite API in conjunction with D3.js, the chart loads CSV data from a Gist derived from the UCI Auto MPG dataset, though the visualization itself uses religion-by-country data. The code configures axes, tooltips, and an SVG renderer, with Vega Tooltip handling interactive hover details.

Loading thumbnail…

Vega-Lite Bar Chart

This bar chart displays the population of various countries, sorted from largest to smallest for easy comparison. It is built using the Vega-Lite API, with the visualization specification defined declaratively in `viz.js` and rendered through the `vega` and `vega-lite` JavaScript libraries. The chart includes interactive tooltips provided by the `vega-tooltip` handler and is configured for full-window display, drawing data loaded from a CSV file using d3’s `csv` function, which fetches population data for 2015.

Loading thumbnail…

Vega-Lite Line/Area Chart

This example visualizes temperature data from the San Francisco week_temperature_sf CSV dataset using a Vega-Lite area chart. The chart plots temperature values over time, with a tooltip displaying the exact temperature for each data point. The visualization is built using the vega-lite-api library, which wraps Vega-Lite and Vega, and is configured with custom styling for axis labels and titles. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that fits the full browser window.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes automotive fuel efficiency and performance data from the UCI Auto MPG dataset, showing the relationship between miles per gallon and horsepower while encoding vehicle origin via color and weight via marker size. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification that is then rendered through Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously from a GitHub Gist using the `csv` function from d3.v5, while the Vega Tooltip handler provides interactive hover details displaying each car model's name. The chart auto-fits to the browser window dimensions.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the results of loading and parsing a CSV dataset containing CSS color names. It displays a summary message that reports the approximate data size in kilobytes, the number of rows, and the number of columns. The visualization uses the d3.csv function to fetch and parse the remote data, followed by d3.csvFormat to measure the formatted string length. The resulting statistics are rendered into an HTML <pre> element as plain text.

Loading thumbnail…

Smiley Face Part 1

A grid of 18 randomly generated smiley faces, each with unique eye positions, pupil offsets, mouth shapes, and RGB face colors, displays the compositional possibilities of a reusable React component. The code constructs each face using SVG primitives through React components like `BackgroundCircle`, `Eyes`, and `Mouth`, while `FaceContainer` handles the SVG coordinate translation. D3’s `arc` generates the mouth path, and `d3.range` produces the array that maps over to render each face instance.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple D3.js application that fetches a hardcoded list of cars and generates a text report of models priced under $2,000. It uses a Promise-based `getCars` function to simulate a delayed data load, then renders the filtered and formatted car details into an HTML `<pre>` element. The visualization highlights modular ES6 imports, including a local `formatCar` utility and a `generateReport` function that chains `filter` and `map` on the data.