Web Traffic

We visualize web traffic in d3.js as bubbles moving across the screen avoiding each other as they mark the progress of each transaction. This was my first effective use of Mike Bostock's bl.ocks.org example distribution service.

Each bubble in this d3.js visualization represents a web transaction. They travel across the screen like a progress indicator. Slow server response makes for bigger bubbles.

See bl.ocks.org. website

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.