 Yeah, thanks a lot for the introduction. So hello, we're on. I am Matteo. I come from Berlin. As you can see from this nice picture, you can see our famous TV tower, the Brandenburg Gay, the Reichstag building. So this is my first Europe Python and my first Python talk, so wish me luck. So a little bit about me. I'm a data scientist. I work as a freelancer in Berlin. And I'm a physicist by training. I worked a few years in academia as a researcher and then decided to, I needed a change, and started doing data science. Now this talk is fundamentally focused on data visualization, so I just want to give you a little bit of context here. So about, I think, until 10 years ago, this is what I was using when I wanted to plot something and analyze data. Who here knows what new plot is? Oh, nice. Didn't expect that. That's great. Anyway, it's in the past, luckily. And nowadays, using something that is very common, notebooks and pandas and math lab, and whatever extension of that. Who here doesn't use math lab? OK, that's great. We're going to go beyond that anyway. So a little bit of motivation behind this whole talk. So let's say you're a data scientist and you've done all your analysis and you have your notebook ready and you have to show your work, right? But the problem is you have to show it to people who maybe don't know what the notebook is. They don't know how to use Python. And maybe they constantly ask you to change things and you have to go back and change the code and change the plots for very small things. Or maybe they want to play with the visualization. And at some point, if they know what Python is, that becomes quite difficult. Or maybe you just want to show off. Or maybe you just want to build a portfolio. You want to put out on your website your work some sort of analysis you've done. And so trying to find a way to do this, I was looking for some sort of interactive visualization tool. And so at some point I stumbled upon Plotly. So Plotty.py, that is, which is an API, a Python API for Plotty.js, which is a JavaScript visualization library, which is open source. It's a full interactive and works with your Jupyter notebooks, which is pretty great. And it's declarative. So you have these objects that you use to build up your visualization. So you have a figure that contains everything. And then you have a layout object for your style, your labels. And then you have a specialized object for your scatters or a bar plot and so on. And all these objects are nice because they're basically Python dictionaries with a thin wrapper around. So you can always actually use just Python dictionaries if you want. So just to give you an idea, this is a very minimal example of Plotly. Who here knows Plotly or uses Plotly? Yeah, that's good. So let me see if I can do this. Maybe I cannot. Just trying to show. So let me go back up. OK, so this is a basic example of what Plotly does. It's very straightforward. This is just some random data. But what you can see here is that you have a product that is full interactive. You can zoom in. You can hover to see what kind of point you have. You have several tools you flash to select. And it's pretty nice out of the box, which is quite nice. I also have a more elaborate example that is this one. And here you can see that you can interact with your plot. You can select your data from the legend. You can isolate them with a double click. You know, there's a few features that it's very nice to have. And you always dream of when you use Plotly. So going back to the presentation, so this was great to find. But then how do you put this in a web page, for example? So you don't actually need to use Python when you want to explore the visualization. And that's where Dash comes in. So Dash is a product that came out from the same company, Plotly. And I took this from their website. And it's a Python framework for an Unlitical web application. No JavaScript required. That, for me, was the keyword because I'm not a web developer. I don't know JavaScript. So it was like a dream control, right? So the idea is something like shiny that is for R but for Python. So just to give you a better idea, so Dash has a frontend that is based on JavaScript using Plotly and React and a backend that is based on Flask. But the good news is you don't need to know any of that because they wrap everything in a Python package that is much easier to use than either. So this is a very minimal example of Dash app. So you see you just have a couple of inputs. You declare your app here. You create this object. And then there is this layout object that you create using this HTML component. You might recognize div from the HTML tag. HTML tag, sorry. And so what they did was to take all HTML tags and create equivalent Python objects. So basically you declare, you build this layout using divs and other HTML tags. And you can nest them and concatenate them as you would do in HTML. So let me see if I want to show you again. Oops. Where is it? OK, it disappeared, I guess. Let me see. What is that? What happened here? Here. Yeah, so this is what it looks like. Just a hello world example. So the main parts of Dash are the layout, as we've seen, that you build up with these HTML components and what they call core components that we're going to see in a moment. And with callbacks, you connect all the pieces and you create an interactive web page, basically. So the core components are all the buttons, the drop-down menus, the sliders, and stuff. I have a more elaborate example that I may share your question time if there's time. But in this core components set, there is a key component, which is graphs, that is basically a wrapper around plotly. So you can use it as you would use plotly objects to visualize your data, just the same way you would use plotly normally. So this basically comes out of the box. So this is another minimal example. And you see here you have to import these core components and also the graph objects from plotly as before. Now you have the layout becomes a little bit longer, a little bit more involved. I put here H1 tag just to get a big title. And then you have to put the nested item in a list at this point. And the second item is this graph core component that needs to have an ID and a figure keyword argument, which works exactly the same as in plotly. So here you see we have the same dummy data as before. And what you see is this web page. And again, here we have an interactive graph. And you can zoom in and zoom out and all the nice things. So the other component, the last part of dash that is fundamental is callbacks. So with callbacks, we connect all different parts of different widgets. And we are able to create an interactive experience. I'll give you another example just to show you how this works. So we have our layout here. Again, we have to import this other part of dash, which is dependencies with these two objects, input and output, that will connect the parts that we want to use. So we still have our layout. This time I use another core component here, which is an input, which means it's a text input. And then I have an empty div here. And it's important to say that the ID is a required argument because you need to identify every component uniquely. And you need to use this when you declare a callback. As you see here, the way you do this is with this color decorator, where you list your output and your inputs with their ID and the component property that you want to connect. So in this case, the output is this empty div. And the component property is children, which means basically the content of the div. And the input is my ID, so this one. And the component property is value, which is what you type in. And every time the value of the input is changed, this callback is triggered. And it runs this Python function that returns this train. And we can see what that means that every time I write something, it will just modify the text. And yeah, that's very neat, I find. And of course, you can evolve this to change graphs and all the type of components that you have. So beyond this, you have CSS. You can use CSS classes to get a nicer look for your apps. You probably should do that. I'll just show you how easy it is. You just need to append the CSS file here. This is their default recommended, but you can use Bootstrap or whatever you like. And then the way you exploit this is in your divs or HTML tags, you have to use this class name keyword argument, which is equivalent of the class argument in the HTML tags. Of course, this is the only one that they had to change because otherwise it was class with the built-in class in Python. So just to summarize at this point, the main parts of Dash, so we have HTML components which mirror HTML tags, core components which are all the high-level React components, sliders, buttons, menus, and graph objects that use Kotli.py, just like the library, as usual. And then we have callbacks which connect the PCs and allow for real interactivity. And then you can use CSS for making things prettier. I just want to briefly mention deployment because all this runs very nicely on your computer. But then if you want to actually put it on the internet, at that point you need to know something more than just Dash. Good news is I'm going to get there. So you can do different things. You have choices, which is nice. So first one is just don't do it. Maybe you don't need it. The other one is know how to use Flask. If you know Flask, it's just exactly the same. A very convenient one is to use a platform as a service. So I try to use Heroku, and it's really nice, depending on what kind of application you're doing. If you have your calculations, maybe this is not ideal. But for very light web apps, it should work just fine. Or just ask a friend. Or yeah, you could also ask Plotly if you want to do something in your company. Plotly open source, everything. And they basically leave off consulting work. So they would be happy probably. I'm not affiliated with them, by the way. Yeah, so then there's other things I haven't talked about, which is you can add external JavaScript code. You can improve performance using caching. There are some optional web GL graphs that supposedly run faster when you have a lot of data points. You can have live updating visualization for sensors, for example. That is a very nice application. You can have authentication. I mean, that's probably anything that you can do with Flask. You can probably do it with Dash. It exposes your Flask server. And you can probably use it as you would normally. Yeah. So maybe a couple of things that are kind of caveats. So this won't make you a web designer, unfortunately. I was hoping. But you still need to understand how to put things in a web page. There are some issues when you have JavaScript errors that they just don't pop up. It's not clear what's going on. That's a bit opaque. It's not clear how a supported offline mode is, even though it can work. And they're working on it, I think. And as I said, deployment, your mileage may vary, depending on your needs and expertise, even though I've got an OK experience with Heroku. I can quickly show you something I did, which was this app with Heroku if it comes up. So I use the Twitch API, which is a live stream service mostly focused on gaming, to collect some data, basically what you see is views for different channels. And they can be followed by viewers, which is a measure of the popularity. And it's not loading anymore. And I did this on Heroku, actually, on the free tier, which sleeps after 30 minutes. So now it's reloading. But you can use buttons, which are supposed to change this graph. You can remove, oh man, yes, that's nice. So you can select stuff here that will be plotted on your thing. Maybe you don't want to see this, you remove it. And you can compose different type of graphs. I put the most followed in the last month. This guy has been super popular, this ninja. And this is a logarithmic scale, by the way. So he has been a lot more popular than the rest. And this is a historic timeline of the views, as you see that he is far away from the rest. So I mean, this is just a very simple example and can be definitely improved. But it gives an idea of what you can do. Yeah, so that's basically it. So thank you for your attention, and I'd like to have your question. Any questions? Yeah, wonderful. So I wasn't clear if it was straightforward. If you have some input-output binding that changes the data that a chart is built from that the user had to zoom the chart or scrolled it or something, is the data updated on the chart or does the chart reset back to the viewport that was the default or such? So I think that the Colbeck updates the property that you select. So if you select the data, it will update just the data. But I think you can update just the layout, for example. I mean, you can just update parts of the plot, I believe. I'm not 100% sure, but in this case, I think it replots everything, I believe. Yeah, but you can do it so you only update certain parts. Hi, thanks for the talk. How hard is it to have a live data stream show up? What do you mean how hard? I haven't seen any code to see what it takes to display a web. So the way you do live updates, basically, there's a component that has a clock. So you can set an interval, and every interval, it will trigger a Colbeck. Then you can fetch the data and replot your data. So it's very easy. OK, you always do full data updates. You can't do partial data updates. I'm sorry? Can you update, say, only add a data point, not flush the whole thing out? For sure. I mean, it's a Python function, so you can do whatever you want. You can just take the new data. You can, depending on what your data source is. But if you just want the latest, five seconds from your database, you just source that and you can then append to whatever you have already. OK, thanks. Any more questions? No? OK, then thank you again very much, Matteo.