Beautiful Data with Kendo UI DataViz: Webpage Obesity

Webpage Obesity.png

Humans are remarkably attuned to pattern matching. It's the result of thousands of years in evolution. I see this on a daily basis with my children as they play with their toys. They're constantly finding new ways to place blocks in a location that's nearly impossible for me to reach. But, I digress.

They say that a picture is worth a thousand words. This is especially true when it comes to data. When faced with rows upon rows of seemingly meaningless data, we often turn to visualizations like charts and graphs to help make sense of it.

For years, I've been fascinated with data visualization – especially beautiful ones. Chances are, if you've picked up a newspaper or visited a news site like the New York Times, you've found yourself staring at one. They're everywhere these days. And for good reason too! Good data visualization allow us to interpret data is new and powerful ways. This opens up the world around us to a wealth of knowledge that went unseen in the past.

These days, with more and more data becoming increasingly available, Kendo UI DataViz has quickly become my virtual doodle pad with which to "draw". Kendo UI DataViz is one of three collections in Kendo UI, an HTML5/JavaScript framework for building modern web and mobile apps. Kendo UI DataViz consists of a series of widgets that enable you to create beautiful charts and graphs.

Armed with Kendo UI DataViz, I felt compelled to share information with folks in the developer community about a growing concern of mine; the weight of web pages or, what I like to call "webpage obesity".

In terms of bytes-on-the-wire, the Internet is getting fat. Quite fat, in fact. For example, did you know that an average webpage is around 1.4 MB? Not surprised? You should be. "But, why should I care?" you may ask. The reason is simple: performance.

Recently, I posted a copy of a fantastic infographic by Strangeloop Networks, which cites a number of statistics concerning website performance and the impact it has on a company's bottom line. Basically, it boiled down to this: if your website is slow, your customers won't want to come back.

Anyway, getting back to my love affair with data visualization.

The HTTP Archive is a fantastic resource for web developers wanting to discover how sites tick. Every two weeks, it crawls over 290,000 URLs, collecting information on each one. It provides a historical log of this information for developers to sift through. Its mission is articulated as such:

In addition to the content of web pages, it's important to record how this digitized content is constructed and served. The HTTP Archive provides this record. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

The HTTP Archive provides some nice charts and graphs, but each time I visited the site, I always felt like I wanted more insight into the data. And thus, my side project entitled, Webpage Obesity was born.

Webpage Obesity

Webpage Obesity

Webpage Obesity is my attempt to provide a snapshot of the HTTP Archive in one go. A "here's the state of the Internet, people!" kind of image that would leave people with the shock value of stepping on the scale after Christmas holidays.

Side note: a massive tip of the hat must go to Steve Souders for making the data of the HTTP Archive publicly available. For a good overview of how to get and analyze the data yourself, make sure to check out Stoyan Stefanov's excellent post entitled Digging into the HTTP Archive. It's definitely worth the read.

For my Webpage Obesity project, I decided to leverage the stacked area chart that's provided in Kendo UI DataViz. This would allow me to show everything at once and over a period of time. At the bottom, you'll also notice four (4) sparkline charts. These show a combination of the data in-question (i.e. HTML) along with the average number of requests for that data.