James Malvern

@jdm79·23 public vizzes

Scatter plot with menus

This interactive scatter plot displays relationships between pairs of columns from the auto-mpg dataset. Users select which columns to plot on the x- and y-axes using dropdown menus built with d3.dispatch. When a new column is selected, the chart animates via d3.transition with a 1.5-second duration, moving points to their new positions. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with SVG circles rendered with a 6-pixel radius and axis labels that update dynamically.

Apr 12, 2021

Loading thumbnail…

Choropleth map with interactive filtering

This choropleth map displays countries colored by economic development category, with an interactive legend that filters the map when clicked. Hovering over a country reveals its name and category via a tooltip. The visualization uses d3.geoPath with a geoNaturalEarth1 projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for color mapping. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG with interactive updates triggered by legend clicks.

Mar 31, 2021

Loading thumbnail…

Choropleth map - Modular

A choropleth map colors world countries by income group, with a categorical color legend and zoom/pan support. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project TopoJSON world data from the world-atlas package, while `d3.scaleOrdinal` assigns spectral colors. Interactive hovering highlights country borders, and the legend is rendered as an SVG component.

Mar 31, 2021

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by income group using a spectral ordinal scale, with a hover effect that highlights individual country borders and a legend showing the color categories. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, while d3.zoom enables panning and interactive exploration. Color encoding and the legend are built with d3.scaleOrdinal and d3.schemeSpectral, with data loaded via d3.tsv and d3.json.

Mar 29, 2021

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

Mar 23, 2021

Loading thumbnail…

Node-link world countries tree viz

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each country name rendered as a text label. The layout uses a left-to-right node-link tree structure, where parent nodes represent geographic groupings and leaf nodes represent individual countries. The code uses d3-hierarchy's `tree` and `hierarchy` functions to compute the layout, `linkHorizontal` to draw curved edges, and SVG text elements with depth-scaled font sizes. Data comes from a JSON file containing nested world country groupings, and zooming is enabled via d3.zoom.

Mar 22, 2021

Loading thumbnail…

Blank canvas

A blank, interactive canvas fills the browser window, rendered as a single rounded rectangle spanning the full viewport. The example demonstrates a minimal setup for a D3.js visualization, using `d3.select` to target the SVG element and setting its dimensions based on the document body's client width and height. The code imports `select` and `arc` from D3 v5, though the latter is not used here. The SVG background is drawn via `.append('rect')`, with the page's fixed positioning and margin removal handled by the accompanying CSS file.

Mar 22, 2021

Loading thumbnail…

Cheap tricks for interaction

This example shows a world map using the Hufnagel projection, where hovering over a country highlights it in yellow and displays its name via an SVG `<title>` tooltip. The visualization uses `d3.geoPath` with `geoHufnagel`, `topojson.feature` to parse country boundaries, and `d3.zoom` for pan-and-zoom interaction. Country names come from a TSV file matched to TopoJSON IDs using a reduce function. Styling relies on CSS for hover effects and sphere fill.

Mar 19, 2021

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

Mar 17, 2021

Loading thumbnail…

Hover to Select - Bowl of Fruit

Eight apples and lemons rendered as colored circles in a black SVG bowl demonstrate direct manipulation through hover selection. D3 v5 code uses `scaleOrdinal`, `attr`, and `.on('mouseover')` to interactively highlight the hovered fruit with a white stroke. The `transition().duration()` method animates circular elements as fruit is eaten, added, or changed via timeouts. The example showcases state management through `setSelectedFruit` and data-driven rendering with local module imports.

Mar 15, 2021

Loading thumbnail…

Click to Select - Bowl of Fruit

Eight circles representing apples are rendered as a bowl of fruit on a black background. Clicking a fruit selects it, highlighting that item with a white stroke. The visualization animates changes to the fruit list, with fruits being removed and their types changing from apples to lemons over time. Built with D3 v5, the example uses the `select`, `range`, and `scaleOrdinal` APIs to manage SVG rendering, size and color scales, and transitions between states.

Mar 15, 2021

Loading thumbnail…

groups - transitions

The example demonstrates D3.js data joins with entering, updating, and exiting groups of fruit shapes, rendered as SVG circles and text labels. It animates state changes over time via `setTimeout`, including swapping fruit types and removing items from the array. The code uses `scaleOrdinal` for color and radius mappings, and merges enter and update selections with `selection.merge`. The fruit data is generated randomly and rendered inside a static brown bowl rectangle.

Mar 15, 2021

Loading thumbnail…

general update pattern - bowl of fruit with text

A bowl of fruit demonstrates the D3 general update pattern, showing five apples that become one lemon while circles and text labels update together in SVG. The code uses `select`, `range`, and `scaleOrdinal` from D3 v5 to map fruit types to colors and radii, with `fruitBowl` as a local ES6 module handling enter, update, and exit selections. The single lemon replaces an apple at index 2, and the visualization re-renders with layered transitions on both shapes and text.

Mar 15, 2021

Loading thumbnail…

area chart world population

This area chart displays world population trends from 1950 to 2015, with population in billions on the y-axis and time on the x-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `axisLeft`, and `axisBottom` to render the filled path and axes as SVG elements. Data comes from the UN World Population Prospects 2017 dataset, loaded via `d3.csv`. The chart includes gridlines, labeled axes, and a title, with a beige background and black filled area.

Mar 8, 2021

Loading thumbnail…

area chart

This area chart displays temperature variations in San Francisco over a two-day period, with time on the x-axis and temperature in Celsius on the y-axis. The filled area beneath the line highlights the daily temperature cycle, rising during the afternoon and falling at night. Built with D3.js v5, it uses `d3.area()` with a `curveBasis` option, `d3.scaleTime()`, and `d3.scaleLinear()` for axes. Data comes from a CSV file loaded via `d3.csv()`, and the visualization is rendered as an SVG with styled grid lines and axis labels.

Mar 8, 2021

Loading thumbnail…

line chart

This example shows daily minimum temperatures in Berlin for February, with orange and blue background areas highlighting warm and freezing periods around a marked freezing point. The line chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator to map date and temperature data from a CSV file. SVG circles mark each data point, while axes include tick grids and rotated labels, rendered with a beige background via D3 selections.

Mar 5, 2021

Loading thumbnail…

customising axes

This horizontal bar chart displays the 7-day incidence of COVID-19 per 100,000 population across German federal states as of March 2, 2021, with data from the Robert Koch Institute. The visualization highlights state rankings from Thuringia (125) down to Schleswig-Holstein (50). Using D3 v5 with SVG rendering, the code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom axis formatting applies `format('.3s')` to tick labels and removes domain lines, while `axisLeft` and `axisBottom` generate the axes.

Mar 5, 2021

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and model year for automobile data loaded from an external CSV file. The code uses D3 v5’s `csv` method to fetch the dataset, then applies `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes on an SVG renderer. Circular marks are appended via `selectAll` and `enter` to display each data point, with gridlines generated by tick sizes. A title and axis labels are added using SVG `text` elements.

Mar 5, 2021

Loading thumbnail…

Current incidence of laboratory-confirmed COVID-19 deaths per 100,000 population for each federal state in Germany, as electronically reported to the Robert Koch Institute (28/02/2021)

This horizontal bar chart visualizes the cumulative incidence of laboratory-confirmed COVID-19 deaths per 100,000 population across Germany’s 16 federal states, based on data reported to the Robert Koch Institute on 28 February 2021. State names appear on the y-axis and incidence values on the x-axis, with bars colored steel-blue. The chart is built using D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and the `axisLeft` and `axisBottom` functions to render axes, with data loaded from a CSV file.

Mar 1, 2021

Loading thumbnail…

making a bar chart

This bar chart displays the populations of eleven countries, sourced from Wikipedia data. The visualization uses D3 v5 to render SVG elements, with a linear scale for the population axis and a band scale for the categorical country axis. Rectangles are drawn for each data point, and the chart includes axis labels generated via `axisLeft` and `axisBottom`. The data is loaded from a CSV file using D3's `csv` function, which is then parsed and rendered dynamically.

Mar 1, 2021

Loading thumbnail…

d3-face

A smiling face rendered in SVG animates as its pupils shift to the right. Built with D3 v5, the example uses `d3.select` to append circles for the face, eyes, and pupils, while `d3.arc` generates the mouth path. A `transition().duration(2000)` moves each pupil over two seconds, demonstrating basic shape construction and animation within a static HTML page.

Feb 26, 2021

Loading thumbnail…

circles

This example displays a simple face constructed from basic SVG shapes: a pink circle for the head, white and blue circles for eyes, and a black rectangle for a mouth. The static composition is defined directly in the HTML, with D3 not actually utilized in the visible rendering. Instead, the illustration relies on plain SVG elements and CSS classes for styling. The code serves as a minimal demonstration of importing local stylesheets and setting up an SVG canvas within a VizHub project, showcasing the fundamental structure for a browser-based graphic.

Feb 24, 2021

Loading thumbnail…

Cars Report

This example demonstrates a text-based report derived from an in-memory array of car objects, showing filtered and formatted listings. The code parses JSON data from a local string, filters cars with a price under $4,000, and maps them to a readable line format. It uses the JavaScript `JSON.parse` method and DOM manipulation via `document.getElementById()` to update the page’s content. The report is displayed in a large, centered font using CSS, highlighting the data processing and rendering pipeline without external visualization libraries.

Feb 22, 2021