Loading ...
Matan Stauber, designer/developer
Ronel Mor, instructor
Bezalel Academy of Arts and Design, school

Launch Site

“Exciting visualizations created through a close interplay between design and visual programming.” —juror Gabe Kean

“Wikipedia has become the world’s encyclopedia, but this idea brings that information to life over time. Great idea to bring a different interface to something people already love.” —juror Mark Renshaw

Overview: Around fourteen billion years ago, the universe exploded into existence. Today, you can explore this vast history dating back to the Big Bang with Histography, an interactive timeline. Updated daily from Wikipedia, every dot in Histography represents a historic event, along with videos, articles and images. Viewers can adjust to any time range, from decades to billions of years, and even compare historic events using different categories, such as war and inventions in the Middle Ages.

•The project took four months to produce.
•Histography was a final class project for the Bezalel Academy of Arts and Design.
•The project has evolved many times; previous designs included a 3-D timeline and a maplike interface.

Comments by Matan Stauber:
What do you think are the project’s core features? “Historic events are the core of this project. These events are pulled from Wikipedia and are constantly updated by its database. Histography currently contains 15,000 events, which include photographs, movies and articles. Every dot is actually a historic event that the viewer can engage with. The navigation is another key element in the project, as it enables viewers to choose which part of history they want to see—whether a year, a century, an era or all of history.”

What was the most challenging aspect of the project? “Timelines are typically one of the most popular ways to visualize history, yet they usually remain limited to a specific time period. The reason for that is proportion. Almost all historic events we know about happened in the last 500 years—a tiny, almost invisible fraction of history. How to navigate such a disproportionate timeline was the biggest challenge of all.”

What software, back-end technology and programming languages were used? “The project uses WebGL (pixi.js) for rendering the particles and CSS3 and scalable vector graphics for all other graphics and animations. WebGL was the answer to the biggest technical challenge—how to manage thousands of animated events simultaneously on a web page.”


With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In