Skip to content
Search Gists
Sign in Sign up

Instantly share code, notes, and snippets.

We start with Bostock's Multi-Foci Force Layout example and add motion to represent traffic progressing through a system. Think of this as progress bars for every inflight transaction.

Each dot represents a transaction read from a four-minute long recording. Watch for a spike in activity at 12:20:20. The animation repeats when finished.

Dots enter when transactions start and exit when completed. Their speed is proportional to client's response time while their size reflects the server's contribution to total time. Color comes from the specific request.

tmayse / README.md
Last active December 19, 2015 15:59 — forked from mbostock/.block

This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.

This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

Switch between stacked and grouped layouts using sequenced transitions! Animations preserve object constancy and allow the user to follow the data across views. Animation design by Heer and Robertson. Colors and data generation inspired by Byron and Wattenberg.

This stacked area chart is constructed from a TSV file storing the market share of several popular web browsers over the last year. Data is from Clicky Web Analytics. The chart employs conventional margins and a number of D3 features:

AltStyle によって変換されたページ (->オリジナル) /