Skip to main content
Log in
R

Russell Watson

@mrwatson-de·37 public vizzes

Loading thumbnail…

Hello D3 Version 6

This example demonstrates the simplest possible D3 v6 setup: a single page that renders the text “Hello D3 Version 6!” in large, centered type. The code loads the full D3 v6 library from a CDN and uses the `select` import from D3 to target the empty `<body>` element. The rendering approach is entirely DOM-based—no data or scales are involved—and the example serves as a minimal starter template, with a separate bundled `index.js` file and an accompanying video walkthrough.

Aug 28, 2020
Loading thumbnail…

02•02•20•20 - CSS Animation for a very special - whirlygig - day

A whirlygig animation celebrates the palindrome date 02-02-2020, displaying the date as “02•02•20•20” in a neon-glowing LED digital font. The text is split into two arms that rotate, flip horizontally, and pulse in opacity using CSS `@keyframes` animations (`arm1`, `arm2`, `rotation`, `cycle`). The container itself spins via a separate `rotation` animation, while CSS `text-shadow` creates the neon effect. The page uses a modular file structure with separate CSS files for fonts, animations, and neon styling.

Mar 29, 2020
Loading thumbnail…

MrW's VizHub Experience 2020

A self-referential digital clock animates through the year 2020, using a blinking LED-style font to symbolize the passage of time in MrW's VizHub learning journey. The display shows the VizHub logo and a link to the author's site, rendered as static SVG elements. The clock's time updates via JavaScript within a React-based environment, with styling driven by CSS custom properties and a web font loaded from an external CDN.

Mar 10, 2020
Loading thumbnail…

ANY JSON tree (DRAFT) more data

This visualization displays a hierarchical tree representing a JSON response from a FileMaker Data API call, with nodes for objects, arrays, and leaf values. The D3.js v5 code builds the tree layout using `d3.tree()` and renders nodes as SVG text elements and links as horizontal paths. The data includes nested JSON strings within the records, creating deep hierarchies that expose overlapping text at level 4. The visualization uses a rainbow color scale for node values and supports zoom interaction, though the text-heavy rendering struggles with long data values.

Mar 9, 2020
Loading thumbnail…

ANY JSON tree (DRAFT)

This example presents a JSON document as an interactive, collapsible tree. The visualization displays the structure of any arbitrary JSON data, distinguishing between objects, arrays, and primitive values, and labeling each node with its key and type. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout and render SVG paths and text. A custom `hierarchify` function restructures the raw JSON input into the hierarchical format D3 expects, while a zoom interaction allows panning and scaling. Clicking a node toggles its children, enabling exploration of the data's nested structure.

Mar 7, 2020
Loading thumbnail…

A SMIL Satellite - version 0.1

A SMIL Satellite demonstrates SVG animation using SMIL's animateMotion and mpath elements, moving satellite circles along a defined path to simulate orbital motion. The scene includes a planet with gradient and filter effects, stars, and multiple satellites orbiting at different sizes, speeds, and rotations. The code uses d3.v5 and SVG rendering, referencing gradient definitions, filters for atmosphere and clouds, and motion paths—though SMIL animation may fail in this embedded context, working only when loading the SVG file directly in a browser. The example compares SMIL against JavaScript or CSS animation approaches.

Feb 29, 2020
Loading thumbnail…

A RegEx Logo

A rectangular logo built entirely from SVG primitives, layered to create a perspective effect of nested shapes. Four skewed rectangles in yellow, green, dark red, and blue form concentric trapezoids, with the white regular expression `/^$/\1` overlaid on the inner blue block. A skewed “RegEx” text label sits at the bottom. The design uses explicit `transform` attributes with `skewX` and `matrix` operations, rendered directly in inline SVG markup without any JavaScript libraries.

Feb 26, 2020
Loading thumbnail…

A RegEx Logo

A RegEx Logo presents a browser-rendered SVG graphic that spells out "RegEx" using skewed, nested rectangles to create a layered, perspective-like design. The visual centers on the text "/^$ g \1," a regular expression pattern, displayed within the nested shapes. Rendered via inline SVG markup, the graphic uses `<rect>` elements with `transform` attributes (including `skewX`) to build the structure, while `<text>` elements apply stroke and fill styling. The illustration directly encodes its subject matter through typography and geometry, making the regex concept visually literal without additional data or interaction.

Feb 25, 2020
Loading thumbnail…

MrW's D3 template

This template provides a minimal starting point for a D3.js visualization. It displays a centered box with placeholder text on a light gray canvas. The code imports a rainbow sequential color scale from the D3 library and defines a small static dataset of text-value pairs. The project uses D3 v5 and JavaScript modules to organize color and data definitions, but no actual visualization or chart is currently rendered.

Feb 20, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal interactive JavaScript console that evaluates regular expression strings and displays the results. The code uses `document.write`, `eval`, and DOM manipulation via `getElementById` and `createTextNode` to render output lines. It also includes regex escaping logic from the JavaScript standard library, applied to test pattern replacement. The HTML layer uses basic CSS selectors for striped background rows.

Feb 19, 2020
Loading thumbnail…

React First Steps (Date animation?)

This example demonstrates a live-updating digital clock built with React. It displays the current date and time in three formats: a full string, a localized time, and an ISO date with hyphens replaced by bullet characters. The clock updates every second using `setInterval` in the component lifecycle methods. The code uses React state and lifecycle methods like `componentDidMount` and `componentWillUnmount`, along with `setState` to trigger re-renders.

Feb 18, 2020
Loading thumbnail…

Smiley Face (Part 4) - Assignment -> React Components

This example shows a yellow smiley face rendered as an SVG using React components, with each facial feature—background circle, eyes, mouth, and teeth—defined as reusable functional components. The mouth is drawn with a D3 arc generator configured with custom inner and outer radii, angles, corner radius, and padding. D3 v5 and React 16.7 are loaded via CDN, and ReactDOM renders the composed `<App />` component into a root div. The face includes two dark pupils, a red outlined mouth, and four white rectangular teeth positioned at varying offsets.

Feb 17, 2020
Loading thumbnail…

My first working animation

Words fall like rain across an SVG canvas, each word shrinking from oversized, transparent text into its final position with rainbow colors. Words are randomly selected from a repeated dataset and appended every 100 milliseconds for 20 seconds. The animation uses D3 v5's `selectAll`, `data`, `enter`, `transition`, and `duration` methods, with `scaleSequential` and `interpolateRainbow` for coloring. A custom `playAnimation` function drives `setInterval` and `setTimeout`.

Feb 13, 2020
Loading thumbnail…

MrW's VizHub Experience 2020 (BACKUP)

This backup page displays a stylized digital clock for 2020, using a glowing “LED Digital 7” font and a minimal layout. The text (the year “2020”) and a VizHub logo are centered on screen, with CSS flexbox handling alignment. The page loads the font via an `@import` URL, and uses inline SVG for the logo. The HTML and CSS files provide the structure and styling, while no external JavaScript is used for interactions or animation.

Feb 7, 2020
Loading thumbnail…

02•02•20•20 - CSS Animation for a very special day

A palindrome date is displayed as a glowing digital clock using the LED Digital 7 web font, with the text “02•02•20•20” styled with layered CSS text-shadow effects in pink and blue. The entire container element rotates continuously through a 360-degree spin via CSS `@keyframes` animation, creating a looping motion effect over ten seconds. The page uses HTML and modular CSS files for layout, font import, neon styling, and animation, all controlled without JavaScript. The design centers the date on a dark background, emphasizing the typographic and animated presentation.

Feb 6, 2020
Loading thumbnail…

Embedded Observablehq Stars

An interactive globe displays stars and constellations, rendered as a three-dimensional sphere overlaid with a star map and constellation lines. The visualization embeds an ObservableHQ notebook within a VizHub page, loading the runtime and module through the Observable runtime API and the `Inspector` class. Dragging rotates the globe using versor dragging, a technique that keeps the dragged point under the cursor. The underlying data and rendering rely on Observable's standard libraries, though specific d3 or Three.js calls are not directly visible in the provided code.

Feb 6, 2020
Loading thumbnail…

Gaussian Primes - MrWatson after Jason Davies

This visualization plots Gaussian primes as filled squares on the complex plane, with the pattern emerging across a grid of integers. It uses d3.v5 to render the SVG elements, with a custom `isGaussianPrime` function that checks the criteria for primes on the axes and in the interior. The code generates points by iterating over a symmetric range and applies a static rendering, with a circular clipping mask defining the visible area. The implementation follows Jason Davies’ original approach, though the developer notes that a cached prime-checking function underperforms the simpler dynamic version.

Feb 6, 2020
Loading thumbnail…

My second animation

Words fly in from the center, enlarge, then snap into a grid ordered by their size while transitioning colors across a rainbow scale. The animation repeatedly adds random words from a duplicated dataset and occasionally removes one, demonstrating D3's `.enter()` and `.transition()` chaining with SVG `text` elements. The `refresh` function handles the branching method calls needed because transitions do not return the original selection, using the Cairo-inspired word cloud layout with columns and row offsets.

Feb 6, 2020
Loading thumbnail…

A D3 word cloud (FAIL#1)

This example shows a word cloud built with the d3-cloud layout, displaying repeated JavaScript-related terms scaled by their `size` values. The code was originally written for D3 v3, but the page loads D3 v3.5 despite the README noting the intended use of v5, resulting in a broken implementation. The layout assigns random 0 or 90 degree rotations, uses the Impact font, and draws the words as SVG `<text>` elements with color fills from `d3.scale.category20()`. The final viewBox calculation attempts to trim whitespace but never executes due to the version mismatch.

Feb 5, 2020
Loading thumbnail…

A D3 word cloud (FAIL#2)

This example attempts to render a colored word cloud from a dataset of programming-language names duplicated three times. The visualization uses SVG text elements positioned by the d3-cloud layout, which is imported from the non-standard d3.layout.cloud module. The code employs d3.scaleSequential with interpolateRainbow to assign colors, but fails because d3-cloud is built for D3 v3 and does not export a `cloud` function compatible with D3 v5, throwing a TypeError before any layout is drawn.

Feb 5, 2020
Loading thumbnail…

MrW's VizHub Docu

This example documents the keyboard shortcuts available in the VizHub editor, presenting a table that maps Windows and Mac key combinations to CodeMirror and VIM commands. It also includes a separate HTML page that simply displays the title “MrW’s Vizhub Docu” and the word “README” with static CSS styling. The project uses no external libraries, relying on plain HTML, CSS, and Markdown formatting in the README file to convey the information.

Feb 5, 2020
Loading thumbnail…

CSS Neon Gallery (inc. first attempt MrW Logo)

This gallery displays a series of neon-style text effects, rendered using custom CSS `text-shadow` properties on a dark background. The presentation includes a set of greetings, demonstrating varied color and glow treatments. The fourth plaque is a stylized logo, constructed from three text characters, each individually styled with CSS transforms and colored shadows. The layout is built with a custom HTML `<neon>` tag and a CSS container that uses flexbox to center the content. The styling is defined in a separate stylesheet, `neon.css`, and the structure in `index.html`.

Feb 3, 2020
Loading thumbnail…

CSS Neon Text with Google Font

A neon sign effect renders the text "Hello HTML" in large, glowing letters using CSS text shadows and the Google Font "Bungee Inline." The page sets a dark background and applies layered text-shadow values to create a multi-colored glow, with pink and blue hues. The example demonstrates styling text purely through CSS properties, including font-family, letter-spacing, and text-shadow, without any JavaScript. It loads the font via the Google Fonts API and uses inline CSS in a single HTML file.

Feb 2, 2020
Loading thumbnail…

CSS-Animation Sunrise Hello HTML

A single HTML page uses CSS animations to depict a sunrise over the sea, with the text "Hello" and "HTML" scaling and rising as the background shifts from dark navy to sky blue and the text color changes from red to yellow. The example relies entirely on standard HTML and CSS, including the `@keyframes` rule and the `animation-name` and `animation-duration` properties applied to the `body` and `message` elements. No JavaScript libraries or data sources are involved; it is a self-contained demonstration of pure CSS-based visual effects.

Feb 2, 2020
Loading thumbnail…

CSS Animation of Hello HTML

This example showcases a minimal HTML page where the text “Hello HTML” slides down from the top of the viewport using a CSS animation. The page defines a `@keyframes` rule named `slidein`, which animates the body’s `margin-top` from 100% to 0% over three seconds. The animation is applied directly to the body element via the `animation-name` and `animation-duration` properties. This demonstrates a purely CSS-driven approach without JavaScript or external libraries, relying solely on the browser’s native animation engine.

Feb 2, 2020
Loading thumbnail…

Bowl of Fruit - Animated Transitions

A row of apples animates through a fruit bowl, shrinking and disappearing when eaten, and one apple morphs into a lemon. The example uses SVG circles and d3 transitions to smoothly update position, radius, and color. It demonstrates data joins with `selection.data`, `enter`, `merge`, and `exit`, applying a one-second transition to each state change. The fruit data is generated randomly with `Math.random` for stable ids.

Feb 1, 2020
Loading thumbnail…

Embedded Observablehq 'Animated' Cell

This example embeds a single Observable notebook cell that displays a live numeric value: the number of seconds since the page loaded, updated continuously in real time. The visualization is rendered inside a plain HTML page by importing the Observable Runtime from a CDN and loading the notebook definition from Observable’s API. The code uses `Runtime`, `Inspector.into`, and the notebook’s exported `secondsSinceLoadingThisPage` variable to drive the display, with no additional charting library involved.

Jan 30, 2020
Loading thumbnail…

Embedded Observablehq Minimal Cell

This example demonstrates embedding a single Observable notebook cell into a standalone HTML page. It loads a specific value named "calc" from an Observable notebook using the Observable Runtime API and renders it into a designated container via `Inspector.into`. The page retrieves the notebook definition from the Observable API URL, while the runtime is imported from the jsDelivr CDN. This approach minimizes the embedded footprint to roughly five kilobytes, compared to the full notebook’s larger size, showcasing a lightweight integration method.

Jan 30, 2020
Loading thumbnail…

Vishub empty page

This example demonstrates the minimal file footprint required to create a page on VizHub, consisting of an empty `index.html` and a short `README.md`. It shows that a blank VizHub page with no files or editors open uses roughly 30 KB of page weight, while adding a minimal HTML document and a text file increases this by only about 2 KB. The page contains no JavaScript, CSS, or external libraries, relying solely on static HTML content to illustrate the platform's overhead. The rendering approach is intentionally bare, with no data sources or visualizations involved.

Jan 30, 2020
Loading thumbnail…

Face part IV, React components

A React-based face built from SVG components renders a yellow circular head with a gradient fill and drop shadow. The code defines reusable components like `BackgroundCircle`, `Eye`, and `Mouth`, which is generated using the `d3.arc()` API to create an arc path for the smile. Red and yellow gradient definitiions create the face’s coloring, while `feDropShadow` filters add depth. Each eye includes a pupil positioned via `cx` and `cy` attributes, and the layout uses fixed coordinates in a 960×500 viewport. ReactDOM mounts the `App` component into the root element.

Jan 27, 2020
Loading thumbnail…

Let's Make a Face Part I (.V)

A smiling face built from SVG primitives is drawn with yellow head, hat, eyes, nose, and mouth. The React components (`Hat`, `Eye`, `Eyes`, `Nose`, `Mouth`) construct the scene, while D3's `arc` API generates the mouth path. The viewport is fixed at 600×480, and the SVG uses a 960×500 canvas with a translated group. Custom CSS classes style each facial feature, and the code imports `arc` from `d3` and uses ReactDOM to render the app.

Jan 26, 2020
Loading thumbnail…

Let's Make a Face Part I (.V)

This visualization rebuilds a classic smiley face using React and D3, drawing each facial feature as a separate component. The code constructs a yellow SVG face with green eyes, a red nose, and an arc-based mouth, while a transform rotates a hat into position. React components define the hat, eyes, and nose, using D3’s `arc` function to generate the mouth path, and the app renders everything into a root div via `ReactDom.render`.

Jan 24, 2020
Loading thumbnail…

Hello HTML5

This example demonstrates the fundamentals of HTML5, CSS, and external content embedding within a single web page. It prominently features the HTML5 logo as an external SVG image and showcases the ability to embed live Observable notebooks via the Observable Runtime API. The page explores link styling and behavior, using CSS selectors to add visual indicators for external links and different `target` attributes, such as opening in new tabs or parent frames. Styling rules define fonts, colors, and link states, while the embedded Observable notebook renders a graphic through the runtime’s `Inspector` module.

Jan 23, 2020
Loading thumbnail…

Locations of Datavis 2020 Students By Date (Forked=React without zoom-interaction)

This visualization displays the geographic distribution of Datavis 2020 students, color-coded by the date they joined the course. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` to render country borders, graticules, and a sphere backdrop. Student locations appear as circles, with a sequential Viridis color scale mapping joining dates. The legend, built with custom React components, shows the date range. Data comes from manually geocoded student introductions in Slack.

Jan 9, 2020
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length and sepal width, with points colored by species. The interactive color legend uses React state to track a hovered species, which fades all non-matching marks via `opacity` and re-renders the filtered subset. Built with React, D3 v5 scales (`scaleLinear`, `scaleOrdinal`), and SVG circles, it updates through `MouseEnter` and `MouseOut` events on legend items.

Jan 6, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive legend that filters the map when a color swatch is clicked. Hovering over a country reveals its name and value. The map renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, while the legend is built from `scaleOrdinal` and `schemeSpectral`. Clicking a legend item sets a `selectedColorValue`, which adjusts country opacity and highlights matching regions, and also dims the sphere and non-matching legend entries. Country data comes from the world-atlas TopoJSON and TSV files.

Jan 6, 2020
Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and population values formatted in billions along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted to the ten largest populations. Native SVG `<title>` elements provide hover tooltips with formatted population values.

Jan 3, 2020