Hey, everyone, thanks very much for having me. This is the first time I've been invited to comfort into Python and, well, yeah, it's great to be here. I'm going to talk to you about how you can build animated interactive reports and dashboards within streamlit using the technology that we created, ipyvizzu, integrated into the app platform, streamlit. So first, I'm going to give you a quick overview about Vizzu and the technology that we built. Then about the open source package that we created for data scientists called IPy Vizzu, and then about the bi directional component and its use that a senior data scientist from Streamlit called Zachary Blackwood created for us. We are really grateful for Zachary for investing so much into this, and we think that it's a great step forward and that this integration has some superb implications and a lot of potential. Actually, this is an important moment for us because this is the first time we talk about this integration publicly. There is still some work to do, but it has such a huge potential that we didn't want to wait any longer and get you involved. And we're actually actively looking for people who want to contribute to the success of this by using the tool, by giving us feedback, creating examples, or by even helping us implement new features. So if you're that kind of person, we'd be welcome you very happily on board. There's a repo with all the necessary links and materials you would need to follow along and to start experimenting with what we built. You can find it at bit Lyvizuf 42. So without further ado, let's get started. Okay, so if you follow the link, you will end up in this repo folder. And yeah, friendly welcome here. And as I said, you have all the necessary lines that you will need to follow along. And there's also the notebooks folder, where you will find a couple of notebooks that help you get acquainted with Ipy Vizzu. And also there are a couple that I just prepared for you to just play around with and have a sense of how this tool works. Basically, I come from a company called Vizzu, and what we created there is an animated charting engine that building all the different kinds of charts using the same logic. And because of this, it can morph between the charts that are expressed on its interface. So basically we have a generic chart morpher, and that's something very unique. As you can see, this is just an animation right now within the Jupyter notebook. So how our technology evolved. We have the core engine that was developed in C Plus plus. We used it already a couple of years back in house. We built stories and interactives with it. And then in September 2021, we released our first open source product, a JavaScript charting library for JavaScript developers. We're using WebAssembly to compile the library so the engine in the browser, and we just built a JavaScript API for that, and it helped developers. And then last year we turned our attention to data scientists and we released ipyvizzu, which is an extension, an opensource extension for Jupyter notebook and similar computational notebooks. And it enabled people like, I assume yourself to build animated charts and data stories in notebooks using Python. And then last July, actually on Europython, we announced ipyvizzu Story, which is a presentation extension of ipyvizzu that enables you to build, present and share interactive animated presentations within Jupyter notebook. We already have a ton of integrations. This open source approach really helps us to make our technology embeddable. As you can see, it's available in many different notebooks and then other platforms such as panel or it's already pyscript, and then vehicles like mode and obviously streamlit that we're going to talk to you about. There's actually a long list on our website. So if you actually go to ipyvizzu.com and go to the environments tab, then you can see all these ids, notebooks, platforms and the lines where you can use our technology. So going down to how it works, basically, ifi Vizzu has only one method, the animate method, which has three parameters. The data that you add on the chart, the configuration of the charts, and the styling of the charts that you need to add. And then there are the optional animation options that determine how to animate from one stick to the other. And basically, if you call the animate method once with the right settings, then you will draw one chart. If you call it again, then ipyvizzu will automatically morph the original chart, the first chart to the second one, and that's it. So let's see an example that I'm going to show you on the Titanic data set. So it's a titanic csv, and we're using pandas to read the csv to a data frame. And then we add the data frame to the iPad chart. This is just a vanilla Jupyter notebook. I just hacked the CSS a little bit so that we are going to have the result of the output of a cell next to the cell itself. So we can see the code and the output side by side. So, yeah, this is the Titanic data set. And I'm going to building the first chart. I'm going to say how wide and high it should be. I add the data to it. I call the animate method, and then I configure the chart by adding the count, which is lines, a value that we added to the data set. That's one for each passenger to the x axis and then the sex of the passengers y axis. And we also add the count to the label channel and we add a title to the chart. So if I run this cell, I'm going to draw a simple bar chart where I have the male and the female passengers and the number of them represented by the width of the bars, but it's also written on it. So x and y are access. And label is a channel that you can attach data series to, such as count, sex. And next, in the next phase, I'm going to just add the survived category to the x axis and also to the color channel. That is what determines whether the passengers survived the Titanic tragedy or not. And if I do that, then as you can see, these bars has been split and they become stack bars, where we can see the number of people for each sex who died and who survived the crash. And, yeah, I have a ton of other options if I call the animate method over and over again. So let's first just remove the survived category from the x axis and add it to the y axis. I'm adding it to the y axis and I removed it from the x axis. As you can see, ipvisor remembers everything from the previous phase, so I only need to determine what to change. And here, instead of the stack bar chart, I ended up having a grouped bar chart. So now I can see the numbers side by side. And there are a couple of other configuration options. I can change the geometry so the geometric elements used to represent data, like circle, for example. And then I can add the same number that's on the label and that's on the vertical position on the markers to the size of the markers. So now the circles have different size, and I can even change the coordinate system to polar instead of euclidean. So now it's getting into this polar coordinate system. There are a couple of other configuration options, like the alignment, the sorting. You can add a title, as you saw, you can split the values. And we actually encourage you to just play with it. It has so much freedom. And whatever you do, iPadiza will take care of animating to the new state. So it's really easy to use, or at least that's what we're working towards. If you have any comments on why you think it or how you think it should be easier to use our tool, then please let us know. But that's the case. We have access and channels and you can just add and remove data series on those. To give you another example, before turning our attention to the integrated version of iPad streamlit to have a better understanding of how this thing works. So here's another example. It uses data about shows much money, how much revenue different music formats generated over the years. Let me just clear the output of the cells and run this notebook from the start so that clean we are going to use presets here. So as you saw in the previous notebook, we just added data series to access and channels. And now we're going to use a preset and we are going to determine that. What we want to build is a bar chart. We found that it's easier actually for the users to use iPad visit. This way we have a ton of presets that you can also find on our site. If you go to ipivisit.com, you'll end up in our documentation site and then within the examples, you can find a preset. As you can see, we have plenty of those. And if you click on any of the presets or thumbnails for that preset, you'll end up checking out the code of that specific preset that you clicked on. And you can play it here, you can copy the code and use it right away in your notebook, and you can even copy the whole thing and start fiddling with it. So right now, we built this bar chart here. There are a couple of issues, so I don't really like that all the bars have the same color. And actually the numbers here are really huge. So what I'm going to do is, first of all, I'm going to use instead a group bar chart where I say that this is data is grouped by the same category, the format that's on the y axis. So now each bar has a different color because that's how group bar charts look like. And I'm going to play and fiddle a little bit with the styling. I'm going to add a new color palette. So I'm just listing color codes here and I basically assign it to the different categories. I'll change the number format, how many digits I want, and I'm going to use a number scale. This is a fairly new development, so I have to add it to the x and the y axis. Now we're going to make it easier for you later on. So what happens is that we have a different color scheme right now and we have the US short scale and the numbers are shorter and easier to read. And now I'm going to use yet another preset, the splitted column chart, and also fill with the styling a little bit. And here's just yet another transformation happening automatically where I can see how the revenue changed over time from these music formats side by side. And also you can add events to override certain behaviors. So for example, I don't like that all the years are written here next to the x axis. And there's this short event that will basically enable only every fifth year or like year that's divisible by five to be drawn the number for it. So I run the cell and if I touch the chart then boom, all the unnecessary years have gone. And so there are a couple of other examples here to go to stream graph for example. Then to switch on the splitting feature, which is really nice. Again, it's great for stack charts to see them, the component side by side. Then I'm going to just use the data filter option, which is also really great when you have animation. So we're going to just zoom into vinyl and streaming as you can see. And yeah, since all the transition is animated, it's really like zooming in and everybody understands what's going on, so you don't have to explain what we're looking at. And in the next phase I'm just going to switch off the filter and the splitting as well. So I'm going to get back to the stream graph. This is the phase that my wife calls when the elephants kiss. Now you know why. And yeah, yet another preset is the line chart, which enables us to compare the revenue from these formats side by side. So basically these were the only examples that I want to just show you with notebooks, at least from ipyvizzu. And as I said, they are here in the repo folder within the notebooks. This was number one and number. And the third one is an example of IPY. Visit story there's like a longer code here. I'm not going to go into more detail, but basically that was the first implementation of our technology when we enabled the use of interactive animations. And here you basically set your views and yeah, I'm just using my buttons on my keyboard and you cannot see it. Sorry about that. But basically you have these buttons beneath the chart that you can use, but you can also use a clicker or your keyboard, just like I did initially to move back and forth. And basically it means that you can have a lines presentation of your findings. This is again just a great example of zooming into certain areas and to grouping and rearranging certain elements to show how they changed over time while making everyone crystal clear what's going on and not having to iterate all over again, like what we're looking at. So yeah, this is iPad as a story. There's an example of that in the repo. Take a look at it if you're interested. So that was the part of IPiV running in notebooks and other platforms. And now let's focus on streamlit first. Basically, this is the streamlit Vizzu repository is something that we built together with Zachary. If you go and visit it in the readme, there's like a short description of what this is. This is the bi directional component that Zachary built, the installation instructions. As you can see, it's available on PiP. By the way, iPad is an iPad story as well. And here's documentation written also by Zachary. Great job, Zachary. Thank you very much for that. And you can just check out how to get started with stream with Vizzu. There is a sample code that we're going to show you anyway. But if you go to this repo, then you're in good hands and that's the best place to start. So basically, this is the first app that I'm going to show you. Let me quickly bring up. Yeah, so this is the app on the right side and the code for that on the left side. As you can see, we imported pandas and streamlit. And then there's the streamlit visual component from which we are going to use config data and visual chart. It's almost the same as it is with ipyvizzu. And so we create a Vizzu chart. We build a very simple data frame. We add the data. So we create the data object. We add the data frame to the data object. We first call chart animate data that just sets up an empty chart. And then we add some configuration to IpI Vizzu to tell how to display the data. And initially it's going to be that the a series. So the XYZ is on the x axis and then the b series, which is lines one, two, three is on the b axis. And there's the title. Look at my plot. So this is what we're looking at. X, y and z. And one, two, three. Here is an interactive element from streamlit, a checkbox called swap. And if it's true, so if I click on the checkbox, then notice that the configuration of the chart changes. So now the y axis, we're going to have the series a, and the axis is going to have the series b. It's basically just. And the title is going to change. So it's just swapping the configuration. And as you can see, ivz automatically does this and changes the configuration of the chart. And the other thing that it does, and that's why it's bi directional, is that if you click on any of the markers, for example, it reads some data and it says that the value of the click bar is two. And here's the code for that. So basically, if the data is not known and marker in data, the data is what basically we read from the chart. If it's not known, then it just writes here the value of the click bar, and it reads the values from the b series or array and writes it out right beneath the chart. So it's a very simple, great example built by Zachary, which shows how you can manipulate the configuration of the chart using the interactive elements from streamlit, and also do something with the data that comes out of the interactive chart. So this app actually have more pages? We have five altogether. We're going to check out all five of these. The last one is pretty complicated, so I'm not going to go into more details, but it's always there for you to explore. And the second one. So this is again, the data from about the revenue generated music format. I used group bar chart. As you can see, I actually, in the code, used the group bar chart preset, which is really easy to use. I added styling as well. So it's basically the same thing that we used within ifi vizzu. And the only difference is that I have here a slider that tells you to pick a year. And if you change the year, you can either do it by your mouse, or again, you can change to whatever you want, or you can move year by year from one year to the other. For example, this is the early 90s, where CD was really high. But if we go backwards one by one, we can see that actually it was around 1990. In 1990, cassette was still raging. And then in 1991, CD became the most popular or music format, or at least the one that generated the most revenue. And, yeah, it's just an easy interaction. Again, basically, the upper part of the code is pretty much the same. There's just one thing here, the chart feature tooltip is set to true, it results that there is this tooltip that appears on top of the markers if you hover your mouse over them, which is great to read, values that might not be visible. In this case, I think all the data is visible, but there can be more complex cases, obviously. Yeah. And that's about it. The racing bar charts were so popular a couple of years ago. I think it's a little bit better that you have the chance to control them. And it's just, again, a simple example. Okay, third example, again, built by Zachary. It's a drill down example. It's a little more complicated, but not the data part, because this is the whole of the data frame that you can see here, but the interaction part, it's actually, I'm just going to set it back to the original state. So this is how it's set. Originally, we have three series, a, b and c. Two of them are categories a and c, and b is a number. So what we have here is you call the chart get event, the marker categories a. So basically it reads what, what category has been clicked on from the values within a. And then it basically applies a filter here so that it only includes the records where the category of a equals the one that you clicked on. And it also changes the configuration. So originally it's the a on the x axis and the b on the y axis, but then it changes to the c being on the x axis. And while actually b stays on the y axis. This is actually unnecessary since it remains the same. And so it means that, again, this is a really short code, as you can see, like 45 lines. But here you have an interactive drill down functionality that if you click on any of the markers, it will just zoom in on that marker and drills down automatically. And if you click anywhere else, then it will move back to the original state. I think it's a great example, and again, very simple to use and to implement. We actually did a very popular piece in one of the local online newspapers where you could zoom into a data set, seeing the big arrangements that a company made or big agreements, and see more details about it. But there are plenty of examples when you've been drilling down, it makes sense. And this is a very intuitive way for any business user to drill down and check for more details. All right. The fourth example is actually one of the explorers that I wanted to show you. I'm going to also show you the code. So the title of the talk was let them explore. And basically, I think this is the strongest benefit of Vizzu Streamlit. So ipizu being used in streamlit, that now you can build these explorers using this technology, which enables basic business users to just explore, maybe even complex data sets on their own. Always understanding where they are, always keeping track of the context, but still have a lot of different opportunities for exploration and for applying their business expertise in finding solutions and finding new insights. So this is actually a very simple data set that contains four products. Sales data, about four products. How many sales were there? How many units were sold? This is what we see right now, let's say just last year. And we can also see on the chart a couple of interactive elements. And what we can do here is, for example, switch from the number of sales to the revenue that's been generated. We can order the items alphabetically or by value, just with the click of a button. We can even filter categories like this and whatever vanishes will vanish in an animated sense. So it's always straightforward what happened? What changed. We can also check the data by region or both by region and product. Now we have four regions, west southeast, and we can actually just aggregate the data by region and see it without the product itself. But still, I can just remove the accessories. And now I have information about the revenue generated from these three products in these four regions. And I can actually switch polar coordinates, which in this setting might not be that crucially important, but still, it's an opportunity you have there. I think actually these polar charts work better on mobile because they take up less space. And yeah, you can actually use stream as interactive elements to change the styling of the chart. So you can set the background color, for example, to a really ugly color. Luckily you can also change it back quite easily. You can even write here code. It looks better with the original color. Yeah, here we go. But there are a plethora of different styling options and you can use any of those. So what happens here code wise is, again, you read the data, you create the chart, you set the toolkit to true, and now you have list of items that you add to a multi select control, that here you have five columns where you add radio buttons and color picker. And basically you just add the options there. These are, I think, very straightforward to anyone who actually used film it at any point in time. You set the style here so that it uses the background color red from this color picker. I guess the filter might be the most complicated one, where you need to join the items here from the products list. And then the title is also a bit complicated, so it always reflects, for example, if I remove the handbags from this chart, then it will vanish from the title as well. So it's another way of helping the user always keep track of what they're looking at. And so the most important part is this if, else if and else part where basically if the comfort buy is by product, then let's show it on the cartesian coordinate system because it's easier to follow. So then the product is on the y axis. So shoes and gloves and the measure, which is either the revenue or the sales, is on the x axis. It's pretty straightforward and there's nothing on the color. If the compromise is set to region, then we will have the region on the x axis. West, south, northeast, we have color data also there. It's also region and measure revenue or sales independently. So basically whatever you select is on the y axis. And when you have both, which is the else option here, then product is on the y axis, the measure, and the region is on the x axis and the region is still on the color. That's why we get to these stacked bar charts where the measure and the regions are on the same axis. That's why it's stacked. And now we build this config object with all the parameters that has been set before. You can actually set some opportunities independently. So if chords are set to color, then you just add more attributes to this object coordinate system and sorting. And then basically you call this one single line where you call the animate method, you add the data filter with the filter that set so far the config. With the config, the style that's basically just the background color and even you set a delay to 0.1, you can set it to zero. Basically it helps you to be the chart to be more reactive. By default, the delay is like 1 second. So whenever anything changes, the chart would only react after a second. And in this interactive setup, it's better to make delay as short as possible. So this already belongs to the animation options. That's about it. If you click on this is again an example of the bi directional component. If you click on any of the markers, you have the details about the positions, about the coordinates, about the market that you clicked, if there's any, and the value of that marker, and there's even an id to it. So it's really easy to get data out of your ifi visual charts and reuse them within an app. We're actually really looking forward to have some examples when this capability and the last app that I wanted to show you is a more complicated explorer. The code is there, but I don't think it would be a good idea to go through it in much detail right now. I'm just going to show you how the explorer works. It again uses the music history data. I thought it's easier for you to have the same data set in three different examples. And here you have two lines. So like it's a slider with two interactive elements, which helps you set the years that are being shown as you can, I'm sure. Imagine it utilizes the filter option. You can actually adjust the revenue for inflation or change to volume, just like with the sales data. And as you can see, it shows a completely different picture. We use the sidebar now, not only interactive element on the chart, you can add all the formats that are in the data set. You can split the values. You can switch between column chart and streamlit graph. You can stack things by year or by format. So you can even. Yeah, and now you're going to end up having bar chart. You can sort these by value. There are plenty of different opportunities for anyone actually being really interested, and you can narrow this down and focus on a smarter period or just a single year. Lines, basically what you were also able to do with the original slider, but you can also switch between what is being shown and. Yeah, so for example, what was there with the story within the notebook that I showed you? Yeah, the area chart doesn't work very well with a single year. So, for example, if I leave only lines and the other one, so we can get to the same chart that we saw before and do the same transitions that we did in the notebook splitting off. Okay, so basically you're free to play with it. As you could see, there were some minor issues with some of the transitions. You can sometimes, rarely have these kind of issues. I was actually quite unlucky to click these buttons in this order, but that's the beauty of doing a live demo of your technology, I guess. Okay, so that's about it. I hope you're still with me. And this is what I wanted to show you. Please visit the repository if you want to learn more. As I said, there are a lot of things, links, useful links for the apps, for the source code of the app, for the documentation that's listed here. And so there are two things I really want to ask you. First one is to spend two, three minutes of your time and fill out a short Google form that I prepared for. Just. I would love to know you better. What do you do, what you think about this presentation, what you think about this integration of our tool into streamlit? What kind of ideas you would have? What do you need us to improve in order to use it? This is all very much interesting, but still, I can promise you that it wouldn't take more than two, three minutes of your time. And if you want to join our community, you'd be, as I said in the beginning, very welcome. We have a slack workspace. Here's the link. Just come and join us and just test our tool or contribute to it. Both of them are very fine. So thanks again for your time and again for the invitation from the comfort of T team. It's been a pleasure, and I'm looking forward to your questions either on Discord or on the conference. Discord or yeah, on Slack, in email at any social network you can track us down. Thank you very much.