Skip to main content
Log in
D

David Allyn

@DavidAllyn68·19 public vizzes

Loading thumbnail…

Dave's HTML Starter

This example shows a single HTML page that renders the text “Hello HTML!” centered on a white background. It demonstrates the separation of structure, style, and behavior by using an inline `<style>` block for CSS and a `<body>` element for content. The page relies purely on native HTML elements and CSS properties, including `font-size` and `text-align`, without any JavaScript or external libraries. It serves as a minimal starting point for building more complex visualizations.

Dec 24, 2022
Loading thumbnail…

Cities on a Globe

This example presents an interactive orthographic globe that plots circles for cities with populations over 100,000, with circle size proportional to population. Users can pan and zoom the globe by dragging or using the scroll wheel, which triggers dynamic re-rendering of city markers. The visualization uses D3 v4 with d3.geoOrthographic projection, d3.geoPath, d3.drag, and d3.zoom, along with TopoJSON world-atlas data for country boundaries. City data originates from a preprocessed Geonames dataset, and the code displays tooltips via d3-tip on hover.

Dec 20, 2022
Loading thumbnail…

Fork of D3 Starter

This example shows a WebGL globe displaying airport data, with points colored by altitude and filterable by country, latitude, longitude, and altitude range. The globe is built using Three.js and the datGlobe library, which loads a world texture and renders an interactive sphere with an atmospheric glow effect. The code uses D3 v7 for data scaling with `d3.scaleLinear`, and airport data is processed from arrays containing latitude, longitude, and altitude values. The visualization supports filtering through country selection and range sliders, with points added via `globe.addData` and rendered as colored three-dimensional points on the rotating globe.

Dec 5, 2022
Loading thumbnail…

Idea for Alumni Association always live

This interactive visualization displays global nuclear explosion locations as points on a rotating globe, projected with a Mercator projection. The map uses `geoNaturalEarth1` or `geoMercator` projections via `geoPath` and `geoGraticule` to render landmasses, interiors, and graticule lines. Nuclear data points, sourced from a CSV, appear as circles with tooltips showing coordinates and names. Built with React and d3.v3, the visualization supports seamless transitions between different global projections, allowing users to explore the data across various map styles.

Dec 5, 2022
Loading thumbnail…

Fork of Fork of Donut Chart

This donut chart visualizes the hierarchical structure of the flare dataset, with each ring segment representing a category and its subcategories. The visualization uses a sunburst layout where the inner circle shows the root, and each subsequent ring displays deeper levels of the hierarchy. The code employs D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` functions to compute and render the radial layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive tooltips appear on hover, displaying the full path and value of each segment. The visualization is rendered as SVG with a fixed 932x932 viewBox, and labels rotate to remain readable around the circle.

Dec 3, 2022
Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over time as a smooth line chart, with a time-based x-axis and linear temperature y-axis. The chart uses React components with D3 v5 scales and the `line` and `curveNatural` generators to draw the curved path, while helper components render axes with tick marks and labels. The data originates from the Data Canvas Sense Your City Dataset, though the active dataset loads world country topologies via `d3.json` and `topojson.feature`, making the chart behavior partly exploratory. The SVG rendering includes styled axis lines, text, and a stroke-only path without visible data points.

May 31, 2022
Loading thumbnail…

Fork of Polished World Map

This fork of a polished world map displays country boundaries and landmasses using a Natural Earth projection, with graticules and interior borders rendered as SVG paths. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw geographic features, while React manages the component structure. Data is loaded from World Atlas TopoJSON via d3.json and converted with topojson’s feature and mesh functions. A muted teal color scheme and clean styling give the map a refined, modern appearance.

May 31, 2022
Loading thumbnail…

Education Industry Sankey

This example shows how individuals move between education fields and industry sectors, with each node representing a discipline or industry and the thickness of the curved links indicating the number of people transitioning. Built with React and D3.js, the visualization uses a custom Sankey layout algorithm that computes node positions and link paths, rendering the result as SVG. The data is loaded from a JSON file containing the link values between the various categories.

May 20, 2022
Loading thumbnail…

Loading Data In React & D3

This example demonstrates a minimal React and D3 integration for loading and summarizing a CSV dataset. It fetches a CSS color list from a GitHub gist using D3's `csv` utility, stores the result in React state via `useState`, and displays a message with row count, column count, and data size. The code shows how React’s `useEffect` triggers a one-time asynchronous data load, with a “Loading Data…” fallback until the request completes, then formats the summary using `d3.csvFormat`.

Jan 5, 2022
Loading thumbnail…

Parsing Data With D3

This example demonstrates how D3’s `d3.csv` method asynchronously fetches and parses a CSV file from a GitHub Gist, then uses `d3.csvFormat` to convert the parsed data back into text. The page displays a large summary in a `<pre>` element showing the total row count, column count, and approximate data size in kilobytes. The code also includes commented-out manual `fetch` and `d3.csvParse` alternatives, highlighting D3’s built-in parsing pipeline in a minimal HTML document.

Dec 2, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates fetching a remote CSV file using JavaScript’s `fetch` API within an `async`/`await` pattern. It loads the  CSS color data from a GitHub Gist, parses the response as plain text, and logs the raw CSV content to the browser console. The page itself displays a large styled message, while the actual data processing occurs invisibly in the background. The code uses no external libraries, relying on native `fetchText` and `response.text()` to handle the asynchronous request.

Dec 2, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse as it moves across an SVG canvas, using React's `useState` and `useCallback` to track the pointer's `clientX` and `clientY` coordinates. The example renders a single black-stroked circle via ReactDOM into an HTML page with CSS resets, demonstrating a minimal interactive visualization with no external data source.

Nov 24, 2021
Loading thumbnail…

CSS Colors from Mozilla

This example shows a simple React app that renders two text elements: a large "Hello React!" message and a smaller "...with CSS" line in rebeccapurple, based on the CSS Colors from Mozilla documentation. The main component uses JSX within a `<g>` element, though the code does not employ SVG-specific behavior. Styling is handled entirely through an external stylesheet (`index.css`), which sets font sizes and text alignment, while the React DOM library mounts the component to the `#root` div. The page loads React and ReactDOM from a CDN, and the bundled script runs client-side.

Nov 23, 2021
Loading thumbnail…

Smiley Face Part 4

The visualization renders a grid of eighteen procedurally generated smiley faces, each composed of SVG circles and an arc-based mouth. Built with React and D3 v7, the code imports the `arc` API from D3 to construct the mouth path, while `range` generates the array of faces. Each face randomizes its eye radius, eye offset, and mouth dimensions, producing varied expressions. The `Face` component composes smaller reusable components—`BackgroundCircle`, `Eyes`, and `Mouth`—within an SVG container, demonstrating modular React component design.

Nov 8, 2021
Loading thumbnail…

Fork of Smiley Face Part 3

A yellow circle with two smaller eye circles and a thick black arc mouth forms a smiley face, rendered as SVG in a React component. The code uses D3's `arc()` generator to create the mouth path, with fixed radius and angle values, while the body and eyes are simple SVG circles. The visualization is centered via a translation transform, and React renders the SVG elements directly. Data is hardcoded in the component, showing a static, programmatic construction of a face.

Nov 8, 2021
Loading thumbnail…

Smiley Face Part 2

This example shows the first step in constructing a smiley face, rendering a yellow circle as the head and two black-outlined circles as eyes. The face is drawn as an SVG using React elements, with positions and dimensions calculated from constants for the canvas width and height. The code uses ReactDOM to mount the component into the DOM, with the SVG output generated directly in JSX. The styling resets the page margin and hides overflow, focusing the view on the centered graphic.

Nov 8, 2021
Loading thumbnail…

Smiley Face Part 1

This example shows a yellow circle with a black outline serving as a face, alongside two smaller black-outlined circles as eyes, all rendered on a fixed 960 by 500 SVG canvas. The page uses plain HTML and CSS to set up the layout, while React 16.7.0 is loaded via a CDN script tag, though no React components are actually instantiated. Instead, the visualization relies entirely on static SVG elements (circle tags) with hardcoded coordinates and styling to create the partial smiley face.

Nov 2, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data. React renders the SVG visualization, while D3 v5's `scaleBand` and `scaleLinear` position the rectangles and axes. The code uses `csv` to load the dataset, `format` for tick labels, and includes hover tooltips via SVG `<title>` elements. The Poppins font and custom axis styling give the chart its distinctive clean, modern appearance.

Nov 1, 2021
Loading thumbnail…

D3 Hello World

This example displays a simple bar chart of mission counts for four Kerbal characters, with each bar labeled by name and mission total. It uses D3 version 6’s `d3.create` to generate an SVG, then binds the static dataset via `selectAll(...).data(...).join("rect")` for the bars and a similar pattern for text labels. The chart’s width scales directly with the `missions` value, and styling is handled through the included `index.css`. The code demonstrates a minimal, introductory workflow for creating SVG-based visualizations with D3’s data join.

Jan 29, 2021