Behind the scenes: visualizing the evolution of the web

Deroy

Sergio

This guest post is by Sergio Alvarez, Vizzuality, and Deroy Peraza, Hyperakt, in collaboration with Min Li Chan, Chrome Team

At Google I/O this year, we launched a new version of The Evolution of the Web, a project visualizing the history and pace of innovation in web technologies and browsers. The Evolution of the Web traces how web technologies have evolved in the last two decades and highlights the web community’s continuous efforts to improve the web platform and enable developers to create new generations of immersive web experiences. In collaboration with the Google Chrome team, the team at Hyperakt designed the interactive visualization while Vizzuality built it using HTML5, SVG, and CSS3.

The visualization included 43 web technology "strands" across 7 browser timelines to represent major developments on the web platform. On hover or tap, each strand is highlighted to reveal intersections that tell the story of when browser support was implemented for each new web technology. To provide additional context, we developed a secondary visualization to illustrate the growth of Internet users and traffic.

In addition, this year's design includes the option for viewing the visualization in both day and night mode, making it ideal for large-screen projection.

For the teams working on this site, it was interesting to note that we used roughly 60% of the technologies highlighted in the timeline to build this visualization:

• We used HTML5, SVG, and canvas to draw the visualization, alongside CSS3 transforms, rotation, and perspective for immersive animation and data interaction.
• We used CSS3 to kick off the timeline with a 3D-like animation, as well as the panning and zooming functions, toggling between day and night modes.
• Additionally, we took advantage of the D3 JavaScript library’s interaction and visual frameworks.

In working closely with the Chrome team, we tested multiple approaches to find the best way to bring to life initial design concepts and build a sleek, responsive visualization. In fact, during the project's development, the Vizzuality team came across an SVG rendering issue that prevented the animation from running smoothly. The Chrome team looked into this bug immediately and promptly enabled a fix the following day – a glimpse at the web evolving in real-time, if you will!

We're amazed at how much the web has advanced over the last several years, and the pace of development is only accelerating. Never in the web's history has it been as exciting to be a designer or web developer, and we hope that this visualization captures some of that spirit.


Deroy Peraza is a founding partner and creative director at Hyperakt, a New York City design firm that helps change-makers tell their stories. He was born in Havana, Cuba, and lives in Brooklyn with his wife Jenna and his son Luco.

Sergio Alvarez is co-founder and lead designer at Vizzuality and CartoDB, a NYC-based company working on data analysis and visualization on stories that matter, such as climate change or biodiversity loss. He is a good runner and loves to ride his long board.

Posted by Scott Knaster, Editor