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
