ZJONSSON

@ZJONSSON·52 public vizzes

Newton's cradle

Newton's Cradle demonstrates a seven-strand pendulum simulation using D3.js v3’s force layout (`d3.layout.force`) with custom collision handling via the `d3.z.collide` plugin. Each strand contains five linked nodes, with the top node fixed and the bottom ball given mass and radius for elastic collisions. The `d3.geom.quadtree` accelerates collision checks, while `d3.svg.line` with cardinal interpolation renders the wires. The animation runs continuously, with the force layout’s `tick` event triggering redraws that update ball positions and wire paths.

Feb 5, 2022

Loading thumbnail…

Simple transitioning slides with SVG and D3

This example demonstrates a slide-based presentation system built with D3.js and SVG, where each slide is defined by a rectangle with an ID like "slide_1" or "slide_2.5" in an Inkscape-created SVG file. The script sorts slides by their numeric IDs and transitions between them by animating the SVG viewBox with a 1.5-second duration, using keyboard controls (arrow keys, Home, End) or touch gestures. Each slide exposes scale_x and scale_y functions that map a normalized [0,1000] domain to the slide's pixel boundaries, enabling easy placement of interactive elements—here a bouncing steelblue circle on slide 3. The visualization also supports panning and zooming via mouse drag and mousewheel, with zoom anchored to the cursor position. This example demonstrates a simple, flexible approach to building slide-based presentations from SVG files.

Feb 5, 2022

Loading thumbnail…

CircleCI coverage lambda

This example shows a live coverage badge for a GitHub module, displaying the latest test coverage percentage as a green SVG shield. It retrieves recent build data from the CircleCI API, finds the most recent successful build, and fetches its coverage report artifact. The code extracts the percentage from the HTML report using a regex, then dynamically generates an SVG badge with embedded text and gradients. It relies on the `request` library with Bluebird promises, and the final output is served as an image/svg+xml response.

Jan 22, 2019

Loading thumbnail…

scipy-notebook with rasterio

This example demonstrates a Docker-based environment for geospatial data analysis in Jupyter, combining the scipy-notebook stack with the rasterio library for raster processing. The Dockerfile builds on the official jupyter/scipy-notebook image, installing system-level GDAL dependencies via apt-get and then using conda to add the gdal package. It also uses pip to install rasterio for the jovyan user, enabling direct access to rasterio’s geospatial raster I/O and analysis APIs within Python notebooks. The setup shows a reproducible workflow for working with satellite or elevation data without requiring manual system configuration.

Sep 18, 2017

Loading thumbnail…

New York Traffic - Live

The visualization presents a live grid of traffic-camera thumbnails for New York City, updating every ten seconds to reflect current conditions. Each image is sourced from the nyctmc.org camera feed and rendered as a static JPEG refresh. The page uses jQuery to dynamically append camera elements from an embedded list and cycles their `src` attributes with a timestamp query to force reloads. The animation is simple and direct, relying on `setInterval` and jQuery’s `.attr()` method rather than a complex charting library.

Mar 14, 2017

Loading thumbnail…

Automatic floating labels using d3 force-layout

This example demonstrates automatically positioned floating labels for data points in a scatterplot. The labels are placed using a D3 force-layout, with each label connected to its anchor point via a link and adjusted to avoid overlaps based on user-controlled charge. The visualization updates in real time as new data points are added or the correlation between variables is adjusted. The code uses `d3.layout.force` from D3 v2, custom label positioning logic (`force_labels.js`), and SVG elements like `circle`, `text`, `line`, and `g` to render the plot and labels.

Nov 6, 2014

Loading thumbnail…

Blackjack?

A simple blackjack game demonstrates card dealing and play using an SVG deck of cards loaded from an external file. The page offers Hit and Stand buttons; D3 transitions with duration and delay animate each card moving from a central stack to player and dealer positions. The code uses `d3.xml` to import the cards, `d3.select` for the buttons, and `attr` with `xlink:href` to swap card faces. Game logic tracks card values, including Aces as 1 or 11, and ends with win, loss, bust, or push conditions.

Nov 6, 2014

Loading thumbnail…

Brownian Bridge

A brownian bridge visualization simulates geometric Brownian motion for Apple stock prices, with blue dots representing known monthly closing values and a gray line showing the simulated path between them. The chart supports pan and zoom via mousewheel, with active caching ensuring that random base values stay fixed as new data points are generated to fill in the domain. Sliders control volatility and drift, recalculating the path while preserving previously established Gaussian random outcomes, and a "randomize" button resets the entire world.

Nov 6, 2014

Loading thumbnail…

Iceland TopoJSON -pan/zoom

This example displays a topographic map of Iceland using the TopoJSON format, with individual polygons colored on a green-to-white scale based on elevation data. The map supports interactive pan and zoom through the D3.js `d3.behavior.zoom` API, which applies translation and scaling transforms to the SVG group containing the projected paths. The visualization renders geographic features via `d3.geo.path` with a Mercator projection, and data is sourced from the National Land Survey of Iceland.

Nov 6, 2014

Loading thumbnail…

Bitcoin Arbitrage - Priceonomics

This visualization performs a real-time Bitcoin arbitrage search, scanning live foreign-exchange rates to identify duality and triangular arbitrage opportunities. It outputs mathematical formulas, rendered with MathJax, that show how currency pairs can be traded for profit. The data comes from Priceonomics’ FX rate API, fetched via YQL’s JSONP callback. The code uses JavaScript functions to generate combinations and states, then displays results in an HTML page styled with CSS, all coordinated through jQuery.

Nov 6, 2014

Loading thumbnail…

Bitcoin Arbitrage (extension)

This extension of the Bitcoin Arbitrage exercise calculates bid/offer spreads for each currency pair and checks all triangular combinations for arbitrage opportunities under those spreads. The page displays the mathematical formulas using MathJax, showing both the triangular calculations and the derived bid/offer prices for every pair. It uses jQuery to update the DOM and fetches live exchange-rate data from the Priceonomics API via a JSONP request through Yahoo Query Language. No charting or visualization library is used; the output is purely text-based mathematical notation.

Nov 6, 2014

Loading thumbnail…

Icelandic population pyramid

This interactive population pyramid animates Iceland’s demographic structure from 1841 to 2013 via a slider. It shows age cohorts split by sex, with bars extending left and right from a central axis. The code uses d3.csv to load yearly data, d3.scale.linear for value mapping, and d3.svg.axis for labeled axes. SVG rectangles are repositioned and resized on each redraw based on the selected year, with separate scales for males and females to create the mirrored layout.

Nov 6, 2014

Loading thumbnail…

Optimal denominations

This example shows how many coins of which denominations minimize the number needed to make any amount from one cent to one dollar, calculating the optimal set for 2 through 6 coins. The page iterates through all combinations of candidate denominations, scores each set by summing the coin count required for every amount using a greedy algorithm, and outputs the best result. It uses plain JavaScript combinatory functions and DOM manipulation via `document.createElement`, with data defined in `denom.js` and logic in `index.html`.

Nov 6, 2014

Loading thumbnail…

Happy Birthday

This interactive greeting combines a YouTube video with real-time text-to-speech synthesis. The app plays a fixed clip while overlaying synchronized audio of a personalized birthday message, generated by the `speakGenerator.js` eSpeak port. The Popcorn.js library controls video playback and schedules each spoken phrase at a specific timestamp via the `example.code()` method. A web form passes custom values for the name and other blanks through URL parameters, which the app reads with native URL parsing.

Nov 6, 2014

Loading thumbnail…

Newton's balls

The visualization shows hundreds of randomly sized and positioned circles bouncing off one another in elastic collisions, constrained by the window boundaries. Using D3's force layout, each circle behaves as a particle with mass proportional to its radius, and collisions are resolved through Newtonian physics implemented in a custom `d3.z.collide` module. The code leverages d3.v3, SVG rendering, and quadtree-based collision detection to animate the motion.

Nov 6, 2014

Loading thumbnail…

Nearest Citibike

This example shows the ten nearest Citibike stations to the user’s current location, listing distance, available bikes, free docks, and station name. It relies on the browser’s Geolocation API to obtain coordinates, falling back to Grand Central Terminal if permission is denied. The code uses the Citybikes API (`api.citybik.es`) to fetch station data via a JSONP callback, then computes distances with a custom Haversine formula and renders results in an HTML table. No external visualization library is used; the presentation is plain DOM manipulation.

Aug 9, 2013

Loading thumbnail…

Minimalistic Promises A+ framework (without setTimeout/nextTick. 2 of 231 test fail)

This example demonstrates a minimal implementation of the Promises/A+ specification using the `promin` library, a lightweight framework that avoids `setTimeout` and `nextTick`. It shows how 231 specification tests are run, with only 2 failing, by providing an adaptor that maps the test suite’s `fulfilled`, `rejected`, and `pending` states to `promin`’s `set` and `then` methods. The `promin.js` file defines a `Promin` constructor and prototype, where `set` resolves or rejects a promise and `then` chains callbacks, returning new promises. The code is based on PinkySwear and showcases synchronous promise resolution without asynchronous scheduling.

Jun 7, 2013

Loading thumbnail…

Leaflet vector tile map of rivers

A Leaflet map displays U.S. river networks as blue vector tiles over an ESRI shaded-relief raster basemap, with gray state boundaries. The interactive map supports panning and zooming via URL hash synchronization. The river overlay is rendered using `L.TileLayer.d3_geoJSON`, which combines Leaflet’s tile system with D3’s GeoJSON rendering to fetch and draw river data from a TileStache/Gunicorn server. State boundaries come from a static GeoJSON object (`usStates`), while the river data source is attributed to NHDPlus v2.

May 20, 2013

Loading thumbnail…

Flot - Downsampling Plugin

This example demonstrates a Flot line chart with a downsampling plugin that simplifies dense data series using Visvalingam's algorithm. The chart displays one of three demo datasets selected from a dropdown, and a slider controls the simplification threshold, dynamically updating the number of points rendered in the 900x300 pixel plot area. The plugin caches the simplified results for performance, using a triangle-area-based approach to remove the least visually significant points while preserving the overall shape. A readout shows the current threshold and total point count. The gray-themed page includes a header, content box, and a threshold slider with a warning that it works best in full screen mode.

May 15, 2013

Loading thumbnail…

D3 GeoJSON in Leaflet

This example shows a map of New York City where roads and water areas are rendered as vector tiles, with roads drawn as black strokes and water filled in blue. It combines Leaflet’s tile layer mechanism with D3’s `d3.geo.path` to project and draw GeoJSON features fetched from OpenStreetMap’s vector tile service. A custom `L.TileLayer.d3_geoJSON` class extends Leaflet, appends an SVG group to the map container, and uses `d3.json` to load each tile’s data, while aborting requests and removing nodes on tile unload to manage performance.

May 7, 2013

Loading thumbnail…

barStack

This example shows a stacked bar chart with both positive and negative values. The chart uses the D3.js library (version 2) to render SVG rectangles for each bar segment. The `barStack` function calculates the cumulative offset for each value, separating positive and negative stacks. The code uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` to draw the axes. The data is a hard-coded array of three series, each containing three values.

Apr 9, 2013

Loading thumbnail…

Node-mysql Query.stream test

This example demonstrates how the node-mysql Query.stream() method handles automatic backpressure by pausing data emission when a downstream writable stream is slow. A MySQL query streams rental records from the sakila.rental table through a custom stream.Writable that delays each write by 500 milliseconds, while the code logs every incoming result event. The mysql connection and Query.stream() API control the flow, and the writable’s highWaterMark settings trigger the pause behavior when the buffer fills.

Apr 5, 2013

Loading thumbnail…

Quadtree

This interactive visualization demonstrates a quadtree spatial index in action. The page displays 5,000 randomly positioned points as small gray circles, overlaid with the quadtree's recursive subdivision rectangles. Users can drag a rectangular brush to select a region; as the brush moves, the quadtree traversal highlights every point whose quadrant was scanned in orange while marking points contained in the selection in red. The visualization efficiently filters points by recursively checking only relevant quadrants, with the quadtree's internal bounds (x1, x2, y1, y2) stored in each node. A performance optimization ensures only nodes visited by the quadtree—plus the previous selection—are updated, rather than all 5,000 points, resulting in faster brush response. The quadtree structure itself is shown with faint gray rectangles, and points are rendered as circles.

Mar 19, 2013

Loading thumbnail…

QueueWrite - asynchronous queue for stream output

The QueueWrite example demonstrates asynchronous stream throttling by piping the contents of `test.js` through a custom writable stream that queues chunks and limits concurrent write operations. A `delayPrint` function writes each chunk to stdout after a random delay of up to 200 milliseconds, while periodic console logs show the current open slot count and queue size. The code uses Node.js `stream.Writable`, `fs.createReadStream` with `lowWaterMark` and `highWaterMark` options, and `util.inherits` to implement the custom stream logic. Animation occurs through the timing of queued writes and the live stats output.

Mar 18, 2013

Loading thumbnail…

Simple X3D with D3

This example demonstrates a minimal X3D scene built directly through D3’s selection and namespace mechanism. It creates an empty X3D container with a 500‑pixel height and full width, then appends a scene and a single box shape. The code uses D3’s `d3.ns.prefix` to register the X3D namespace, enabling `x3d:x3d`, `x3d:scene`, and `x3d:shape` elements, while relying on the x3dom library to render the 3D object in the browser. No data is loaded; the visualization is purely structural.

Mar 16, 2013

Loading thumbnail…

Glucose levels

This visualization displays glucose (blood sugar) measurements over time as a scatter plot, with each point representing a reading from a CSV dataset. The y-axis shows sugar levels, while the x-axis uses a time scale to map dates. A semi-transparent green band highlights the safe range between 70 and 140 mg/dL, allowing viewers to quickly identify readings outside the healthy zone. The chart supports interactive zooming and panning along the time axis, implemented via d3's zoom behavior, which re-renders the dots and safety band on changes. The y-axis is fixed, and the x-axis dynamically rescales as the user navigates through the time series data.

Dec 11, 2012

Loading thumbnail…

Using D3 to create and animate X3D - with x3dom

D3 selects and manipulates X3D scene elements to render and animate a 3D scatterplot with axes and random data points. The code uses d3 scales and transitions to move boxes to new positions every 2.5 seconds, while x3dom handles the WebGL rendering. D3’s namespace prefix registers the X3D tags, and the runtime’s showAll method adjusts the camera view.

Nov 7, 2012

Loading thumbnail…

d3.legend example

This example demonstrates a reusable legend plugin for D3.js, applied to a multi-series line chart of daily average temperatures in New York, San Francisco, and Austin. The legend is generated by adding a `g` element and calling `d3.legend`, which automatically collects items from any SVG element with a `data-legend` attribute. The plugin supports automatic color matching from fill or stroke styles, explicit color overrides via `data-legend-color`, ordering based on bounding-box position or a `data-legend-pos` attribute, and adjustable padding. After one second, the font-size is changed and `d3.legend` is called again to demonstrate how the legend reflows and resizes based on the new font size. The chart itself is a multi-series line chart of daily average temperatures for New York, San Francisco, and Austin, using d3's time scales, linear scales, ordinal color encoding, and SVG line shapes. The legend appears as a boxed set of colored circles with text labels, positioned within the chart's margin area.

Oct 19, 2012

Loading thumbnail…

Average Price Histories

This line chart visualizes average consumer prices from Bureau of Labor Statistics data, showing price histories across multiple product categories from 1984 to 2007. The visualization uses D3's multi-series CSV format, with each category rendered as a distinct colored line using a perceptual color space (d3.hcl) for optimal discrimination. The chart employs conventional margins and D3's time scale for the x-axis and linear scale for the y-axis, with axes displayed using D3's SVG axis component. Data is loaded and parsed with d3.csv and d3.time.format, while d3.extent, d3.min, and d3.max compute the domains. Each series line is generated with d3.svg.line, and Underscore.js utilities (_pluck, _each, _map) help manipulate the data arrays. The visualization clearly shows historical price trends for various consumer goods across multiple decades.

Oct 15, 2012

Loading thumbnail…

d3.f

The example introduces `d3.f`, a set of helper functions that extend D3’s array utilities by allowing key-based access for properties or functions. It wraps `d3.min`, `d3.max`, `d3.extent`, `d3.sum`, `d3.mean`, `d3.median`, and `d3.split`, along with `d3.ascending` and `d3.descending`, into functional callbacks that accept a key parameter. Additionally, it provides `d3.f.first` and `d3.f.last` to retrieve the first or last element based on a sorted key. The code demonstrates how to simplify common data-access patterns when building reusable visualization components.

Sep 20, 2012

Loading thumbnail…

D3 Hive Plot (Areas) - evil exposure

A D3 hive plot uses three radial axes to display an abstract network, with curved links connecting the axes. The SVG visualization encodes data through the link's start and end positions along each axis and uses a category20c color scale to distinguish groups. The code defines an ordinal scale for axis angles and a linear scale for radii, then generates paths using a custom link function that draws curves between points on the axes. The white outline on the axis lines is created by layering two line elements with different stroke widths.

Aug 30, 2012

Loading thumbnail…

D3 Hive Plot (Areas) - std expose

This D3 v2 example demonstrates a hive plot using area-based links instead of simple lines. Three radial axes are arranged at 120-degree intervals, each with a white stroke overlay to clearly separate the axes. The links are drawn as curved ribbons with varying start and end radii, creating a filled-area appearance between nodes on adjacent axes. Each link is assigned a color from a categorical palette based on its group, and the axes extend from an inner radius of 40 to an outer radius of 240 pixels. The visualization uses an ordinal angle scale for the three axes and a linear radial scale to position the link endpoints, with the custom link function generating cubic Bézier curves to smoothly connect the areas across axes. The example demonstrates how to represent multi-dimensional relationships in a compact, radial layout.

Aug 30, 2012

Loading thumbnail…

zQuiz rendered with jQuizMe

This example renders a vocabulary quiz using the zQuiz data structure and the jQuizMe jQuery plugin. It displays multiple-choice questions generated from a JSON array of English words, each containing definitions, synonyms, and antonyms. The code maps zQuiz data into jQuizMe’s expected format, setting the question text, answer options, and correct answer for each item. jQuizMe handles the interactive quiz display and scoring, with a custom praise message defined in a language object. The visualization shows how a structured dataset can be transformed into an interactive educational widget without additional charting libraries.

Aug 27, 2012

Loading thumbnail…

Scatterplot (WebGL-2D)

This interactive scatterplot displays nutritional data for over 700 foods, plotting selected nutrient values against each other on X and Y axes. Using WebGL-2D rendering on canvas, the visualization leverages GPU acceleration for smooth, responsive animation of the scatterplot. Users can switch between different nutrient variables for each axis via dropdown menus, and hovering over a data point reveals the corresponding food name. The visualization is built with d3.v2 and underscores.js, with WebGL-2D handling the rendering.

Aug 1, 2012

Loading thumbnail…

Contour Test using Jason Davis implementation with D3

This example uses the Conrec algorithm with D3 to render contour lines from a matrix of numerical data. The data is a 20×20 grid of values ranging from -5 to 3. D3’s linear scales map the grid indices to a 500×500 pixel coordinate space, while a color scale maps contour levels from white to red. The Conrec library computes contour polygons for 17 levels, and D3 renders them as semi-transparent filled paths with black strokes. The result is a multi-level contour plot that visualizes the underlying scalar field, with each level colored according to its value.

Jul 19, 2012

Loading thumbnail…

Testing d3.js in Leaflet.js

This example combines D3.js with Leaflet to render a geographic visualization of taxon observation counts. D3.js selects the SVG element created by Leaflet and appends a group, then loads GeoJSON data and adds a circle for each feature. The circles’ radii are scaled by the `count` property, initially set relative to the data and adjusted dynamically on map zoom via the `update()` function, which converts geographic coordinates to pixel positions using Leaflet's `latLngToLayerPoint`. A red border on the SVG and group elements highlights the integration of D3's data-binding with Leaflet's map interaction.

Jul 11, 2012

Loading thumbnail…

barStack

The example shows three series of stacked bars, with each series split into positive and negative segments, and toggles between horizontal and vertical orientations. Using D3 v2, the `barStack` function computes cumulative offsets (`y0`) and absolute sizes for each bar, while ordinal and linear scales map data to screen positions. Animated transitions, triggered by a button click, reposition the bars and axes, and the SVG rendering updates smoothly via `transition().duration()`.

Jun 23, 2012

Loading thumbnail…

D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

This example combines D3 with Leaflet to create an interactive choropleth map of US states. The map uses Leaflet for tile-based map rendering and zooming, while D3 handles the geographic data. State boundaries are drawn as SVG paths using D3’s geo path generator, with a custom projection function that converts latitude and longitude coordinates to Leaflet layer points, ensuring the states align perfectly with the map tiles. The states are semi-transparent black, turning brown on hover. As users zoom or pan the map, the state boundaries are redrawn to match the new view, maintaining accurate overlay. The visualization demonstrates the integration of D3's data-driven SVG rendering with Leaflet's interactive map capabilities.

Jun 20, 2012

Loading thumbnail…

d3.layout.force3d (a quick hack to get force layout into the third dimension)

A force-directed graph layout extends into three dimensions using X3DOM for rendering. The visualization builds a network of spheres connected by lines within a 3D coordinate system with labeled axes. The layout uses two chained d3.layout.force simulations: one handling X/Y positioning and a second managing the Z-axis. Nodes are added dynamically as colorful spheres, with edges forming between new and existing nodes. This implementation demonstrates combining D3's force simulation with X3DOM's declarative 3D scene graph for interactive network exploration in spatial depth.

May 17, 2012

Loading thumbnail…

Internalizing chart variables (mod)

Three small circles are plotted as a scatter of three data points, each mapping an `x` and `y` value to screen coordinates. The example demonstrates how to store chart scales on a DOM node by setting an SVG element’s `__chart__` property via `d3.select(...).property`. Inside the property function, two linear scales are built with `d3.scale.linear`, using the parent’s `offsetWidth` and `offsetHeight` for ranges. The circles then access these scales through `this.__chart__` when setting `cx` and `cy`, avoiding closure variables.

Jan 11, 2012

Loading thumbnail…

Internalizing chart variables (mod)

Three circles are plotted on an SVG canvas according to two linear scales that map x-values (years 2012–2045) and y-values (1–100) to pixel coordinates. The chart scales are stored directly on the SVG element via its `__chart__` property, and each circle references these internal scales using `this.__chart__` within its position attributes. A d3.js v2.7.1 script defines the data points (2015,23), (2024,55), and (2034,12) as animated circular marks, with the visualization demonstrating how chart variables can be internalized as element properties for later access during rendering.

Jan 11, 2012

Loading thumbnail…

Basic filled contours in D3

This example displays a two-dimensional scalar field as a filled contour map, with nested color bands representing different value ranges. The visualization uses a custom contouring algorithm based on triangular meshes, which generates both filled polygons for areas and unconnected line segments for contour boundaries. Implemented with D3.js, the code uses linear scales to map data coordinates to screen positions and SVG polygons and paths for rendering. The underlying dataset is a hardcoded 20x20 matrix of numeric values, with a white-to-red color scale encoding the range from -5 to 3.

Nov 7, 2011

Loading thumbnail…

Icesave capital structure - nest/layout example

Interactive controls switch between no-agreement and pari-passu distributions, and between relative and absolute views, while the stacked bar chart animates its layout. The visualization uses d3.layout.stack and d3.nest to group deposit account balances by category (A, B, C) and party (TIF, FSCS), with red and green areas marking guaranteed versus excess balances. Axes and tick marks are drawn with d3.svg.axis, and the chart reads static data from a gist.

Nov 2, 2011

Loading thumbnail…

Basic contours in D3

An animated contour plot displays a matrix of numeric values as evolving line segments, with the contour level sweeping back and forth between -3.5 and 1. The animation updates every 50 milliseconds, redrawing the paths for the current level using a simplified implementation of Paul Bourke’s CONREC algorithm, which checks triangular subdivisions of each 4-point cell. The visualization is rendered with the D3.js library, using `d3.select` and `d3.svg.line` to map data coordinates to SVG paths, while the dataset is a 20x20 matrix of values loaded from a separate JavaScript file.

Oct 26, 2011

Loading thumbnail…

D3 - using SVG Bounding Box to get the "automatic padding"

This example demonstrates how to dynamically adjust an SVG chart's viewBox based on the bounding box of its contents. It uses D3.js to render axes, titles, and tick marks, then toggles the y-axis domain between 100 and 999,999,999 every second. After each domain change, the code calls `getBBox()` on the SVG element to compute the new bounding box and updates the `viewBox` attribute, automatically providing padding that accommodates the rescaled axis labels. The animation cycles indefinitely using `setInterval`.

Oct 22, 2011

Loading thumbnail…

Update speed based on length of an unrelated static path object

Two SVG panels sit side by side: one shows a static red square, the other renders a grid of points whose density is user-selectable. An animation updates the square’s x-coordinate at every timer tick, while a live FPS counter reveals how the update speed changes as the point count varies. The code uses D3’s `d3.svg.line` to generate a path from the grid data, and `setInterval` drives the square’s movement. A checkbox toggles whether points are placed inside the viewbox or shifted far outside, affecting rendering performance.

Oct 14, 2011

Loading thumbnail…

[separate SVG boxes ] Update speed based on number of SVG elements in viewBox

Two adjacent SVG boxes animate the movement of a red rectangle while displaying a live frame-rate counter. The performance benchmark is controlled through dropdown menus and a checkbox, allowing the user to adjust the number of green circles rendered inside the second viewBox and toggle whether they remain within it. The example uses d3.js selectors and data binding to update circle positions dynamically, while a setInterval timer drives the rectangle’s movement and calculates frames per second from timestamp differences.

Oct 14, 2011

Loading thumbnail…

Update speed based on number of SVG elements in viewBox

A benchmark animates a red rectangle inside an SVG viewBox, while a grid of green circles is regenerated based on a user-selected count (500 to 10,000) and a toggle to place them inside or outside the viewBox. The animation updates the rectangle’s x-coordinate via `setAttribute` at maximum speed, and the visible FPS counter displays the resulting update rate. Using D3.js, it appends SVG circles based on the current `num_circles` and `inside` checkbox values, demonstrating how the number of rendered SVG elements affects rendering speed.

Oct 14, 2011

Loading thumbnail…

Icelandic earthquakes (D3)

An animated map visualizes earthquakes in Iceland over time, plotting each event as a colored circle whose size reflects magnitude and color indicates depth. The map is rendered using D3.js with a slippy map background, while a date slider, play button, and speed, size, and fade controls let users scrub through the timeline. The data comes from a CSV file containing latitude, longitude, depth, and magnitude; interactions are powered by jQuery UI sliders and custom SVG pan/zoom utilities.

Oct 11, 2011

Loading thumbnail…

SVG slippy map using Viewbox with D3

An interactive slippy map displays CloudMade tiles inside an SVG element, with D3.js managing tile loading and viewBox coordinates. Panning and zooming manipulate the SVG viewBox directly, keeping tile coordinates static. The svg_interact module handles mouse events and wheel zoom, while svg_map calculates visible tiles and fetches them as raster images via CloudMade's tile API. The map supports continuous zoom levels and only renders tiles within the current viewport.

Oct 5, 2011

Loading thumbnail…

Using data() enter and exit in D3

Four blue circles represent an initial dataset of objects with IDs and x/y coordinates. Using D3's data join with key functions, the example updates individual circles by changing their positions and colors through chained transitions, including a removal that fades one circle out before deleting it. Afterward, a reset function restores the original dataset, using `.enter()`, `.exit()`, and `.remove()` to synchronize the circles with the new data array. The visualization demonstrates D3's enter/exit pattern for adding, updating, and removing DOM elements based on data changes.

Oct 1, 2011

Loading thumbnail…

Gist 6fc452a19facae4857d0

This example demonstrates the process of setting up mutual TLS (client-side SSL) authentication for web servers. It walks through generating self-signed certificates using the OpenSSL command-line tool, including creating a Certificate Authority root, client keys, and PKCS#12 or PEM conversions for browser and application use. The guide references nginx configuration directives such as `ssl_client_certificate` and `ssl_verify_client` to request and validate client certificates, and it links to external resources for integrating with backend applications. The gist is a textual reference, not a data visualization.

May 2, 2011