D3 Treemap From Resource Timing Performance Entries

Published on by Morgan Ney

The various resources embedded in an HTML document can be grouped into a hierarchy of media types, and their corresponding load times can provide interesting data values for a D3 Treemap. Fortunately, a few browsers have already implemented the W3C Resource Timing API which exposes useful networking milestones, one of which is the total duration or load time for a resource. I'll use this data to create a hierarchy for a D3 treemap representing the relative load times of each performance entry resource embedded in this very page.

First I'll include some extra images for demo purposes, keeping the file sizes of each in mind. This is to make sure the treemap has a few more nodes since I bundle my CSS and JS for production environments. You can click here to enjoy some pictures of my newborn daughter and our dogs.

Hannah Lynn NeyMole chihuahuaPocket chihuahuaAbby italian greyhound

Second I need to create a JSON hierarchy out of the performance entries for each resource embedded in the page. Here is an example of what a performance entry looks like. This particular example is for a CSS resource, and can be determined by examining both the initiatorType and name properties:

Basically creating the hierarchy requires grouping the performance entries by media type in a nested JSON object. You could create a function along these lines:

Now I can run the return value from getJSONResourceHierarchy() through a D3 treemap layout. Doing so results in an array of nodes, one for each resource in the hierarchy, modified with additional properties suitable for drawing the treemap with HTML and CSS. These actions are encasuplated by the following function:

Finally, here's an example of a D3 treemap for performance entry resources embedded in this page, grouped and color-coded by media type and positioned with a relative size correspoding to its total load time in milliseconds (the "Duration" value from the table). Each page load should result in a slightly different treemap depending on network conditions at request time. Clicking on a cell populates the table with statistics for the resource.

Name
App Cache
DNS
TCP
Request
Response
Duration
TTFB

Your browser doesn't support the Resource Timing API.
Try using the latest version of Google Chrome or Internet Explorer.

As you can see, at a glance, the treemap provides insights into how resources might be better managed at the application (bundling, compression, etc.) or networking (latency, caching) layer to improve page performance.

Relevant to  Resource Timing API, D3 Treemap, JavaScript

Recent Posts

JSON API for Social Media Share Counts

Published on by Morgan Ney

Want to create a custom look for social media buttons from Facebook, Twitter and Google? Are you tired of the vendor supplied widget styles when you use their embed scripts? socoapi is a JSON API for obtaining share counts of your website on social media sites like Facebook, Twitter, Google+ and Pinterest.

Relevant to  Node.js, JSON, API, Social Media

A RESTful JSON API for the NextBus XML Feed

Published on by Morgan Ney

The NextBus XML feed provides useful data for real-time transit applications but the service isn't very friendly to web developers. Use "restbus" to access the NextBus XML feed over a RESTful JSON API.

Relevant to  REST, JSON, API, Node.js

Dynamic Gists Using MutationObservers and Promises

Published on by Morgan Ney

GitHub Gists are great for your blog if they're part of the initial payload before the browser's window has fired its onload event; just use the provided embed script. If you need to embed Gists into XHR loaded content, it's still possible with a bit more work. MutationObservers and Promises can make coordinating the retrieval of the Gist and its subsequent DOM placement a lot easier.

Relevant to  MutationObserver, Promise, Backbone, jQuery

Simple CSS3 Ribbons

Published on by Morgan Ney

Browsers have come a long way in their support for CSS3, in particular generated content of pseudo-elements ::before and ::after. Using these two pseudo-elements it's simple to create a CSS3 ribbon using only one HTML element.

Relevant to  HTML5, CSS3

Installing CouchDB 1.5 on AWS EC2 CentOS 6 (x86_64)

Published on by Morgan Ney

As of January 21st, 2014 the CentOS 6 EPEL repository only supports version 1.0.4 of CouchDB which is currently on version 1.5. Luckily, installing CouchDB from source on an Amazon EC2 instance running CentOS 6 is pretty simple.

Relevant to  CouchDB, EC2, CentOS

Using JavaScript Promises with Backbone.sync

Published on by Morgan Ney

Backbone is a great MVC library for JavaScript, but applications involving fetch() sequences can start to get ugly with deeply nested callbacks. Using ES6 Promises with Backbone can prevent ugly callback chains and make your code more understandable and flexible.

Relevant to  JavaScript, Backbone, Promise, jQuery

HTML Excerpt with PHP

Published on by Morgan Ney

HTML excerpts or previews of an article can reuse the CSS developed to style the entire article, making for a more eye-catching experience. However, it is not always clear how to prevent breaking your HTML when building the excerpt so most authors tend to deliver plain text excerpts. Using PHP's DOMDocument class, it's possible to create a valid HTML excerpt.

Relevant to  PHP, HTML, DOM
Get in Touch

BizzyBtyes is owned by Morgan Ney, a web developer from the San Francisco Bay Area.