Skip to main content
Log in
R

RobinL

@RobinL·49 public vizzes

Loading thumbnail…

Phaser Form Interaction

This Phaser Form Interaction example demonstrates how an HTML form can update game properties without conflict from Phaser’s keyboard controls. The key mechanism is toggling Phaser’s `input.keyboard.enabled` and `globalCapture` state based on form focus, ensuring typing and arrow-key navigation work correctly. Upon submit, a listener calls public scene methods like `setGameSpeed` and `setPlayerName`, then blurs the input to return control to the game. The code uses `focusin`/`focusout` event delegation and a submit listener on the `<form>` element.

Mar 30, 2025
Loading thumbnail…

test_charts

The example shows how Splink deduplicates a dataset of roughly 50,000 historical persons scraped from Wikidata, with deliberate errors introduced. It uses Altair to render interactive distribution charts of column-value frequency, including percentile rankings and token counts for fields like first_name. The visualization is generated from pandas DataFrames via the DuckDBLinker’s profiling output, with Vega-Lite JSON specifications embedded in a Jupyter notebook.

Jun 24, 2023
Loading thumbnail…

Gist cf029c23fefdf183ae507ea5205298dc

This example demonstrates how to query the UK Office for National Statistics (ONS) beta API to retrieve filtered mid-year population estimates. The Python script constructs a JSON request specifying dimensions like age (0-89), sex, and time (2015-2017), then submits it via `requests.post` to the `/v1/filters` endpoint. The process illustrates that omitting a required `geography` dimension causes the request to fail, while including it allows the script to poll the returned `filter_output` link and obtain a CSV download URL. The code uses `requests`, `json`, and `pandas` to manage the API interaction and data retrieval.

Feb 10, 2019
Loading thumbnail…

Filter api example

This example demonstrates the process of requesting a filtered dataset from the UK Office for National Statistics (ONS) API and asynchronously retrieving the resulting CSV file. It uses Python with the `requests` library to POST a JSON payload specifying a dataset edition and a geography dimension filter, then polls the returned `filter_output` link until the data is ready. The code parses the JSON response with `json.loads` and reads the CSV into a pandas DataFrame using `pd.read_csv`, highlighting an API workflow for on-demand data extraction.

Feb 9, 2019
Loading thumbnail…

Gist 461dfc0f189375715d0078042c08fdaa

This example displays the Democratic Republic of the Congo using a Mercator projection. The map’s border is outlined with a dark blue stroke and a semi-transparent fill, scaled to 1000 and centered on longitude 17 and latitude -3. The visualization loads GeoJSON feature data from a GitHub Gist and renders it as a single shape mark. It uses Vega’s `geoshape` transform with a named `mercator` projection, and the map’s translation is tied to width and height signals.

Jul 14, 2018
Loading thumbnail…

DAG dynamically generating tasks

This example shows an Airflow DAG that dynamically generates a variable number of tasks at runtime, using a `random.choice` call to select between one and six `BashOperator` tasks. The DAG links a starting `print_date_1` task to each generated task, and each generated task to a shared `final` task. The code constructs these dependencies with the `>>` and `<<` operators, while the Airflow `BashOperator` and `DAG` classes manage task execution. The visualisation displays the dynamically created task graph, highlighting how Airflow's scheduler can struggle when task topology changes mid-run.

Jul 14, 2018
Loading thumbnail…

Gist e13df2ee55aa6c1117d5d6b6371e9b69

This example uses Yahoo Finance’s quote API to visualize live foreign-exchange data for the GBP/USD pair through D3.js. The JSON response is processed to display key metrics such as the current price, day’s high and low, and 52-week range, using D3’s scales and SVG paths to render a candlestick-style chart. Only the most recent quote is shown, with no time-series animation or historical data. The rendering logic draws on D3’s `forceSimulation` for layout and `geoPath` for styling, though the visual itself is a simple static chart of the currency pair’s market range.

Mar 15, 2018
Loading thumbnail…

testschema

This example visualizes the structure of a JSON Schema for a data catalogue, showing how metadata fields like table name, description, columns, and data format connect. The visualization is generated from a `testschema.json` file, which defines the schema’s properties and their types. It renders the schema’s hierarchy and relationships, using the JSON structure to map out the nested objects and enumerations. The code leverages standard JavaScript libraries to parse and display the schema, making the metadata’s organization immediately apparent through a graphical layout.

Feb 24, 2018
Loading thumbnail…

Add a primary key to a sqlite table

This example demonstrates a SQLite migration technique that adds a primary key to an existing table without losing its data. The code defines three functions: `get_create_table_string` retrieves the original `CREATE TABLE` statement from the `sqlite_master` system table, `add_pk_to_create_table_string` uses the `re` module’s `re.sub` to insert the `PRIMARY KEY` constraint into that string for a specified column, and `add_pk_to_sqlite_table` orchestrates the migration. It executes an SQL `BEGIN TRANSACTION` block that renames the original table, creates a new table using the modified schema, copies rows via `INSERT INTO ... SELECT *`, and drops the old table. The example uses Python’s `sqlite3` connection API and `executescript` to run the multi-statement transaction.

Nov 17, 2017
Loading thumbnail…

sankey experiment 2

A small Sankey diagram maps flows from three sources to two servers to two analysts. The code defines a fixed set of nodes and links with equal values, then uses the `d3.sankey` module to compute node positions and link paths. It renders the network as an SVG with black nodes and semi-transparent links, and labels each node with its name. The example demonstrates a custom horizontal link function applied via `d3.linkHorizontal`.

Sep 15, 2017
Loading thumbnail…

sankey experiment 1

This example shows a static sankey diagram with three sources flowing into two servers and then to two analysts. Each link has an equal value of ten, and the diagram uses a simple, uncolored visual style with black strokes and opacity. The code builds the visualization using the `d3.sankey` extension, defining nodes and links as data, and renders it as an SVG. It manually sets the node width and padding, and uses a custom color function for node fills, though colors are not defined in the visible snippet.

Sep 15, 2017
Loading thumbnail…

Gist 121968fa62b818079652160c129eaf3a

This example demonstrates how the R package `packrat` uses a global cache to speed up project initialization by symlinking installed packages instead of re-installing them. It shows the `packrat::init()` and `packrat::restore()` workflows, where previously cached packages are linked from a shared directory (`/home/willbowditch/R/packratcache`) into the project’s `packrat/lib` folder, as seen in the terminal output. The code also configures caching via `packrat::set_opts(use.cache=TRUE)` and reveals that direct `install.packages()` calls bypass the cache, overwriting symlinks. The visualization is a text-based log of file system operations, R commands, and package installation results, illustrating the cache’s behavior with concrete path and symlink details.

Jun 16, 2017
Loading thumbnail…

Contour experiment

A grid of five-by-five values is rendered as a colored contour plot, with sparse peaks at the corners and center producing concentric bands. The example uses `d3.contours` from the d3-contour module to compute iso-lines from the array, with thresholds set from 0 to 1 in increments of 0.1. Each resulting path is drawn as an SVG element via `d3.geoPath` and `d3.geoIdentity`, scaled by 100, and filled with a linear scale interpolating the YlGnBu color scheme from d3-scale-chromatic.

Apr 8, 2017
Loading thumbnail…

Contour experiment

This contour plot visualizes a 5×5 grid of values containing 1s at the corners and center, rendered as smooth isolines. The d3-contour library computes contours at thresholds from 0 to 1 in 0.1 increments, with d3.scaleLinear mapping threshold values to the YlGnBu color interpolator. The SVG paths are drawn using d3.geoPath with a geoIdentity projection scaled by 100, and each contour is filled according to its corresponding value. The sparse data creates a symmetric pattern of concentric, color-graded polygons.

Apr 8, 2017
Loading thumbnail…

Finding adjacent voronoi cells

This interactive visualization shows 30 randomly placed sites and their corresponding Voronoi cells. Moving the mouse repositions the first site, and the diagram updates to highlight all cells adjacent to it in pink, while non-adjacent cells are yellow. The code uses `d3.voronoi` to compute both polygon and link geometry, and `d3.select` with SVG event handlers to drive the redraw. Cell adjacency is determined by checking which polygon data points match the source or target of the current site’s links.

Dec 18, 2016
Loading thumbnail…

logarithmic colour scale

This example shows how a logarithmic color scale maps changing data values to colors, compared to a linear mapping. It renders a horizontal strip of rectangles, each colored according to its position on a log scale, with an axis below using `d3.axisBottom` for reference. Using D3 v4 with SVG, the code defines a log scale with `d3.scaleLog()`, inverts data values to create color stops, and assigns fills to the rectangles via the custom `logColour_scale`.

Dec 17, 2016
Loading thumbnail…

fresh block

This example displays a static 4x4 HTML table of numbered cells, with a D3 v4 script that selects table cells using `d3.selectAll` and attaches an empty `html` callback containing a `debugger` statement. The SVG element is appended to the body with fixed width and height, but no shapes are drawn onto it. The code demonstrates an incomplete workflow, pausing execution in the browser’s debugger when iterating over the table’s `td` elements, with no data bound or visualization rendered beyond the raw HTML table.

Dec 15, 2016
Loading thumbnail…

force directed text fit labels

This example shows a hierarchical dataset rendered as a force-directed graph, where parent nodes are connected to child nodes by lines, and each leaf node displays its label text inside a circle sized by its value. The visualization uses d3.forceSimulation with forces for link distance, charge, centering, and collision, while text is fit to each circle by computing a font size based on the circle’s radius and the text length. Nodes and links are drawn as SVG elements, with data loaded from a CSV file via d3.csv and a stratify layout, and labels are added for leaves using underscore.js.

Aug 13, 2016
Loading thumbnail…

force directed text fit done

A force-directed layout arranges a hierarchical dataset as a bubble chart, with circle size proportional to each node’s value and text labels fitted inside. Nodes cluster by parent, while lines show parent–child links. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide`. Labels are rendered as SVG text with font sizes computed per tick and node radius. Data loads from a CSV via `d3.csv`, and colors come from `d3.scaleOrdinal(d3.schemeCategory10)`.

Aug 1, 2016
Loading thumbnail…

force directed test

This example shows a hierarchical dataset rendered as a force-directed network of circular nodes, where each node’s size and text content are scaled based on a numerical data value. The visualization uses `d3.forceSimulation` with a combination of link, charge, center, and collide forces to position nodes, while SVG `<line>` elements draw the connecting edges. Node labels are displayed inside circular `foreignObject` containers with HTML styling, with text clipped to fit. The underlying data is loaded from a CSV file via `d3.csv` and structured into a hierarchy using `d3.stratify`.

Jul 31, 2016
Loading thumbnail…

force directed test

A hierarchical dataset from a CSV file is visualized as a force-directed graph, where nodes are sized proportionally to a square-root-scaled `data` value and rendered as circular foreign objects containing wrapped text. SVG lines connect parent and child nodes based on the data's structure. The visualization uses D3 v4's `d3.stratify`, `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes, which are grouped elements containing a circle and an `foreignObject` with HTML content. The layout dynamically adjusts node positions and text fit during each simulation tick.

Jul 31, 2016
Loading thumbnail…

new enter in groups

Five squares and circles, created from a d3.range array, transition as new groups are entered when the data array expands from five to ten elements. The example demonstrates the d3 v4 enter and merge pattern, using `selection.enter().append()` to add new SVG groups and `selection.merge()` to update existing ones. Shapes animate via `transition()` with staggered delays based on index, while `redraw()` is called twice with different sizes, showing how enter selections handle varying data lengths.

Jul 31, 2016
Loading thumbnail…

Assign edit url to spreadsheet and email link

This example shows a Google Apps Script that assigns edit URLs to a spreadsheet and emails them to form respondents. The script retrieves form responses and their edit response URLs, then writes those URLs as hyperlinks into a specified column of the linked spreadsheet. It uses the FormApp and SpreadsheetApp services to access the form and its destination sheet, matching timestamps to align responses with rows. Finally, it sends an email via the MailApp service containing the edit link, using the respondent’s email address from the first item response.

Jul 28, 2016
Loading thumbnail…

print_template - colour scale

This example demonstrates the non-linear nature of d3’s linear color scale by mapping a custom domain [0, 0.25, 0.5, 0.75, 1] to a range of five distinct colors, from white through green, yellow, and red to black. The code prints the color values for a set of input numbers, then normalizes logarithmic values from 0.001 to 1 and prints those colors as well, revealing how the scale compresses and expands color transitions unevenly. Using d3.scale.linear, d3.format, and d3.range, the visualization appends text labels to an SVG canvas via d3.select and svg.selectAll, with the author’s custom print() function collecting outputs for display.

Jul 24, 2016
Loading thumbnail…

Heatmap random points

A clickable red button triggers a randomized heatmap of up to one thousand points, where each point’s color interpolates from red to green based on its randomly generated value. The number of points and columns is recalculated on each click, and the heatmap cells are appended as SVG rectangles using D3.js and Underscore.js. When the button is clicked, new rectangles enter with a zero width and animate to full size, while exiting rectangles shrink to nothing, with staggered transitions creating a cascade effect. The animation uses D3’s `transition()` and `.delay()` to sequence the updates.

Jun 24, 2016
Loading thumbnail…

Heatmap

This example demonstrates interactive data updates in a heatmap visualization. Clicking the red "button rect1" replaces the initial 100-cell color grid with 110 randomly generated values, animating new rectangles as they expand and recolor through `transition().duration(300)` with staggered delays. Clicking "button rect2" instead appends blue circles of varying radii based on the data values [100, 300, 400, 500]. The code uses D3.js selection, `d3.scale.linear` for color mapping from red to green, and underscore.js’s `_.map` for data transformation, with all rendering output as SVG.

Jun 24, 2016
Loading thumbnail…

print_template

This example demonstrates how to use d3.scale.linear to map numeric values to both a numeric range and a color range, then prints the resulting intermediate value and color to the SVG canvas. The code implements a simple debugging tool: each call to the print function adds a text label to the display, positioning them vertically down the canvas. Using the d3.select API to target the SVG element, it renders the scale output for the midpoint of the domain (0.5), showing the mapped numeric result and hexadecimal color.

Jun 23, 2016
Loading thumbnail…

Enter append etc

Two interactive rectangles act as buttons for updating a data-driven circle chart in D3.js. The example demonstrates the enter and append pattern, where clicking `rect1` replaces the dataset with a new array of three values, and clicking `rect2` adds two additional circles. Initially, three circles are rendered with radii proportional to the square root of the data values. The code uses `d3.selectAll("circle").data()` and `.enter().append()` to create new SVG circle elements, with transitions animating the radius updates.

Jun 15, 2016
Loading thumbnail…

print_template

This example demonstrates a simple text-based data visualization using D3.js to print strings to an SVG canvas. The code defines a `print` function that pushes each input value into an array, then uses D3's `selectAll` and `append` methods to create text elements on the SVG, positioning each new entry vertically down the canvas. While the default call prints "hello", the pattern shows how repeated calls would stack text lines, illustrating basic dynamic text rendering with D3's SVG manipulation.

Jun 5, 2016
Loading thumbnail…

Experiment2

Sixteen rectangles render as a sine wave, their heights fixed and their vertical positions offset by the sine of each index divided by three. The visualization demonstrates a basic data mapping from an array generated with `d3.range` and transformed via `Array.map`. Each rectangle is appended to an SVG using D3’s `selectAll`, `data`, and `enter` pattern, with position and color set through the `attr` method. The result shows a smooth sinusoidal pattern across the SVG canvas.

Jun 5, 2016
Loading thumbnail…

Experiment

This example displays a set of sixteen green rectangles whose vertical positions follow a sine wave, creating a simple rhythmic pattern across the SVG canvas. The visualization is generated using D3.js, where a data array created with `d3.range(16)` is bound to SVG `rect` elements via `.data()` and `.enter()`. Each rectangle is positioned with a fixed width and height, with its x-coordinate spaced evenly and its y-coordinate computed using the `Math.sin` function based on the data index. The result is a static, grid-like arrangement that highlights D3’s basic data-binding and attribute-setting capabilities.

May 19, 2016
Loading thumbnail…

test1

This example displays a simple bar chart of four data values (30, 50, 70, 90) rendered as SVG rectangles. It uses the D3.js library to select the SVG canvas, bind the data array, and append `rect` elements whose `x`, `y`, `width`, and `height` attributes are all set to the corresponding data value. The result is a series of squares originating from the top-left corner, sized proportionally to each number.

May 17, 2016
Loading thumbnail…

Simple brush

A simple brush interface displays a numeric range selection on an empty plot with an X axis. Dragging the brush updates a text label showing the current extent values. The example uses D3 version 3.5.5 with `d3.svg.brush` and `d3.scale.linear`, rendering via SVG. Data consists of 800 random numbers generated with `Math.random`, though they are not visualized.

Apr 16, 2016
Loading thumbnail…

First steps

This example shows the initial steps of loading and inspecting a malformed CSV file in Python using pandas and basic file handling. It opens the file with the built-in `open()` function, reads it line by line, strips whitespace, and splits each line into a list of values with `split(",")`. The resulting nested list is converted into a pandas DataFrame via `pd.DataFrame`, and the first 20 rows are displayed to examine the data structure. The snippet highlights data cleaning challenges, as many fields contain `None` values and numeric entries are in scientific notation.

Jul 6, 2014
Loading thumbnail…

Simple flask

This example demonstrates a minimal Flask web application that serves a single “Hello world” page at the root route. It shows how to structure a project with a separate blueprint module, using Flask’s `Blueprint` class to define the route in `views.py` and register that blueprint in the main `myapp` package. The main script creates a Flask app instance, registers the blueprint via `app.register_blueprint`, and runs the development server in debug mode. No data visualization or rendering is involved—the output is plain text.

Jul 3, 2014
Loading thumbnail…

basic line

This example displays a simple line chart rendered as an SVG path using data from an inline JavaScript array. The visualization employs a call to `d3.axis` for the x- and y-axes and uses `d3.attRail` to map the data points to a polyline via `d3.line`. The chart is drawn with default styling, and the `d3.select` selection method is used to apply a stroke to the path.

Mar 21, 2014
Loading thumbnail…

Tributary inlet

A hierarchical treemap displays the Chicago Data Portal dataset, with the root "Chicago Data Portal" branching into categories like FOIA, Transportation, and Historic Preservation. The visualization uses `d3.layout.treemap` with a golden-ratio layout to partition rectangular cells by data value, while `d3.scale.category20c` colors each category. Leaf nodes include dataset names and sizes, such as "FOIA Log - Fleet & Facility Management". The animation, rendered via `d3.select` on SVG, transitions between hierarchy levels with configurable clone opacity and duration.

Nov 3, 2013
Loading thumbnail…

Animation

This example demonstrates a simple animation of a rectangular block that moves diagonally across the SVG canvas. Using d3.js, the code generates 999 rectangles and animates their y-position based on their x-coordinate, creating a cascading diagonal motion. The animation is driven by d3’s selection and attribute manipulation, with the SVG elements updated continuously to reflect the changing positions.

Jul 14, 2013
Loading thumbnail…

Animation

This example demonstrates the stark contrast between animated and static SVG rendering. The code appends a simple rectangle to the SVG canvas and repeatedly updates its x-coordinate with `setTimeout`, incrementing a counter every 10 milliseconds to create an infinite horizontal slide. Three linked versions allow comparison: one animates continuously, while two alternatives remove the update loop, leaving the rectangle fixed in place. The visualization uses raw D3.js selection and attribute methods (`svg.select("rect").attr`) rather than higher-level transition helpers, highlighting the fundamental mechanism behind frame-based movement in D3.

Jul 14, 2013
Loading thumbnail…

Animation

A small orange square is animated across an SVG canvas using a simple repeating timer. The code draws a single rectangle with d3, then updates its horizontal x position every 10 milliseconds via setInterval, incrementing the coordinate each tick. The animation moves the square steadily from left to right without any interaction, pausing or restarting. This example demonstrates the most basic form of programmatic animation in d3, relying on JavaScript's global timer rather than d3's transition system.

Jul 14, 2013
Loading thumbnail…

No animation

The visualization demonstrates that D3.js selectors return the first matching element, so repeatedly updating a single rectangle’s x attribute only moves that one rectangle, producing no visible motion or multiple shapes. The code uses `svg.append("rect")` and a loop with `svg.select("rect").attr("x", i+10)` to attempt animation, but because the same rectangle is selected each time, the final x position is simply 110. No animation, easing, or cloning is applied, resulting in a static rectangle despite the loop.

Jul 14, 2013
Loading thumbnail…

Dragging a rectangle,simple

Two blue squares are positioned in an SVG canvas, each bound to a data object with x and y coordinates. Dragging either square updates that object’s position in real time, and the rectangle is redrawn to follow the pointer. The code uses D3’s `d3.behavior.drag` with a drag event handler that reads `d3.event.x` and `d3.event.y`, then calls a `redraw1` function to update the square’s `x` and `y` attributes. The data starts as a simple array of two coordinate pairs, demonstrating a minimal drag-and-drop interaction without physics or constraints.

May 11, 2013
Loading thumbnail…

Dragging a rectangle

Two draggable rectangles—one blue and 100 pixels square, the other smaller—respond to mouse interaction in a D3.js scene. Each rectangle tracks its own `x` and `y` position in a separate data array, updated on the `drag` event via `d3.behavior.drag()`. As the mouse moves, `d3.event.x` and `d3.event.y` assign new coordinates, and a redraw function updates the SVG attributes with the new values. The example demonstrates custom drag behavior with explicit origin binding and event handling.

May 11, 2013
Loading thumbnail…

Scales

This example demonstrates three different D3 scales rendered as horizontal axes: an ordinal scale with six categorical bands, a single-band ordinal scale, and a log scale spanning 1 to 100. The code uses `d3.scale.ordinal().rangeRoundBands()` and `d3.scale.log()` alongside `d3.svg.axis()` to position tick marks, while text labels such as “top,” “bottom,” and “middle” illustrate the offset values returned by `rangeBand()` and the scale function. The SVG canvas is 500 by 500 pixels, with axes translated to different vertical positions.

May 7, 2013
Loading thumbnail…

on click

This example demonstrates how to attach interactive click events to data-bound circles in a D3.js visualization. Two data points, each containing a row ID and x/y coordinates, are rendered as black circles on an SVG canvas. When a user clicks a circle, the browser displays an alert with the corresponding row ID from the underlying CSV-style dataset. The code uses D3 selections like `svg.selectAll("circle").data(csv).enter()` to bind data and `d3.selectAll("circle").on("click", ...)` to handle user interaction.

Apr 24, 2013
Loading thumbnail…

Pointer events

Two circles demonstrate the difference between standard and non-interactive SVG elements. The inner grey circle responds to mouseover and mouseout events by changing fill color between grey and red. The outer yellow circle, drawn with 50% opacity, never receives pointer events because its `pointer-events` style is set to "none." Built with D3.js selections and event handlers, the example shows how SVG pointer-events control which elements capture mouse interactions.

Mar 21, 2013
Loading thumbnail…

No fill

Two circles sit on a black background. The first circle is grey and turns red when the mouse hovers over it, then reverts to grey when the mouse leaves. The second circle is unfilled, drawn only by a yellow stroke. The visualization uses the D3.js library, specifically its `d3.select` API to manipulate the SVG elements, setting attributes and style properties directly. The SVG canvas is 400 by 200 units, with both circles centered vertically at 100. The code demonstrates basic interaction and styling with D3.js on an SVG rendering.

Mar 21, 2013
Loading thumbnail…

Axis tick marks

This example demonstrates how to control the placement of tick marks on a chart axis using the D3.js library. It shows a single horizontal axis with four specified tick values (0, 50, 60, 100) rendered along a linear scale that maps the domain 0–100 to a pixel range of 0–400. The code constructs the axis using `d3.scale.linear()`, `d3.svg.axis()`, and the `tickValues()` method, then appends it to an SVG element. The axis is positioned via a translate transform, with CSS styling providing black strokes for the axis line and tick marks.

Mar 20, 2013
Loading thumbnail…

uk courts

This map uses the Albers equal-area conic projection to depict the United Kingdom, showing the boundaries of England, Scotland, Wales, and Northern Ireland as distinct regions. It plots the locations of courts across the country as points, then applies a Voronoi tessellation to create a colored polygon around each location. The visualization leverages D3.js with the `topojson` library for geographic data handling and `d3.geom.voronoi` for the polygon generation, with the color scale ranging from light blue to dark purple based on the index of each place.

Mar 17, 2013