 So, before I start, I have one question for you. How many of you have to regularly present your findings to non-data scientists, non-experts or business experts? Hands up. Okay, roughly half of the room. How many of you use animated charts to do that? Okay, there are like three people. And why is that? Anybody shouting in some answers? It's an open question. Why don't you use those? It's hard. Yeah, it takes a lot of effort. Or at least, to my opinion, but I'm absolutely biased here, it has been so far. And well, basically the main message here that I came today is that it shouldn't be that hard anymore. And we're working our asses off actually to make it easier for you to use animated charts. Yeah, I'm just going to tell how we got here and how the technology of Visu looks like right now. So, without getting into too much detail, there is a close friend and now a co-founder of this early stage startup that I'm from, of mine, Andrew, started a lengthy research a couple of years back. He tried to identify the common characteristics of all charts because he realized that this is the prerequisite of creating something that will, at least to his hopes and mine as well, change how we deal with data, we work with data. And in order to do that, he researched and tried to identify how different charts are being used to represent the data, what are the characteristics, and these are just some illustrations of his research. And well, he realized if he could make a single engine that can generate all different types of charts, then that would be capable of animating between these chart forms and that can be sort of like a new level in data visualization. This is a tiny piece of a huge canvas where he basically experimented with the different ways the animation should happen. And yeah, like fast-forward some time forward and you'll get this. So we basically, even though originally everybody told Andrew that this cannot be done, together with my co-founder Simon, they managed to build a prototype that could do these nice sleek transformations between different chart types. And that's like the core of what we do. So what are the benefits of having this? So first an obvious thing is regarding storytelling. So when you try to tell insights and share something about your data, for example these four charts show the same data, but the connection might not be too obvious, whereas if I use an animated transition, then no more explanation is required. You will simply just look at it and because you use basically a different type of your brain when you're evaluating like a moving element, it becomes natural what's going on here. There are actually plenty of other facets of the benefits here. We feel like it's really close to turning images into movies, so being able to see the components of a composite index or just drilling down into a complex chart and see if a stack chart or like an element of it goes against the trend show changes over time or just basically turn a simple chart into a story that unfolds as the animation is being played. You can zoom in on elements, you can add new elements and for the audience it's going to be super easy to follow along because the animation is keeping the context actually. That's I think the most important benefit of this. So what we did with this at first when we only had the prototype and it had a very like let's just say unique type of scripting language that RCTO created. We built some stories with it for Reddit and other social platforms. I'm happy to show you some of those because I promised some entertainment right before launch. So as you could see they've become quite popular. So this one got over 35,000 upvotes. It's a super super simple story showing how much cocoa bean farmer gets from a one dollar chocolate bar. And as you can see I mean the basic insight here could be shown in plenty of different chart types. It's super easy. The animation here builds a narrative, creates tension. We wait, we still have to wait until the share of the farmer appears and it brings it to more context. I think it could have been even more popular but because of the ad we placed there Reddit admins took it down after a while even after 37,000 upvotes. Or this is also a pretty simple one where the animation is basically just a way to build a story here. It shows the area of the continents and then the share of the population globally. Sorry the quality sometimes trembles. And then we add the share of GDP as the last result. We also created an interactive piece out of this one. So as you can see even though more than 15 percent of the population lives in Africa only 3.1 percent of GDP is being produced over there. And yeah another example there's one about the elections but I'm not going to show you that one. We all know the results already so it's been very popular two weeks before the election. This one is about especially if it starts let me see okay looks like you have we'll have to check it out for yourself. It's about you can find that you just look for Vizu HQ on Reddit and you will find all our stories. This is about how much radiation the Chernobyl liquidators had to endure when they were sent out on the floor on the roof to create the radioactive debris and it shows it in real time. So these were some of the things we created back then and we also built some interactives. This one shows the wealthiest Hungarian individuals and there is like a fun insight I wanted to show you. So these are the 20 people back in 2019 and if we go back a couple of years we can see this so you could obviously move beyond the years and this is so there are two people you should be paying closer attention. Actually the one right now on top is the former aid of our prime minister and very close friend and the one right at the bottom well he's just the closest friend from secondary school who had a very specific career to say the least. So this is when the guys broke up I mean I'm just going to show you the change in the value so as you could see something has definitely changed over the years and that's when Mr. Misatovich started to get wealthier and wealthier as you can see so even if I show you the change in percentage I even had to move this button downwards so that I have space for the guys yeah getting actually on top so he's now the wealthiest individual in my country yeah and this is all nice right so it proves that people like animated charts and and and it's easy to get their attention with them and it's easy to tell stories with them but we're a startup we have to find a problem and at this point we have the solution so when we were looking for a problem we identified one that that brought me here so that that is that is about you about about the data scientists so based on I mean this is a really nice summary from from Anaconda the state of data science 2021 I really hope the new version is coming out in a couple of weeks I don't know if anybody knows anything about that just let me know basically I'm not going to read all those numbers out but the the main take away here is that it takes a lot of time to build those charts and presentations it's important businesses make crucially important decisions based on those and company leaders actually struggle to make sense of the presentation and the data that they are being shared so we thought it might be a good idea to work towards this direction and and try to help you the data scientists basically do a better job in sharing these crucially important insights with the business guys we built our technology completely open source the core of it the one that I used when we built all those stories for Reddit or is in C++ we had over I think even 40 million views we had 200 thousand upvotes and we had people who signed up because they were interested in what we do then with using web assembly we built an open source JavaScript library that we released last September we had a plethora of positive feedback it was even embedded into live products and a couple of hundreds of GitHub stars and then just this March less than four months ago we released using a similar technology to what plotly does our our Jupiter integration that where you can use Python to build animated charts and we were able to gather some more GitHub stars with that we are very focused on on being able to embed our technology we it's pretty clear that that these solutions people used to to build and look at charts they are very divergent there are these notebooks and BI tools and and everything in a mix so our focus is to make our thing available in as many platforms as possible so within three months we managed to make it available on all these platforms even in PyScript that is out there I think maybe for two months now and and in Mercury with which you can build interactive web apps there will be a presentation from Piotr the person like the the central figure building Mercury tomorrow you should I think comment and and and look at his presentation as well and mode which is which is a BI tool already so yeah with all that story let's see how how I pie visa works right so I think that's what you're mostly here for at least I suppose okay so I'm gonna give you a couple of examples and also I have some very important announcements to make because basically we were working around the clock in the recent weeks so that we can release some new features that would hopefully make it easier for you to use our tool but first things first you can use pandas here as the first step of this this is a juvenile notebook I'm just hacking the CSS a bit so that we are going to see the results on the right so we're gonna read the CSV file added to a data frame this is how the data looks it's basically some made up sales information from a company that has four regions north south east and west four products shoes handbags gloves and accessories and some sales and revenue information connected to that so the way we do the first chart is we set the height and the width and then we tell we add the data actually at this point and then we just tell visu or I pie visu that's the name of the the I Python version to filter the records based on the product and only include the shoes and we add the series so the region to the x-axis the sales and the product on the y-axis we add the number of sold products on the label and and we gonna color the which is going to be apparent in the next step also based on the product and we add the title it's easy as that and in a second step I'm just going to modify the filter yeah I'll try but I think is it is a little better now okay great great thanks for letting me know so um yeah and in the next step the only thing I changed is I changed the filter that that I use so it's gonna include shoes and handbags so I'm going to run this cell and here you go shoes appear animatedly obviously next step I'm just going to add everything except for accessories so gloves appear and then as a last step I'm just going to add the last type of product so basically this is just a super simple use case how you can add things one by one so the next step will be maybe not that easy to follow along but I'm going to tell you in advance we are going to change from the sales of the product to the revenue so the only thing we change is we add that to the y-axis and then also to the label and obviously there'll be some changes within the ratios here so as you could see for example handbags made a lot of lot more money than their share in the in the number of sold items that the sizing should be a little bit corrected it's because of the zoom level that I'm using here and there's a last step and here I'm and as you can see I'm just calling the animate method over and over and over again to to make the animation happens and this is the only thing you need to do I'm going to do it twice in the last step and this is when we are just going to switch the orientation and then just summarize all of the revenue data based on the product in order to do that we just took down the region from the x-axis in the last step that's the only thing we did which is all very nice at least I hope I mean again I'm totally biased here there are a couple of issues so one it has a generic logic data scientists we showed this before told us that it is really hard to comprehend so you might not be super clear what kind of chart you will draw as a result if you're just adding series to accesses and channels because in every other solution or at least like 99% of them you start with a chart type right you you say that I'm building a scatterplot here or I'm building a stacked column chart here and yeah that's a fair point so one of the reasons my my city didn't have any sleep last night was to release this new feature where we use presets chart presets I'm going to show that to you in a second and the other thing is that it only allows here one directional use so we went through the cells one by one and if I go back and rerun this cell then the end result doesn't make so much sense right so it changes the chart in a way that that is not easy to comprehend we just wanted to get back to the previous state so these were the two issues we identified when we when we introduced I pie visu and when we showed it to some other people so but I mean as I said some important announcements to make we have the presets now and I'm going to just show it to you in another example in the first step we just use a different dataset and we I just set the style right up here so that the the remaining of the code will be more simple basically this is the the amount of revenue the different music formats generated in the US between 1973 and 2020 so like how many obviously in 1973 they didn't make any money out of DVDs but later on that changes I can tell you that so yeah this was the original syntax that we saw we just put a series to access and channels and and we set the geometry and we set the alignment this way but from this point on we can just say that we are going to build a stream graph just by adding config dot stream and it's gonna say that okay I want the year on the x-axis I want the revenue on the y-axis and I wanted to be stacked by the format and if I run this cell yeah it's oh yeah this this time might be an issue so this is how the chart looks with the original syntax and yeah basically it draws the same chart this way so as you can see it's a lot shorter and we really hope it make more sense to you but if not just let us know I mean there are basically two messages that I came with the first one is that you can build animated charts too easily and the other is we're here to listen we really want to make this something that you want to use okay so just to make a story out of this as well we are going to use some very simple you can actually combine the two types of syntaxes so I'm just aligned I just switch the alignment to stretch and then you will see the the share of these formats just like that after one step then if I switch back the alignment to center we get back to the original stream graph we can there's also nifty little feature when we can split the elements and we can see them side by side so you can obviously see the individual trends and and as you can see them next to each other it's easy to tell a story of that with that like applying a filter you can zoom in either on the time frame or or just some specific formats in this regard so you can see that vinyl and streaming had quite a an opposite way of generating revenue but as you can see when it has a comeback in the recent years so it generates more and more revenue and yeah I'm going to just set the filter to non and and the split back so this is how my wife says when the elephants kiss yeah that's that and and as a last step again I have two versions of the same step this is the original syntax axis and channels but I just want to make a line chart so I'm going to use config that line I tell what what's on the X and the Y axis and I want to tell that it's divided by format and if I run this cell you can see the elements right next like as a line chart and you can compare the trends much easier I haven't added in my in this example but actually we have a tooltip feature so similarly to plot these charts you can hover over the chart and read the values of even for of data that is not shown on the chart okay so looks like we addressed at least or one of the issues the generic logic the other issue we have is one directional use so before we go to that point you can find all this in the in the repository just look for a visu HQ or visu and you will find a step-by-step tutorial and plenty of examples right here so just if you click on the examples this is where you end up there are these preset charts that we released last night and and like for example to make a percentage column chart you just have to use this so if you click on any of the thumbnails you'll get to the code of that specific example we thought it might be easier for you to you know just get acquainted with it we understand that learning a new library is always an investment we we hope you will you know like it so much that you actually invest your time in it but this is how we try to help for example a waterfall chart is also available and then there are plenty of and it's just like config waterfall and this is it's like one line of code and yeah there are plenty other presets there then the one directional use case so we added a new package also yesterday called I pie visu story it changes the syntax a little bit it it it adds slides and steps so basically a step is a chart the same thing that we built in the previous version with the chart that animate method and the slide it can be just one step like in this case or it can be multiple steps let me quickly find one where it's the case it should be step three I think yeah so in in slide three there are actually two steps and what you end up with is this the presentation right from the notebook you can use a clicker you can use your keyboard you can use your bottom these buttons in the in the bottom of it I just clicked on the full screen to make it full screen and you can make a fully-fledged animated data presentation right from your notebook with this much line of code so you can go obviously back and forth this is the step three that had two animation steps within I'm just getting going backwards it's it's really you can go to the end and then it's gonna it might fade because of the different steps that that happen in the in between but yeah you can just tell the story stand in front of the audience and and you don't have to you know save your charts as PNG and added to PowerPoint or things like that that at least we heard from other data scientists they tend to use quite often yeah I'm I think I'm still yeah I'm pretty much in time very much so yeah there is this this iPad is a story repository that you can that you can find also on github we would love you to check it out and and let us know how you want to use it and last but not least so please reach out to us please let us know and I mean I'd be happy to take any questions if you can drop us a star on the repose we'd really appreciate that and there's an unusual thing I would like you to do that usually I think presenters don't ask it so often please pick up your phone and and and if you can especially those of you who have to present your findings regularly if you can go to this URL right now I mean and spend the next two minutes in answering some very basic questions about your experience I would really really appreciate that I I sorry I don't do like Irish tap dancing or anything else to keep you entertained while the others are frantically typing in results to the to the survey but I thought I would want to use this opportunity there's one more thing I wanted to do is just to prove the guys back at home that I actually arrived here and and made this presentation is to make a photo of myself and and you in case you don't want to be on the picture yeah I mean just you won't be recognizable I can promise you that but maybe just turn away and and for all the others I think you just yeah just say visu right one two three we do yeah thanks as you can see I'm not very experienced this but I tried my best okay while the others are kindly still filling out the survey I'm happy to take questions and thank very much for your attention yeah one really last thing from me technical note to the first one is there is a like a space an open space right the on the floor in on the top so on the second floor and I'll be there for the second half of the lunchtime so if you want to just sit down and take a look at the visu in more detail with me I'd be just come join me I'd be happy to show you anything you might be interested in and the other thing I have some stickers if you want to show it support or just you know show that you know what visu is please take some and yeah here I am okay I'm definitely gonna use this library if there any questions please come to the front here where the microphone is you mentioned that you're a startup yeah how do you make money oh there is actually one backup slide that I prepared with because everybody asked me that and this is this so now we are aiming our tools at data scientists the creator of insights we want to provide them with a free service we want to keep it free and open source and we actually want to enable our tools to be available within bi tools the simplest way to say it companies don't have a notebook budget but everybody has a bi budget and already we are working closely with the Dutch company called info topics they build extensions for tableau and they managed to embed visu into tableau already so we are hoping to to to to rip the business guys instead of you okay everything that's being done is it being done locally on your machine or is some of it going out to a visu server no nothing goes out to the visu server brilliant talk thank you very much it's not a technical question more but more a question of asking advice because if I make a presentation for management often they will want to use it later to present to the board of directors or to have in store to look at later so what do you recommend the slideshow is perfect but I can't really hand them a notebook should I export the animations or you're addressing a crucially important point thanks for that we are working on enabling the the export of the animation as like video sequence that you can finally embed into PPT so we know that that's going to be a killer feature but yeah so actually we that there is a gap here that we we also identified this is why our business strategy is be to be able to use all this material within the tools that business users use so we are very focused on that we don't have it yet we are working on it thanks but it's similar if you're familiar with potley and bokeh they have they do like HTML exports yeah great if you can have that functionality thanks actually we we also support that I mean you can just save the notebook as HTML and then the presentation will be fine I exporting the actual yeah just just the yeah I'm so just the dynamic visualization I will have to take a look at that I have to admit I'm not the technical guy among the founders but that's a great idea and do you think that business users are capable of or would be open to just receive an HTML file from the company server and open it and then play with the presentation yeah and my company I do the same thing with bokeh and it's actually one of the biggest problems because most people don't want to look at a notebook or a screenshot yeah I want to really showcase the dynamic ability of the graph but the HTML is fine yeah okay good thanks thanks for the feedback thanks for the talk as well really cool to see how everything is like encoded by axis instead of needing to comply with some standard plots thank you question on that for me is there a way to you spoke about interactive charts is there a way to combine multiple charts so if I like have a bar chart of my top locations or something like that can I filter another chart based on that and put them together in a dashboard that more like the later on yeah no no no you can actually so we created a chart it was just as I said I'm not the technical guy there but the chart so as you can see here we just second so yeah we created chart in like this and you can do chart to the same way so just build a version of it and then putting one next to each other it's it's really like might be just an issue of using CSS or something like that so any and it can be done within mode for example that be I tool so it's a thing that can be done I'm gonna make an order for myself to to build an example when this is being used because we are big believers of this dashboard type of use cases and yeah thanks for bringing it up all right thank you yeah thanks for the presentation so does this only work on Jupiter notebook or can we use the package in visual studio let's say you can you can use it in visual studio with the Jupiter add-on extension of visual studio I do that all the time okay perfect thanks hello great talk thank you I have a question is there a feature or a plan for one that takes in say data from an endpoint or live data and use the animations to animate the live data as it's coming in yes yes absolutely we we actually already have that in the in the JavaScript library and and you can you can refresh the data so you don't necessarily have to add all the data in the initial step another great question thank you very much by the way with the slideshow though you have to add all the data in the first step and and you have to use the filtering capability in order to show just like certain parts but with the simple Jupiter use case so just by using ipi visu you can actually add new data elements and and you can do basically what you just said so connect live data into it but like do you need to press a refresh or like trigger it or does it do it automatically that's I mean I think you would need to recall the the animate method for for that to animate that's that's the only thing you should do thank you very much thank you okay looks like you still have some time before lunch or to talk to me about visu I'm just going to head up to the open space and yeah please feel free to join me there okay thanks a lot Peter