D

danrhymes

@danrhymes·37 public vizzes

Loading thumbnail…

Polished World Map

This example presents a stylized world map using the Natural Earth projection, rendered as an SVG. Countries are displayed as filled teal regions against a light gray sphere, with a subtle blue outline for shared borders and faint gray graticules for latitude and longitude lines. The visualization is built with React, using d3.geoNaturalEarth1 and d3.geoPath to project and draw the map, while the d3-geo module's feature and mesh functions process the World Atlas TopoJSON data to extract land polygons and interior boundaries.

Loading thumbnail…

GeoAlbers with Territories

This example displays US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include Alaska, Hawaii, and US territories. The map renders state outlines and interior borders as SVG paths, with land filled in teal and boundaries in a lighter contrasting stroke. The code loads US Atlas TopoJSON data and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. It builds the visualization with React components, `d3.geoPath` for projection and path generation, and `d3.geoGraticule` for the background graticules.

Loading thumbnail…

Points on a Map

A natural Earth projection world map displays cities with populations over 50,000 as semi-transparent teal dots, layered over light gray landmasses and graticules. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for the projection, while city coordinates are converted through the projection function to position SVG circles. City data originates from Simplemaps' World Cities Database, with country boundaries from the World Atlas TopoJSON, and the map includes subtle interior country borders for geographic context.

Loading thumbnail…

Multiple Views with Brushing

A world map displays migrant deaths and missing persons as scaled bubbles, with a time-series histogram below showing monthly totals. Brushing on the histogram is initiated via `brushX`, though only logging to the console. The visualization uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `histogram` with `timeMonths` thresholds for binning. Data comes from the Missing Migrants Project CSV, rendered with React and D3 v5 in SVG.

Loading thumbnail…

HIV/AIDS Choropleth Map

A choropleth map visualizes the share of the population aged 15–49 infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale. Each country is filled according to its prevalence value, with gray indicating missing data. The map uses the Natural Earth projection via `geoNaturalEarth1` and `geoPath`, with graticules and country interiors drawn as SVG paths. Data comes from the IHME HIV prevalence CSV, joined to country geometries via numeric codes from the ISO-3166 dataset, and rendered in React with D3 v5.

Loading thumbnail…

Hello D3

This example demonstrates the simplest possible D3 version 6 program, rendering the text “Hello D3 Version 6” in the center of an HTML page. The page uses a large 13em font size and relies on D3’s `select` function to target the empty `body` element and set its text content. The visualization imports `select` directly from the D3 library via ES modules in `index.js`, while `index.html` loads the D3 script from a CDN and runs the bundled JavaScript. It serves as a minimal starting point for learning D3’s core selection and DOM manipulation API.

Loading thumbnail…

RS Bowl of Fruit - General Update Pattern

Five circles representing apples appear and shrink to zero when removed, while one apple is replaced by a lemon mid-animation. This general update pattern uses D3 v5's data join with key functions to track objects by ID, merging enter and exit selections with `transition().duration()` to animate radius changes. The code defines ordinal scales for fruit color and size, with random IDs generated for each data point.

Loading thumbnail…

RS Color and Size Legends

This example shows two reusable legend components for mapping data values to visual encodings. A color legend displays four ordinal fruit categories using distinct fills from d3.scaleOrdinal, while a size legend uses d3.scaleSqrt to encode numeric values as scaled circle radii. Both legends are built with D3 v5 selection joins, rendering SVG circles and text labels via custom enter/merge/exit patterns. The SVG output includes tick groups with styled text and semi-transparent circle strokes.

Loading thumbnail…

RS Cheap Tricks for Interaction

This example displays an interactive world map with country labels derived from the Natural Earth dataset. D3 v5 and topojson render the geographic features as SVG paths using a natural Earth projection. Users can pan and zoom the map via `d3.zoom`, while hovering over any country highlights it in red through CSS. The map loads geographic data and ISO codes from a TopoJSON file and TSV, respectively.

Loading thumbnail…

RS Let's Make a Map with D3.js

This example displays a natural Earth projection of world countries as light green polygons with black outlines against a blue sphere, rendered as SVG paths. The visualization loads GeoJSON country boundaries from the world-atlas package, converts them using the topojson `feature` function, and projects them with `d3.geoNaturalEarth1` and `d3.geoPath`. The sphere background is drawn first, followed by the country paths, both styled via CSS classes.

Loading thumbnail…

RS Choropleth Map

This choropleth map colors world countries by economic category using a spectral ordinal color scale, with countries labeled on hover and a color legend rendered as circles. The visualization uses the `d3.geoNaturalEarth1` projection, `d3.geoPath` for drawing country boundaries, and `d3.scaleOrdinal` with `d3.schemeSpectral` for coloring. It loads world-atlas TopoJSON and TSV data, processes it with `feature` from topojson, and renders to SVG. The map supports pan and zoom via `d3.zoom`, and includes interactive hover highlighting.

Loading thumbnail…

Blank Canvas

This example renders a full-screen black canvas with a single rounded rectangle drawn across the entire viewport. The visualization uses D3.js to select the SVG element and dynamically set its width and height based on the browser window’s client dimensions. The rectangle is appended with a corner radius of 40 pixels, while CSS fixes the body and disables scrolling. The page relies on D3’s `select` and `attr` methods, producing a minimal, static composition that highlights empty space.

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark, inverted basemap serves as the backdrop for a firefly-style visualization of confirmed coronavirus case locations. Each location with at least one case is rendered as a glowing, semi-transparent circular sprite on an OpenLayers map, with size and intensity kept constant regardless of case count. The map is built with React and uses d3.csv to load Johns Hopkins COVID-19 time-series data, while custom canvas-generated sprites with radial gradients create the glow effect. OpenLayers layers and vector sources manage the points, with a Stamen toner-lite tile layer inverted via CSS for the dark aesthetic.

Loading thumbnail…

US State Map with Interaction

This example presents a choropleth-style map of US states with pan and zoom interaction. Built with D3 v5 and rendered as SVG, it uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to display state boundaries loaded from a TopoJSON file. State names and election data come from a CSV file, though only the names appear as tooltips via appended `title` elements. Hovering highlights a state in red, while the map supports interactive zooming through event-driven transforms.

Loading thumbnail…

US State Map

This example displays a static map of US states, with each state rendered as a gray path using an SVG. The code loads state boundary data from a TopoJSON file and converts it into GeoJSON features using the `feature` function from topojson. It then projects the geographic coordinates to screen space with the `geoAlbersUsa` projection and `geoPath` generator from D3, appending the resulting paths to the SVG. No additional data or interactivity is applied.

Loading thumbnail…

Smiley Face Part 4

This example draws a classic smiley face as an SVG graphic inside a React component. It uses D3's `arc` function to generate the mouth path, while the head and eyes are simple SVG `circle` elements. The code defines reusable components and applies a yellow fill with a black stroke, positioning all elements relative to the center of a 960×500 canvas. The face is rendered declaratively through React's `ReactDOM.render` method.

Loading thumbnail…

Smiley Face Part 1-3 HTML and React

This example shows a yellow smiley face drawn with SVG circles and an arc for the mouth, centered on a 960 by 500 canvas. Using React, the face’s features are positioned relative to the center via a transformed group, with eye offsets and radii defined as constants. The mouth shape is generated by D3’s `arc` function, specifying inner and outer radii along with start and end angles. The SVG elements are rendered declaratively through React’s JSX, with stroke width and fill styling applied directly to each circle.

Loading thumbnail…

Smiley Face Part 1-3 HTML and React

This example demonstrates a smiley face rendered as an SVG using React and D3. The face consists of a yellow circle with a black stroke, two eyes positioned symmetrically, and a mouth created with the D3 `arc` generator, which defines a partial donut shape using inner and outer radii and start and end angles. The React component computes layout values like center coordinates, eye offsets, and radii in JavaScript, and passes them as JSX attributes. The D3 `arc` helper generates the path data for the mouth, while React handles the declarative SVG structure.

Loading thumbnail…

Smiley Face Part 1

This example renders a classic smiley face using React and D3, drawing a yellow circle with black outline, two eyes, and an arc-shaped mouth on an SVG canvas. The face is centered using a translated group element, with fixed pixel offsets for the eyes and D3’s `arc()` generator defining the mouth’s inner and outer radii and angles. Hard-coded dimensions and stroke widths position every shape, demonstrating a static, declarative composition without data input. The code uses React’s JSX syntax and the `arc` API from D3 v5.

Loading thumbnail…

Let's Make a Map

A cheerful smiley face rendered in SVG uses D3 v5 to draw a yellow circle as the head, two smaller circles for eyes, and an arc path for the mouth. The code imports `select` and `arc` from D3, positions the elements relative to the SVG’s width and height, and applies transforms to center the group. Eye spacing and radius are defined as constants, while the mouth uses an arc generator with fixed inner and outer radii and angle ranges. The example demonstrates basic D3 shape generation and SVG manipulation with no external data source.

Loading thumbnail…

Let's Make a Face with D3.js

This example illustrates how to construct a cartoon face using basic D3.js shape primitives. It renders a yellow circular head with black stroke, two eyes, and a smiling mouth as a path generated by the `d3.arc()` generator. The code selects an SVG element and uses `d3.select` to append groups and circles, positioning them via `translate` transforms. The mouth arc uses fixed inner and outer radii with defined start and end angles, demonstrating a composable approach to SVG drawing with D3 v5.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the relationship between car weight and various selectable attributes, including horsepower, from the auto-mpg dataset. A dropdown menu, built using D3's select and append methods, lets users switch the x-axis column, triggering a re-render. The visualization uses D3's scaleLinear, axisBottom, axisLeft, and extent functions for scaling and axes, rendering circles as SVG elements within a chart that includes grid lines and labeled axes.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red circle represents a car, positioned according to its horsepower on the x-axis and weight on the y-axis, with axis labels and tick marks generated using d3-axis. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.extent to compute domains, while the SVG rendering includes custom axis labels and a title.

Loading thumbnail…

Scatter Plot with Menus

This example displays a scatter plot of automobile horsepower against weight, with each car represented as a semi-transparent red circle. The visualization includes labeled axes and a title, with the data sourced from a CSV file of car specifications. It uses D3 v5 to load and parse the data, create linear scales, and render SVG axes and circles. A dropdown menu, built with a reusable D3 function, offers options A, B, and C, though the menu currently does not alter the plot's behavior.

Loading thumbnail…

Blank Canvas

A full-window rounded rectangle rendered as a blank canvas, occupying the entire viewport with soft corners. The visualization uses D3 v5’s selection API to append a single SVG `rect` element, with dimensions bound to the browser’s client width and height via `document.body.clientWidth` and `clientHeight`. The `svg` is sized programmatically, and a CSS rule fixes the body to prevent scrolling, ensuring the rectangle remains the sole visual element. No data or interaction is present, highlighting the minimalist starting point of a blank SVG drawing surface.

Loading thumbnail…

Cars Scatter Plot

The visualization displays a scatter plot of vehicle weight against horsepower, with each circle representing a car model to reveal the relationship between these two attributes. Built with D3 v5, the chart uses `scaleLinear` for both axes and renders circles via SVG, with axes generated through `axisBottom` and `axisLeft`. Data is loaded from a remote CSV file of auto-mpg records, and the plot is styled with semi-transparent steelblue circles.

Loading thumbnail…

Scatter Plot

A scatter plot displays the ten most populous countries from 2018 United Nations estimates, with circular marks positioned by population on a linear x-axis and country categories on a point scale y-axis. The visualization uses d3.csv to load data, then d3.scaleLinear and d3.scalePoint for scaling, with d3.axisBottom and d3.axisLeft for labeled gridlines. Population figures are formatted using d3.format and rendered as a static SVG, with styling applied via CSS classes for ticks, axis labels, and the title.

Loading thumbnail…

Scatter Plot

A scatter plot displays the ten most populous countries from 2018 United Nations estimates, with circular marks positioned by population on a linear x-axis and country categories on a point scale y-axis. The visualization uses d3.csv to load data, then d3.scaleLinear and d3.scalePoint for scaling, with d3.axisBottom and d3.axisLeft for labeled gridlines. Population figures are formatted using d3.format and rendered as a static SVG, with styling applied via CSS classes for ticks, axis labels, and the title.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries in 2018, sourced from the United Nations World Population Prospects. Each circle represents a country, plotted along a linear population axis (formatted in billions) against a categorical country axis. The chart uses d3’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs to construct the SVG visualization. Circles are rendered with a fixed radius, and gridlines extend from the x-axis ticks.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with custom formatting via d3.format to abbreviate large numbers. Axis ticks are styled with d3.axisLeft and d3.axisBottom, while grid lines and axis labels are customized for clarity. The data is loaded from a CSV file using d3.csv and rendered as SVG rectangles.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to map country names to the y-axis via `scaleBand` and population values to the x-axis via `scaleLinear`, rendering the data as steel-blue SVG rectangles. Axes are added using `axisLeft` and `axisBottom`, with a maximum value computed by `max`. The data is loaded from a local CSV file, and population figures are converted from thousands to absolute numbers.

Loading thumbnail…

HTML Cars Report

This HTML Cars Report displays a dashboard of automobile data, presenting the information through an interactive web interface. The visualization uses JavaScript to populate the HTML structure, with styling managed through a separate CSS file. The page dynamically renders car-related metrics and statistics, drawing on data processed within the `index.js` script. The report leverages standard HTML DOM manipulation to update content within the main document body, presenting a clean, text-based summary of the automotive dataset. The interface relies on basic JavaScript functions and CSS formatting to organize and display the collected information.

Loading thumbnail…

Hello VizHub

This example showcases a full-screen, centered message reading “Hello VizHub!” in large Ubuntu type on a dark navy background. The visualization demonstrates a minimal D3.js v5 setup, using the `select` function to target a `div` by ID and set its text content. It imports a local ES6 module for the message and a Google Fonts stylesheet for typography, rendering the output entirely as styled HTML rather than drawing on a canvas or SVG.

Loading thumbnail…

Let's Make a Face with D3.js

This example illustrates how to construct a cartoon face using basic D3.js shape primitives. It renders a yellow circular head with black stroke, two eyes, and a smiling mouth as a path generated by the `d3.arc()` generator. The code selects an SVG element and uses `d3.select` to append groups and circles, positioning them via `translate` transforms. The mouth arc uses fixed inner and outer radii with defined start and end angles, demonstrating a composable approach to SVG drawing with D3 v5.

Loading thumbnail…

Making a Bar Chart

This example demonstrates the first step in building a bar chart: loading a CSV file with `d3.csv` and logging the parsed data to the console. The page displays a blank SVG canvas sized via attributes, while the imported `select` function targets the `svg` element. The `data.csv` file contains country population figures, and the code asynchronously fetches and parses this data, though no visual bars are rendered yet. The styling uses a dark blue background and Ubuntu font, highlighting the preparatory data-loading phase of the visualization.

Loading thumbnail…

Cars Report

This example demonstrates asynchronous JavaScript data processing by fetching car listings and displaying a formatted report of vehicles priced under $2,000. The page initially shows "Loading..." while the `getCars` function simulates a two-second delay using `Promise` and `setTimeout`. The `generateReport` module filters the hardcoded JSON data, maps each car through `formatCar` to produce strings like "2009 Ford F150: $1950", and joins them with newlines. The final output appears in the HTML `<pre>` element, styled at 3em font size. The code uses JavaScript objects, arrays, ES6 destructuring, and modular exports.

Loading thumbnail…

Cars Report

This example displays a single car make, "Honda," from a small dataset of five cars. The data is embedded as a JSON string in `cars.js` and parsed with `JSON.parse`. The visualization uses plain JavaScript to select the first car object and update the text content of a pre-formatted HTML element via `document.getElementById`. The page’s large text output is styled with inline CSS, with the bundle built by Rollup. The code demonstrates basic data access and DOM manipulation without additional charting libraries.