 Hi everybody, thank you for coming and a special thanks to Matan Stauber for coming and staying up late to join us on the hangout. So Matan is an interactive designer and developer from Tel Aviv and he created a awesome visualization called Histography.io. We get a lot of visualizations of our data but this one was especially awesome so we asked Matan to come and talk us through how he envisioned and implemented this visualization. Last time I checked it has won 14 different awards across the internet so that's really fantastic. So thanks again Matan and please take it away. Thank you, thank you for having me and I have won. So yeah, my name is Matan and I'm a graphic designer from Tel Aviv. I graduated from the Tel Aviv Academy of Art and Design in Jerusalem and Histography was my final project there. It was created a couple of months ago and I'll kind of walk with you through the process of creating it. So the final projects at least where I study is usually four months and you can do basically everything but the time is four months to do it and I had all kinds of ideas and one of them was I thought about redesigning Wikipedia. This was one of the ideas and as I expanded, tried to expand this idea and think what could be the features of redesigning Wikipedia, one of them was this idea of placing all of Wikipedia over a timeline. But the thing is when you place Wikipedia over a timeline, you're getting everything from the Big Bang to events that happened this week. So basically Wikipedia on timeline is timeline of the entire history from the beginning until today. And as I thought about it, I understood that this is a project by itself, this concept of timeline of the entire history and I fell in love with the idea. So I'll go to the presentation. So what's the first thing you do when you have an idea like this? You Google it. So I searched for timeline of the entire history and I was sure I'm going to find all kinds of stuff and I didn't. By the way, do you hear me? Yeah, we can hear you just fine. So I thought I'm going to find all kinds of projects and I couldn't find anything. So I was excited because I felt that this is an uncharted territory on the one side and on the other, I figured that I was scared a little bit. I thought that maybe there's a reason why I couldn't find any timelines of the entire history. But I was a student and I was bored and I said I'm going to do it anyway. And I started mapping all the timelines that I could find on the internet. So I'll walk with you over very shortly on some of them. This is our basic model, like the standard model of timelines. The horizontal one with the beginning and the end and all the events and times and years are distributed horizontal on the timeline. And this is the most common one. It's very, very common. This is sibling the vertical timeline. It's exactly the same but vertical and it doesn't really matter if we're seeing tweets, so I'm sorry to interrupt you. We're having some A.V. difficulties with the slides. Yeah, Matan, in the soundcheck you were able to share your browser. But we can't see your browser right now. We just see the keynote. That's better, right? No, I wanted you to see the keynote. You don't see the presentation? Yeah, now we see it. So this was what I call the standard model, the horizontal one, and this is the vertical one. And it doesn't matter if I'm showing, if it's timeline of Twitter or if it's Disney Princess, it's always the same principle. Some more interesting projects on the internet. This is one by The Guardian, which is a timeline of the Arab Spring divided by countries. And you can kind of explore through the timeline. And what is great about this one is it's, yeah, it's a timeline and you can see events on it, but it's also infographic. So for example, now I have lots of blue events, I can learn something about, without going to the events, I know something about the period. So when this came out, there was all kind of stuff. Like every good design, they started lots of design like that. So we had all kinds of copies of that. Another project, not all of them are successful. That was by the Wall Street Journal, which said, all right, so let's explore timeline as well. This time they did it as a roller coaster where you can travel through the timeline, little rocky travel, but we can go over so we can ride up and then down with the graph. This is actually the first timeline, the first known timeline at least. It shows Napoleon conquests, or try to conquest Moscow and the brown timeline is the way, third Moscow and the black one is the way back. And it's also infographic, so you can see when it's thinner, the size of the timeline represents the amount of soldiers, the live soldiers, so you can see it becoming thinner on the way back. And this is kind of another idea of timeline that doesn't have to be straight. It can be round with all kind of shapes. This is geological times. I'm sorry, we're still the slides. I'm just looking at the Twitter slide. Oh, I'm way past that. Yeah, okay, there we go. If you could do that, every time you change a slide, whatever you just did. Yeah, maybe the full screen, that would be very helpful. No, can you see it now? So I see the path of protest slide? Yeah, and when I'm doing full screen, you're losing me? Yeah, we're not seeing you enter present mode or full screen mode. All right, so I won't go though. So this is the one that I showed about what the Guardian created. That's working. All right, so yeah, so you can see it moving through the timeline, and you can see areas with suddenly lots of blue dots, means more international response, so we can get some infographic perspective of the timeline. So this is copies of that, and this is another one that I showed by the Wall Street Journal. And this is the one I said about the Polion. And something that I usually like to do when I'm designing, especially for browsers, I usually try to search for inspiration outside the web, outside the browser. So for example, galleries and exhibitions is a great place for inspiration, so you can find all kinds of ideas of how to approach timelines. So again, back to my project, I said I want to create a timeline of the entire history, which is 14 billion years. But the thing is, when you're creating, let's say let's go to the basic model of timeline, the one I showed in the beginning, so the middle should be seven billion years ago, and almost next to the end, we still have 10 million years ago, which doesn't really leave a lot of space for modern time, which means that all modern history is a dot in the timeline of the entire history. So the idea that I had in mind is I looked at maps for inspiration, and I said that when we look at the map, we can see it from, we can see the continent, we can see the entire globe, but then we can zoom into very specific areas, and we can see roads and we can see small towns, and I thought that maybe I could implement this kind of logic into timeline. This is a project that was created in the 90s, but this was kind of my first idea, a timeline where you can zoom in and zoom out to different periods. I think that something that I didn't understood at the time, I understood that there is a disproportion of time, and I understood that you have to zoom in and zoom out, but I didn't understood how big, how far was the disproportion, and I want to show you a project that someone created very recently, I think a couple of weeks ago, that shows it very well. So in this visualization, they said, alright, so what if the entire time of Earth was from the east coast to the west coast? This was the timeline, and then they started going over the timeline, and they said, alright, so this is where the first moon, the moon first created, this is where the first rocks created, but when they get to human history, they have to zoom in to a street level. So now, this is where Columbus first discovered America, so you can kind of get the sense of how tiny is the entire human history regarding, this is only the history of Earth, and I wanted even more, I wanted the entire history of everything, but so I said, I'd create a timeline where I can zoom in and zoom out, and I try all kinds of ideas and attempts, and then I found this one, which I really liked, and I said, maybe I'll create a three-dimensional timeline, where you can pick every point you want, and you can zoom into it, so I can imagine it like Babushka dolls, where you can always have one inside of it, so exactly like the maps I said, you will pick an area and you zoom into it, and you will find a timeline inside the timeline, and I really like this concept, and it started designing an add, try to add visuals to that, and then I said I wanted to be infographic as well, like I saw the one that the Guardian created, and I wanted this to be infographic as well, not only timeline with events, but something that you can learn something more than that, and I wanted this project to work as well. I wrote at the time, I wrote a script that scans Wikipedia for events, and take them out and collect events from Wikipedia, and I said, all right, I have areas in time where I know there's lots of events, and I have areas where there's very little amount of events, and maybe I can represent it in some way, so I tried maybe by colors, where I said areas with lots of events will be lighter, areas with very little, darker, and I tried different versions of that, then I said maybe size, maybe size like this, or like this, maybe I have many of them, maybe they're breaking up, maybe biopacity, so I did all kind of attempts, but it didn't really felt inerrant to the design, and especially when you're doing infographics, you can't have infographics that is too complicated, it makes the visitor, the viewers need to learn, need to understand too much, it has to be inerrant to the design, something that comes very easy, very native to the design, and I couldn't figure this out, and in the same time, there was other problem with the three-dimensional, some was it was very difficult to read, but one other major problem was the idea of understanding where you are at the timeline, so right now you're seeing some kind of timeline where you can zoom in and zoom out, and it says 21th century, but if I remove the 21th century, we will have no idea where are we, we'll have no sense of navigation, and again, I was looking at maps for inspiration, but the thing is about maps is when you look at a map, you can very easily know where you are, you know if you're looking at continent or you're looking at cities, if you're looking at streets, and it's come very native to us, and in this design it didn't, and I think something that designers usually have and myself included is we can fall in love in our design, and it's very easy to let design go, and it's important to stop and review what you created and sometimes say goodbye to it, and I knew that the problem that this design and I had could not be solved, and this was, I was kind of in the middle of the final project, and I wasn't sure if it's still even possible to create timeline of the entire history or not, and I remember I said to myself, take three days, either you can come up with a new design or you leave this concept and you'll do something else for final project, and in these three days, I realized something which I think is significant, I realized that the core of my project is the historic events, I'm collecting them from Wikipedia, I had around 15,000 events, and the events were the core of the project, and not this three dimensional line, and then I asked myself why am I creating a line at all, and I realized that even all of the inspiration that I'm looking at always add a timeline, always add a line into them, and then I said maybe there's no need for a line, maybe, and I'll show you now the first sketch that I had for the new concept, and I said maybe I should focus on the dots, on the events, maybe I should show all of the events as dots, when you move your mouse over a dot it will be bigger, but I'll show the events and not the time, so it will still work the same, it will be, let's say in this screen, so the right side will be, I don't know, 500, and the left side will be 200, so it's still a timeline, but the focus is on the events themselves, and I kept designing it and I said alright, so it's still divided to periods, and you can still zoom into a period, it will work the same, but I'll show all of the events and the moment that I did this switch, it solved everything, because now it's suddenly infographic, you can see areas with lots of dots, areas with very little, you can understand something about what you're looking at, and it's much more easier to understand where you are, because you're zooming into the dots they'll all become bigger, so I was excited, I felt that all my problems were suddenly solved, so I kept making different designs, and so you can see, this is alright, so whenever a designer, whenever we do working with actual information, if it's big data or just infographic, there's always a gap between the way we imagine the data to the way the data really looks like, so this is how I imagine the data, I imagine a very soft gradient, you can see on the right side there's lots of events, and on the left I said alright, so we're going back in time, there's much less, and then for the first time I had enough events from Wikipedia, and I first created the first script, this is how the data actually looks like, so you can see it's very different, very different than how I imagine it, it's not a soft, gradual gradient, it looks very different, but I said alright, I wasn't afraid of that, and I said let's put a UI on that, so you can see it's still divided into periods, I can select each period and zoom into it, and I can pick the events and it grow bigger, so that was still the concept, and part of it was I said that because I'm getting them from Wikipedia I have different topics, so for example I can see maybe just the timeline of inventions or just the timeline of rules, so this concept begin to evolve, in the same time I was searching for how to represent the dots, how to represent the particles, if it's circle, if it's square there were dozens like that in search of the perfect dot, and this is for example timeline with X's, but it was still a big problem because it's very clear that the right side you can see much more dots, much more events, but the other part of the timeline kind of look the same, it's really difficult to know where you have more, where you have less, so that's a bad infographic, and at the time I was thinking, I was looking at sound waves, and I said what is sound wave, sound wave is basically a mount over time when you think of it, so I wanted to use that, and this is the same data only using sound waves, not floating around, but with a structure, so immediately it became so much clearer, you can see exactly where you have more events in history and where you have very little, and the concept was always the same, you can zoom in to whatever period you want and there's another period inside of it, so I tried and I kept designing different colors and I stopped and I said all right, I like the way that the direction that this is going, but what you're seeing now is around 500 years, it's timelines of 500 years, but the problem started happening when we zooming out, this is for example timeline of 10,000 years, this is timeline of the entire human history, so it's, as you can see it's still divided into periods, the massive period, the biggest one which is most of the screen is the stone age, and then we have the bronze age, the iron age, the middle ages, and the Renaissance, and you can see the Renaissance is in the right side, it's scattered, and if you see the tiny line after the Renaissance, this is the rest of the modern history, so this is how tiny is the modern history compared to even human history, and the idea was you pick the period you want and it was even impossible to click because it was so small, and I knew that I had a problem, and now it's very clear what it is, but at the time it wasn't clear, and it was near the end of the final project and I remember for around a month I would wake up every morning and I hated the project, and I would work on it until night, and I went to sleep eating the project as well, and I remember I talked to professors and these other designers friends, and there wasn't an answer, and I wasn't clear to me maybe, maybe it couldn't be done, maybe there's no way to create a timeline of everything, and maybe it's just a bit project I didn't knew, and then one day, and I remember it so vividly because it was it was an important day for me, I was riding the bus and I realized why I don't like the project, and immediately when I understood that, I knew what I had to do, I understood that the concept of maps could not work when you have such a massive disproportion of time, and then I knew what I was supposed to do, I had this idea of creating a controller or a range slider where you can select of all the history and you can pick exactly the periods that you want to watch, and the events the dot will fly around by the period that you selected, so for example you can choose to watch a single year, a decade, millions of years, hundreds of years, thousands, or millions, or maybe the entire history, so I'll show you the way this concept works, so as you can see I have the bar on the end of the page and I can select every kind of period that I want, and the historic event will fly and arrange themselves by that, so for example I can decide I want to watch the entire history, or I can watch five hundred years, or a thousand years, and I can zoom in to a specific period or a specific year, and when I first I went out of the bus and I went to my apartment and I quickly programmed something and I remember for the first time it felt fun, and that's important I think when you're doing when you're doing UI it's important to create an enjoyable experience, for the first time it felt like that, and the fact that... Stop the update again, sorry, well... Should the slides be updating? No, sorry it was such a good moment in the talk, wait, so can you see it now? Yeah, thanks. All right, so again in the bottom of the screen I can change and I can move the timeline and the events will fly and arrange themselves in the screen so I can decide to watch the entire history, or I can watch a thousand of years, or I can zoom in to a decade or to a single year, and because I'm not relying on selecting a period, then you can see above the slider you can see the list of periods, so I can look at many of them or a single one, and if I want to go to a specific one, let's say I want to go to the industrial edge, I can click on it, and I will immediately see just the industrial edge, so the way that the slider works is, again, if the slider will be the entire history with jumping the same way, we will just move by a million of years, so I said no, because I'm creating a controller the sensibility of the controller can change, so I can start moving by a billion of years, and then by hundred of years, by single years, and later I created that gradually, so notice when I'm moving the slider, I'm moving by billions, and then million of years, and then by thousand, by hundred of years, and I can go to, and later it's becoming so sensible, the sensitivity grows so much that I can speak specific years, I can decide I want 75, for example, so like the concept at the beginning, every dot is an event, and when I move my cursor over an event, it grows, and every time I go to a period, the system automatically recommends events, but I can open whatever event I want, if there's an article in Wikipedia, I can read the article, if there's a video on YouTube, I can watch the video, if I had a better internet, I could watch the video, and I could do this for every event, so on the left side, you can see the list of categories, and when I change the period, you can see them rearranging themselves, so now I'm in a period where there's more written literature than words, but if I change it, you can see music suddenly, there's more events in music, and when I move my finger over a category, I can see just timeline of literature or music or words, and I can decide to compare them, for example, I can decide to compare words in music, and I can see only them, or I can compare every category to every category, so this is historiography, basically, there's another part of it, but I'll show it very quickly, it's editorial stories, which was chosen, and it allows me to move back in time, so now I'm seeing when bacteria first evolved, or first dinosaurs, so this is another part of it, and that's it, that's historiography, so if you have any questions. John, did you want to ask the question? Ask it anyway, I'm interested actually, I'd like to hear his answer. Yes, hi, thank you so much for this presentation, it was really interesting to see the making of your project, and to hear the stages that you went through both for the project and emotionally, I had a question about how you handled the disproportion that you mentioned with most of the events being at the end of the scale, so you said that you addressed that by having the sensitivity of the slider change, so is that using a logarithmic scale, or not, and if not, did you consider using such a scale? Yeah, it's a very good question, so the first version of it was I manually created jumps, so I said from this point to this point moved by millions, by this point to this point moved by thousands, and after that I set with a mathematician friend of mine, and we wrote an algorithm that made it works much smoother. Thank you. Yes, I agree with Guillaume, thank you, that was interesting, and we have a question from the Hangout. Hi, yeah, I'm curious, like you have the nice taxonomy of events, war versus music versus whatever, it's simple and it's nice, and I'm wondering how did you get that from the Wikipedia data? That's a great question, in Wikipedia there's something called timelines for Wikipedia, I'm guessing that you know it better than I, but in the timelines of Wikipedia there's basically it's a list of lists, so you have a list of walls, a list of inventions, so that is the categories I'm using, so my crawler basically goes over that list and scans for events, so if the event is under category of walls then you consider it as walls, it's funny because there's some areas where you can see events that are in two categories that repeat themselves, but mostly it's fine most of the time. So I have a question actually, how important do you think it is for your design to be able to code or at least be comfortable working with data? That's a fair question, I think it's important, I don't think this product could have been created without the ability to develop to write code, and more than that I don't think that a designer that would work with a developer could create a project like that, because when you're doing data visualization you have to design while coding and you have to look at the code for visual eye, so that's important. I mean most things, most UI's, most interface, it's fine, you can be a designer and you can work with developers, but I think when working with big data or maybe data in general, you have certain things that you can do only if you can do both of them, and you can see I think in the presentation and process that I went through the way that I had an idea and I could immediately create a developer and see changing, and I think that's important, I think there's not enough designers that can do code as well and there should be more. Yeah, you definitely, I was just taking notes for some folks on my team who couldn't be here, and I think you said data never looks like the way you want, the way you want it to, I think that was a really interesting and honest comment stuck with me. You always imagine what you want to imagine, you imagine the data the way you visually want to see it, and then you find out the data is completely different, it's nothing like that. Yeah, I mean it's interesting to sort of think on a micro level of like a Wikipedia article, there's so much variation in the length, the sections, the pictures, or the images, it's interesting to try to think of sort of a data-driven approach rather than thinking of an article trying to think of sort of representative articles. Anyway got me thinking. Thank you so much for coming and doing this talk, I think we're done with questions, so we're gonna end the hangout, really appreciate it, and we'll follow up with any questions that come later by email. Thank you for having me.