You know, we use ad-blockers as well. We gotta keep those servers running though.
Did you know that we publish useful books and run
friendly conferences — crafted for pros like
yourself? E.g. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.
Designing with “big data” is a challenging task. Matan Stauber, however, took it to the next level. With an impressive outcome. Having studied Visual Communication at Bezalel Academy of Art and Design, Israel’s national school of art, Matan realized a very ambitious final project: an interactive timeline of our galaxy’s history — 14 billion years, from the Big Bang to today.
We talked to Matan about Histography41, about the idea behind it, and how he managed to bring it to life. An interview about stretching the limits of what’s possible.
Q: Matan, what’s the idea behind Histography and how did it come to be?
Stauber: Timelines are one of the most popular ways of visualizing history, but they are limited to a specific time period. Histography is an interactive timeline that allows viewers to explore all of history, across 14 billion years of history, all the way back to the Big Bang. The site draws historical events from Wikipedia and self-updates daily with newly recorded events. 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.
For a while before creating Histography, I was interested in Wikipedia and how a redesign of it could look like. One of the features I had in mind was a view where all of Wikipedia’s events are arranged on a historical timeline. Since Wikipedia contains events from every time period we know (from this current year to the Big Bang), a timeline of all Wikipedia events is a timeline of all history as we know it. I found this concept to be so exciting that it quickly became the brief for the entire project.
Q: How does Histography work from a technical perspective?
Stauber: I created a system that scans Wikipedia, searching for historic events, indexing them, and trying to determine how important each one is. For every event the system then asks Google for an image, YouTube for a video, and Wikipedia for an article.
Imagine telling a person: “Go to every Wiki page you can find. Every time you come across a date and you think it’s a historic event, write it down. For each of them go to Google and ask for a photo and to YouTube and see if there is a relevant video, and give each one a rating score of 1–100. Events with a Wiki page will get a higher score as events without. Longer and popular articles will get higher scores as short and unpopular ones.”
The reason behind the rating system is that there were a lot of very niche historic events that are probably not relevant to most people. My first experience with Histography was exploring for a very long time before I could find events I could relate to. The solution was to promote the more “important” events, the ones people are writing and talking about. You can’t really tell, but every time you move your cursor, the system tries to pick the more interesting event out of the events in the radius around your cursor.
Q: Could you explain what is going on behind the scenes the moment a user has selected a timeframe?
Stauber: Every time you select a timeframe, the system constructs a new graph layout. Each column in this new layout can represent anything between months to millions of years (depends on how big your selected timeframe is).
The next step is that each of the thousands of dots on the screen gets its own new location. Every millisecond or so, the system runs through all of the dots and moves each of them slightly closer to their new location. This is what drives the animation. Because each dot has it’s own speed, it feels as if the particles come flying in, not like a robotic movement.
When I started thinking about how to design such a timeline, one that can support billions of years and thousands of events, the main concern was proportions. The series “The Cosmos” once calculated that if you place all of the galaxy’s history on a one-year calendar, all of human history will fill the last second of that calendar. I knew that in order to create a timeline of all history, it cannot be limited to a specific period. It will need to be able to show events on different scales and to allow people to focus on a single year as well as billions of them. Trying to answer that required many different design concepts and explorations — from 3D timelines to Matryoshka-type designs, and going back to the drawing book time after time.