R

Roland

@VOICE-TONE·16 public vizzes

Loading thumbnail…

ingesting data with d3

This example demonstrates how to ingest a CSV file into a web page using D3 version 7, displaying demographic data as an HTML table. The code loads `data.csv` via `d3.csv` and maps each row into a structured object with renamed properties like `year`, `total`, and `hispanic`. Using D3’s data join, it programmatically builds a table with `<thead>` and `<tbody>` elements, populating cells with values for selected columns. The example uses `d3.select`, `append`, `selectAll`, and `.data` to render the tabulated data, with the imported module `index.js` importing from `d3`.

Loading thumbnail…

Vega-lite-api-part2

This visualization displays daily atmospheric conditions in Belgium for 2021, using a bar chart to show mean relative humidity per month, with color encoding by wind speed and bars stacked by wind speed category. A second scatter plot shows air temperature averages over time. The code uses Vega-Lite API with React, D3’s CSV loader, Vega tooltip, and custom config for styling.

Loading thumbnail…

Ingesting-Data

This example fetches a CSV of greenhouse gas emissions by life-cycle stage from a GitHub-hosted Our World in Data upload, then uses `d3.csvParse` to convert the raw text into a structured array. It displays a summary of the data—approximate file size in kilobytes, row count, and column count—in a pre-formatted message area. The code also demonstrates chaining `d3.select`, `append`, and `attr` calls to construct an SVG circle and group, though no data-driven geometry is rendered. The page uses React and ReactDOM loaded via UMD, but the visible output relies on plain DOM text updates.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a world map of migrant deaths with a monthly histogram, using fast brushing to filter the map by date range. The bubble map renders circles scaled by total dead and missing using a square-root scale, while the date histogram employs d3.brushX for selection. Built with React and d3.geoPath, it displays natural Earth land, graticules, and graticule interiors. Data comes from the Missing Migrants Global 2019 subset, sourced from Simplemaps and World Atlas TopoJSON.

Loading thumbnail…

Fork of Organization Graph Diagram

A network graph visualizes the connections between organizations funded by the Kenneth Rainin Foundation, with four main nodes branching into smaller child nodes and leaf circles. The diagram uses SVG circles and lines colored by cluster, with text labels for named organizations. Built with D3 v6, the visualization relies on `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute the layout. Users can drag nodes via d3.drag, which fixes their position and restarts the simulation.

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open-source repositories, with each layered area representing a contributor’s weekly commits over time. The layer order follows each contributor’s first commit, so reading from bottom to top reveals the chronological introduction of contributors. The graphic uses D3’s `stack` with `stackOffsetWiggle` and `stackOrderInsideOut`, applies smoothing via the `array-blur` library, and labels layers using `d3-area-label`. Data comes from a remote JSON file of all commits, rendered as SVG with a black backdrop to mask gridline artifacts.

Loading thumbnail…

Radial Stacked Bar Chart

This radial stacked bar chart visualizes personal electricity consumption across three accounts over a two-year period, with each ring segment representing a month's total kilowatt-hours stacked by bill year. A dropdown menu switches between accounts, and hover interactions reveal usage details. Built with D3 v7, the chart uses `scaleRadial`, `scaleBand`, and `arc` to generate the SVG wedges, while `d3.stack` structures the data and a reusable barChart component manages transitions. The underlying dataset comes from a CSV of electric utility bills, rendered in SVG with animated updates.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic data by country, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching regions while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering, and d3.zoom for panning. The legend employs scaleOrdinal with schemeSpectral colors, and onClick handlers toggle selection. Data comes from world-atlas TopoJSON and TSV files, processed via topojson.feature, with SVG output.

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3’s GitHub repositories over time. Each colored layer represents a repository, with its thickness indicating weekly commit counts after smoothing with `array-blur`. The code loads commit data, aggregates it by week, and uses D3’s `stack`, `stackOffsetWiggle`, and `stackOrderAppearance` to arrange layers, while `d3-area-label` places labels. The layer order reflects the historical introduction of each repository, revealing the shift from the monolithic `d3` repository to many packages after the 4.0 release.

Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph visualizes the popularity of eight baby names over time using a wide-format CSV dataset. Built with React and D3 v5, it employs `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut`, along with `d3.area` and `curveBasis` to create smooth, layered paths. Each name’s category is colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream dims other paths and displays the name in an SVG tooltip, with opacity and text managed through React `useState` hooks.

Loading thumbnail…

Vega-lite

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in a scatterplot. It uses the Vega-Lite API to declare point marks with multiple encodings—x maps to weight, y maps to horsepower, while color, size, and opacity encode additional quantitative fields. The code registers Vega-Lite with Vega and integrates React for rendering, loading data via `d3.csv` from an external auto-mpg dataset. Tooltips are enabled through the `vega-tooltip` Handler, and the chart auto-fits to the window dimensions.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle with engine horsepower on the y-axis and miles per gallon on the x-axis. Color encodes the country of origin, while circle size represents vehicle weight, and hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data asynchronously using d3.csv, and renders an interactive SVG chart that resizes to fit the viewport. The code also applies custom axis and label styling through a configuration object.

Loading thumbnail…

Loading Data in React with D3

This example demonstrates how to load and inspect a CSV dataset within a React application using D3. It fetches GHG emissions data from a GitHub gist and displays a summary of the file’s size, row count, and column count as a large text message. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, with `d3.csv` handling the file parsing. The rendered output updates from a loading state to the computed statistics once the data arrives, showcasing a simple integration of D3 with React’s component lifecycle.

Loading thumbnail…

Mouse Follower

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen. The circle’s position updates in real-time as the user moves the mouse, with its center coordinated to the cursor’s coordinates. The code uses React with the `useState` and `useCallback` hooks for state management, and renders the circle as an SVG element. The `onMouseMove` event handler captures the cursor position and updates the circle’s `cx` and `cy` attributes.

Loading thumbnail…

Fork of HTML Starter

This example displays a grid of yellow smiley faces, each with ears, eyes, and a mouth, rendered as SVG using React components. The face features are modularized into separate React components like `BackgroundCircle`, `Ears`, `Eyes`, and `Mouth`. The mouth is generated with the D3 `arc` API, while the positions and sizes of features vary with `Math.random()` and a scaling coefficient. The D3 `range` function creates an array of nine faces, each individually styled and positioned within the viewport.

Loading thumbnail…

Fork of Smiley Face Part I

This example displays a smiley face with a yellow circular head, black outlined eyes, and a partial mouth formed by an arc—referred to as “Part I” since it is only halfway to a complete smile. It uses React to render the SVG elements, with D3’s `arc` generator to create the mouth path. The code draws the face by positioning circles for the eyes and using the `arc` with specified inner and outer radii and start and end angles to shape the smile.