 Thanks very much and thank you for coming. I really appreciate that. So, yeah, I'm This the CEO and founder of this small startup. I came from Budapest, Hungary We are really just small operations. It's been the three of us full-time ever since and Right now we just managed to close our new funding rounds So we are going to scale up to have even 10 people which is great news actually, but yeah so it's a small operation and Yeah, before I get started I have first things first. So I will try to show you a lot of things Let me know if if it's too quick or if you don't get it I'm happy to be interrupted and answer questions. They'll be hopefully some time for questions towards the end. So But again, I'll do my best and I would also like to get to know you a little bit So I have a couple of questions for you and even during the session. I will try to make you work Be warned. So how many of you are data scientists? Please hands up Okay, roughly half of the room. How many of you have to regularly present the results of your analysis to a non-data scientist? So business people looks like almost everybody who put their hands up in for the first question. Great How many of you? I mean, this is a sensitive one. How many of you regularly? Screenshot your matplot lip charts or similar charts and then just copy and paste it to PowerPoint when you do that Yeah, a lot of people cool. How many of you use streamlit regularly? like 10 people and how many of you have heard about the visu and I pie visu before this conference before this session Four people great five great great. I love new crowds. Cool. So let me get started. So visu We built at visu Generic chart morphing engine We basically so based on the research of one of my co-founders We employ a single logic to describe a plethora of different types of charts and because of this single logic We can interpolate between any of the charts that are expressed on our engines interface So that's the basic of it and that's why we can do these nice smooth transitions Between between chart types. That's that's pretty unique. At least I haven't seen anything like it before and So the next logical question is like why Will you do this? What what is the purpose of all this? So basically we have a vision that we're working towards which is to build a graphical user interface for data We think that if we can employ Animated charts and help people interact with data in a visual fashion Then it could be used for different use cases from exploration to storytelling to reporting and dashboarding Even to forecasting and planning now as I said, we're a small initial operation So we decided we need to focus and we shifted our focus first towards storytelling because that's where the Benefits of animations are at least to our experience is the most Straightforward are the most straightforward. So why do you think animation means anything or makes sense to use? First of all static we think is abstract on one sense. So for example these four charts show different views of the same data set but without your expertise and without Being explained like what is we seeing on each and every chart making the connection between them can be rather hard Whereas if I connect these views with animation it becomes very intuitive It's like no further explanation needed everybody understands how these views relate to one another It's because basically we're using a different parts of our brain to decipher movement Then the abstract decoding task of charts Couple of examples of how animated transitions could be used. So like for example for drilling down in a Like in this case as you can see in a more complex way showing differences or Like showing one part of a stack chart and show if there's like one piece that that goes against the trend You can you can change very nicely from aggregate aggregate values to distributed values you can you can show change over time with the help of these Racing bar charts that were so popular at one point that they were banned from the data is beautiful subreddit and Yeah, so so also you can actually turn one chart into a whole story This one shows how many smartphones different companies sold back in 2016 and and yeah Then we added the amount of money they make on this So just one chart shows this these leagues of companies And and and gives you this sense of magnitude Due to the animated transitions So how we developed this technology and how we used it actually the core engine this this generic chart morpher that I told You about that we built from the ground up is in C++ we use web assembly to compile it in the browser and After we received our initial funding round in early 2021 we released our first open source product, which is JavaScript library that it was intended to be used obviously by JavaScript developers to embed Animated charts and in there in their online products And then we shifted our focus towards data scientists We released our initial product last year in March, which enabled everyone to use animated charts in in Jupiter notebook and similar Tools and then just last summer in Dublin and Europe I turn 2022 I was happy to announce this extension of our tool call I pie visa story that enables you to build present and share Animated data stories right from a Jupiter notebook or a or a similar tool so we have a ton of integrations now plethora of different notebooks and We are working together with pie script with bi to a mode But most importantly, I think the integration with the stream late and and and lastly panel Opened up new use cases for us that I'm going to just showcase you a little bit Actually, the panel integration is the newest among all of those We would definitely need some people who could help us build more examples Using that platform because it's brilliant and I know that we can use We can showcase a lot of the capabilities that our tool has and and hopefully you can build useful stuff with it So without further ado, let's get down to coding I will go quickly through all the different iterations the first show you I pie visu so that you understand the logic Then a more advanced version than the story and then we'll get back get down to the streamlit version because I think that's how you Can quickly understand how this is set up on this bit li link. You will find a repo folder That looks like this There is like a friendly welcome message there But even more importantly, there are some useful links that will get you to the streamlid after that I'm going to show you and our documentation side and our slack workspace and there are in the notebook folder There are some notebooks that I've prepped for you. These are partly the ones that I'm going to just show you Okay, so if you if you want to follow along or if you want to later on Take a look at everything that we do here. Just go to this repo. Okay, so I pie visu basically works with Yep, absolutely, it's a bit dot ly slash hash visu hyphen Europe Python No worries Can we move forward? cool Already so the basic logic of I pie visu is you have one method the animate method you call it once You'll get a chart you call it twice You will morph the initial chart to the second one. It's easy as that the the animate method has three arguments Sorry, I'm not a developer some sometimes. I don't use these words properly You have to add the data to it you configure the chart how it looks and then you style the chart You also have the option to fiddle with the animation options We try to make these transitions as easy to understand as possible But sometimes you have a specific use case and you just want to fiddle with those settings as well So for a for initial example, I'm going to use the Titanic data set We you can use pandas data frame. You can install our tool from pip or conda so it's it's pretty straightforward and I just Declared that the p-class thing is a string. Otherwise I by visu would think it's a it's a value and We would end up having charts that we never intended to have So, yeah, that's basically it we added a column of count which is one for every passenger and So I create the chart object I can set the width and the height and I'm going to call the animate methods right away, so I have The count the value that is one per passenger on the x-axis and the sex on the y-axis I also added the count on the label So it appears as a label on the markers and I added a title to the chart and that's about it So it was I guess pretty pretty straightforward The default geometry is rectangle. So that's why you end up with a rectangular chart like like this one And as you can see I pipe is automatically Summed up the count values for each of these categories We are going to like in the next week or so introduce new aggregation logic So you could count the average the minimum the maximum actually do the count with that yourself But but initially it was only the sum logic and then in the next phase I'm going to just add the survived which declares if a passenger died or survived the crash on the X-axis and also on the color scale Resulting with a chart like this. So now we have a stacked Horizontal bar chart and as you can see the labels adapted to it so now it's not on the right side but in the middle of the markers and And we have the legend that appears telling us that the blue markers show people who died and And the the green one is the one that who survived. Okay, and and lastly I'm going to just remove the survived Category from the X-axis and add it to the Y-axis me ending up in a grouped bar chart So we just rearranged the chart like this. There are a couple of other Parameters of the of the config Object here So we have the axis and the channels that you could give any Continuous any values one of those and any number of categories to you can set the geometry the coordinate system You can sort the the markers you can align them you can add a title as you so I mean we don't really have time to get more into it But if I set the geometry to circle then we get to circular elements if I add the count the same thing That's on the Y-axis and on the label to the size of the markers Then they would have different size and if I switch from the Euclidean coordinates to polar then I'll end up with a chart It doesn't have any sense I mean it it still fits all the necessary Requirements of a chart, but we never use it because it's so hard to read and so there were a couple of issues We phased early on one of them is that people never Used this kind of logic to build charts this very generic like adding data series to access and channels And also you can build charts that don't make sense You do want to build charts that you know what you will end up with so we introduce presets very Like quite after we did the initial API and here like for example with a stack column chart It works like you add to the config part that that you want to build a second column So you set it up right away, and then you have a specific parameters for that type of chart I mean it's pretty obvious And by the way, I have these playground notebooks in the repo folder These are specifically prepared for you to just fiddle with the API and understand how it works So I'm not going to show you all the examples because I want to spend more time on the stream little bit But here we have a data set that shows how much revenue different music form is generated in the US I create the chart and now I'm going to use a preset like I'm going to set that it's a bar chart and And use those parameters I'm going to turn it into a group bar chart because I want the bars to be colored differently I add some so this is the styling bit I'm going to change the font family the font size add a new color palette Change the number format and things like that And as you can see everything I change when it's possible will happen in an animated fashion So that you understand what you changed and all the settings that you added to the chart object We are gets preserved for the next phase and and and gets so you can count on those and here It this is how is it turned it into a bubble chart? stacked bubble chart Yeah, and so on that that's that's the presets the other issue that we had is like it's very like hard to understand what the direction here is and And going back and rerunning cells can can mix your chart ups very badly so that's why we introduce this iPad is a story thing which introduces basically two new things steps and slides and It's just like they are the same chart objects But you can make the animation stop there So if I I'm going to just quickly run this so that you understand what I'm talking about And I'm already running a bit behind schedule So we basically added these buttons beneath the chart that enables you to switch between the views that you generated Instead of having to rerun cells and everything so you have the presentation opportunity you can go full screen You can export it as an interactive HTML file with the story with the data included So you can just send it in an email and so on And and basically a step is so like a slide is is a view where I stop and One slide can have multiple steps as you can see on the picture Why are we go through before stopping at the final step of a slide? Okay, so that's the hierarchy and Yeah, so so you can obviously build a different we have event handlers to just personalize the charts to your needs and I'm just going to run this so a couple of like to and this is how you export it So story export to HTML is is the way you you generate the HTML file So now we have like for example this option that splits up a stack chart and show you can see the trend One by one the filtering is actually the zooming bit So I just added back the defense budget of the US to show the filter And here I'm going to just zoom in again with the field with filtering the data actually shown on the chart And just rearranging them so that the viewer can compare how the different Like bits changed over time. All right now comes the time when I want to make you work So but it's gonna be just like two minutes of your time Survey time because we're working on a new API the newest issue We had is you don't like dictionary-based approach. You can't have the tab Assistance in the IDE. It's harder to debug the code and everything. So we're working on now a new Python API and we built a survey in which you can see actually One chart and then under it three different versions of this this new API And we would just like to ask you to pick the ones that work the best for you So coming back again, it's just bit.ly IPa visu hyphen API with capital API If you don't have the time for it to fill it now I'm just happy if you just you know make note of this URL and and but it but I'll give you a minute Okay to to get valve into it And if anybody has any questions right now, I'm happy to answer while the others are filling out the survey Yes, please Question was if it's possible to re-import the exported HTML right now. It's a one-way ticket So it's you build a story you save it and then it can be just shown shared presented but It's it's part of like it's kind of like our first export format. There are others on our road map So video obviously and the the ability to export it to PPT is also there We already have a tech demo exporting this to reveal the JS which is behind slides.com. That is an online presentation tool So but that that's a absolutely right question Any other question we have at this moment or Righty What about turning our attention to streamlit? What do you say or you're still busy filling out the survey? I'll let you do that Yep The question was if there is a chance to export things to matplotlib, or is there any like interoperability? Not right now So we are thinking about it would be super happy to work with the matplotlib project. The problem is that We haven't had the resources to do that and yeah Okay Like I just had no doubt I have ten minutes left from the whole of the presentation and I want to be give you some time for questions So let's focus on the streamlit bit, right? Okay, so streamlit is a way to build data apps using only Python now on the right side You see an app and on the left side you see the code behind it and basically there So first things first I have to express a gratitude Once again, and I will do that plenty of times to mr. Zachary Blackwood who works at streamlit and who built bidirectional component via which I pie visor could be get well integrated into into the streamlit and basically you have a new Object called visu chart that you want to use you create a chart you add some a data frame to it So it's pretty much the same and then it's like in in streamlit you have these controls so for example the ST checkbox is an input widget it creates a checkbox that calls swap and the whole code here says that Do this so create a chart with the cat so the category and the accent the value on the y and then if we call if you Click on swap then just exchange these and that's what happens So basically just switch the chart that that's fairly really like straightforward And that's super easy as simple and there's an output We're calling the chart that show method and then we just you know, that's that's being shown there Also because it's bidirectional you get any some information about the value of the click bar here So you could get value out of the the visu component Where and what you clicked? There are a couple of apps here You get to the same app if you follow the link in the repo folder that I showed you another simple example is a slider Which employs actually this filtering mechanism that I mentioned Basically, there is a slider here that says pick a year minimum value 1973 maximum 2020 This is default value This is here and there is like one animate method where the filter is applied in a way that record year equals the selected year so if I change this Then we get to a different year and then it's like pretty straightforward for anybody to use I guess if I change this to have only Like less than a year then it would be like up to that year the And and I if I rerun this app then we'd have a lot bigger value Because it would include all the values from 1973 up to 1988 It's it's that easy to to change these kind of things Okay, and we have some styling, but that's not very important here Another functionality that Zachary kindly implemented is the drill down It lets you just if I click on any of the bars I'll zoom into that and drill down to a different category So I'll drill down to that year as easy as that and if I click on anywhere else I go back to the original view you can you can have a functionality like this and it's again pretty pretty straightforward So it's like there's the bar clicked So we get from the chart the market categories year and then when it's when there's if Barclay None we get back to the original view else so when the bar is clicked Then we just filtered to that year and rearrange the configuration of the chart. Ta-da. We drill down. It's as easy as that We can build explorers like this one where the user can Actually themselves generate different views. This is just some bogus sales data You can switch from sales to revenue you can compare by product and region and You can also like switch the polar coordinates You can rearrange the markers to be Like sorted like this and and even the styling is available. So you can set the background color a very ugly like to be very ugly It's it's again super super straightforward. It's like actually it's just connecting these input widgets to to certain configuration objects and then add those two So this is basically where we say what should happen if this and that is selected and then just be gilded one config And then put it to the chart. So that's about it and the lastly the last example I wanted to show you and then we'll get down to questions is Is where you also have an explorer. It's a more bespoke one I just make it full screen so you can see it it shows once again the music formats The user can select the time frame While which when it is shown It's like you can adjust the value for inflation. You can switch from revenue to volume You can Stack the things by format instead. You can add more formats. You can sort them by value whatever But more importantly, so this is obviously something that any business the basic business user can can do I have the opportunity to download this story As an HTML file so download an HTML file This is a very early implementation of this and I have an animated data story of every Analytical step that I took in the browser This is super super important for us because it shows the first step into a new paradigm of Intertwining Analyzes and storytelling so all of this sorry all of it is free and open source hit it up Use it come join our slack and let us know how it sucks. Okay So, thank you very much for your for your kind Yeah before being here and and heading for me like keeping with me throughout the days There is a second survey Sorry about that But I have stickers that I'm happy to give you and I'm actually in the OSS tables right around the the food court so you can you can get me there and Lastly, I always make a selfie of myself in the here So if you don't want to be on it just don't look in the camera You won't be recognizable, but I need to prove the guys back at home that I did make it to To Prague and I did make it to the to the to the stage. So if that's okay for you Okay, thank you very much we still have Looks like we still have four minutes Thanks Peter for an rather animated presentation or assessment. So yeah, we have like four or three minutes for a few questions Just for that. We have two microphones in the middle Here so anyone please come up to there and then we can have a few questions. Yeah, thank you Thanks for the presentation. What are your thoughts on building data stories without trading code for business users? Sorry, I couldn't get there. What are your thoughts on building this interactive data stories without rating Python code for business users who don't know Python Can you not use the mic for me and I'll repeat the question? I'm sorry Maybe it's because it's facing that way, but I don't understand. What do you think of? It's much better building data stories without rating Python code for business users who don't know Python Yeah, it's it's I think it should be good for business users or at least that's what we're hoping for So if that if I understand the question correctly Yeah, okay. Yeah, I mean This is what the last example is about To and this is what we're working towards Right now we have these free and open source tools and they work great and and we need feedback And we want to make them as good as possible Also, we started working on end user tools for Excel users that would enable them to visually fiddle with the data Just how I said in the that's the vision that we're working towards these animated stories I mean, I know people who got a raise because of using IPI visit story Presenting insights for for their yeah for from the managers So, yeah, they love it Hey, I know it's here mentioned that it's free and it's open source and thank you for doing that But you also said you have investors and it's free people working on it full-time So I was just wondering how to make money. How do you eat? Yeah, lucky for us? We're just burning through our investors money, but that has a deadline obviously So these tools that I'm talking about for the end users those won't be free and open source But everything that we built for you guys is like that and we'll keep will stay like that. Got it. Thank you So I'm just thinking about how much data can then handle because it's a dashboard Yeah, and what exactly does stream that do behind the scenes? Yeah, so the question was how much data the our thing can handle and what let's really do behind the scenes So we have like experiments with a couple of tens of thousands of markers that appear on the chart We we have two bottlenecks. First one is rendering. We're using the canvas right now We plan to implement so like use open GL for that and that would sort that one out And in terms of data management, we could do a better job But so even with smaller datasets, you can get issues if there are too many categories Put on the chart in the same time because we're actually building an n-dimensional Data cube and that could get really big even with small and until data It regards to streamlit. They are the ones providing the control. They're the ones hosting these apps And and we we provide the animated charting experience as with any JavaScript developer You can use this anywhere. So it's like we don't have a back-end It's like you download the the package and then you can use it right away and that nothing gets back to us Everything happens in the browser Actually the more granular the data you add to visu the better Because you know, that's how you could generate the different views. So unlike other charting libraries We don't want you to aggregate the data down to the views that you actually want to show but like the granularity of the Like all that that encompasses all the views that you would or the big business users would want to generate usually That's pretty granular and and if you have any other questions. It's like our time is up So please visit me at the open source tables I'm super happy to continue the discussion and then thanks again for for keeping with me if you have three more minutes to let us know what you think about visu and and And and about my presentation and how we could improve just go to this link and thank you for your time and and your yeah your attention Thanks again