 Hi guys, my name is Shashi Gaurav, I started working on Julia last summer as a GSOC student and I made this package called Interact, at least two years after that, today. So I work on this package, I work on UI tools in general for Julia, I think. So let's begin. So when people start using Julia for either, actually half a dozen are all really good packages for originalization in Julia. So I'm going to be going over all of these packages here. So it's not a comprehensive coverage by any means of any of these packages, so it's best if you just take notes and take notes on the dates of these things and check them out later. Okay, let's start. So the first thing people play out when they want to do exploratory data science in Julia is this thing called Jupyter. So it used to be called iPython Notebooks, and they renamed it Jupyter because it also supports Python and R, and it has in Julia Python and R. So the JU in Jupyter is actually, it stands for Julia. So I'm going to show you Jupyter. This is how it looks. It's nothing too complicated, you can basically write an code here and run it and it will show the output. And then, so there are different kinds of values that get converted to different output. So one such example is this thing called Colorant. It's from this colors package, so if you want to see what color this is, if you just create a value, it's going to show the color itself. You can actually put these things in an array. This thing will show the colors. Actually, if I see the type of this, it will tell me it's an array of colors. So Jupyter can show you this way. And there is also other things like Sympyte. Sympyte is a package for symbolic manipulation. So here I'm differentiating sine x squared six times. I can increase it, run it again. I can see the output. You can also, for your own types in your own packages, you can define your own output methods. So there's this function called WriteMind. You just add a method to it and it just starts working. So I created this thing called MyType where I'm showing each character with a different color. So if I create an object of MyType, so it's going to call this WriteMyMind and pick a color for each character. So how do you see data? So I'm using this R data set package. It's used basically to teach, working with table data. So I'm loading a data set from there. The type of this is actually a data frame. Stefan showed this in the morning. So it's the same thing. But if I buy them, it will look like this. I, in Jupyter, it will look like this. Sure. So the other package for the de facto package for plotting in Jupyter is something called BadFly. So it implements something called a grammar of graphics. You might be familiar with the security, how to use ggplot in R. So it's a grammar for constructing visualizations from data. So over here I'm plotting from this iris data set. So for different species of the iris plant, I want to let plot the sepal and then sepal width and color the dots according to species. I can also color the dots according to, say, the line. And it's going to make a continuous scan for being into the plotting. So there are all these features in BadFly that you can use to make very complex plots. So the other plan package is interact. So here you see a simple follow where n goes from 1 to 100. And in the body you are creating a random matrix. So I do this follow by preparing this macro called BadFly. So what happens is n just becomes a slider. You can increase or decrease it. As you can see, the size of the array is varying. So each change to the slider triggers an update to the array. So I can use this. It's not just a slider that you can use it with. You can use it with, say, a text box. So I'm just using the previous type of writeMind method. Or you can use it with a bunch of selection widgets. You can just give it a list. It will become a selection widget. Again, I can have interactive plots that work this way. One of the very useful things you can do is explore mathematical functions with this, by varying the parameters. So this function is the beta function, and I'm plotting the probability distribution of the beta function. I had no idea what the beta function does before someone showed me this with interact. So basically, what happens is alpha sets how far left the bump is, and beta sets how far... How short the bump is. So another thing you can do is vary the parameters of... I think I need internet or something. Okay, so that's supposed to render as latex. Sorry about that. I can also do... Do you need internet access for MathJax? Yeah, so that's the MathJax library. That's not loaded, I suppose. So that's an animation. I'm just waiting the phase of the side wave according to the time. It's just like, I have a switch, and the switch works since it involves this FPS function, and it generates updates every 30 times a second. That's how it works. My life is working now. It's okay. So in that case, are you regenerating the entire plot, or are you equal to manipulate the entire section? It regenerates the entire plot. But there's some more cleverness going on. I'll come to that. It doesn't draw the entire plot, however. It changes only whatever leads to change. So it kind of generates one section of it? It actually generates the whole plot, and then takes it with the previous one, and then figures out only the part changed, and then updates the part. So that's catalyzed. There are other plot and packages. Pyplot is the binding for Matplotlib, the Python plotting library. And there's Vega, which I'm very excited about. It wraps around vega.js. It's another plotting package from the uwash database group. And there's Winston, which you can use to plot with GTK. And so there's this other package I'm working on. It's called Escher. You're looking at it right now. So this slide shows made in Escher. So it lets you basically build web UIs entirely into the app. And the way you do it is you take simple parts that Escher provides you and then you stack them up and make more complicated UIs. So I'm going to show some examples of this. So the first basic thing you can do with Escher, this is not even Escher. It's the first basic data type in Escher. It's called the LM type. So what it does is it just creates a DOM node. If you're familiar with JavaScript, you know what the DOM is. It's the document object model. It is what your HTML pages become in the browser. So Julia can actually just generate the DOM and then basically draw the DOM on the browser without going through the intermediate results and rating HTML and then if they get back into the DOM. So I have this code editor here made in Escher. So I can edit the style of this thing. So as you can see, I've given up writing of one year and filled it with colored blue. And I can change these things and run it. And that exactly reflects the DOM. Similarly, it extends to SVGs. So if you already see that I'm already starting to create these functions. So I've created a circle function which abstracts out the job of creating a function and then I have a bunch of functions here. Next is... Oh, this predictor is kind of too small for this. Okay, so it also allows you to create custom HTML elements of my own choosing. You can create your own custom HTML elements these days. Okay, 10 months. And here's the latest custom HTML element I created. But in Escher, it's just one download. But if you inspect this, you'll see a million of these things. But you'll have to generate all those things. So that's how Escher works. But there are very high level abstractions. So Escher can convert any Julia value into a UI. For example, here's a simple string that works as you can see. And I can create markdown text. That also works. Let me add some hitting. Some code maybe. Yeah, as you can see, it's all getting converted into Escher UI. And even code is an Escher. It's just one... Showing some code is just another element in Escher. So that's how this code cell thing is working. So I can create a code... Okay, I actually... So the code slide you're seeing is actually a function that is inside this UI. So I can use the code slide to create one more code slide if I want to. So it comes inside that. So, of course, I can use SimPy as well. Yeah, so this is Compose, a very powerful, I think, radio vector graphics package. You can actually do very complicated things with this. Yeah. So the other thing I showed you in the Escher introduction is actually generated in Julia, this picture, from a single fish. So you can do things like this with Compose. If you just Google Functional Geometry, you'll find this codebook where the construction of this artwork by Nancy Escher is explained. So this is the C.F. Binsky's triangle. So it's a recursively defined triangle. So for each triangle, you divide them into three rows of triangles and draw an N minus one C.F. Binsky triangle there. So if I start at zero, it's just one single triangle. It keeps creating those things. And this is the definition of the In Compose because it's actually exactly equivalent. So you can also plot, get like lots and Escher can draw it. You have these things for layouts. So I just create a bunch of boxes. They are not given a layout. That's why they're being shown as code over here. But I can stack them vertically in VBox, stack them vertically and then align them to the center or even horizontally. And since I'm using a powerful programming language to create layouts, I can do other things as well. So I just shuffle the order now. That's how you make layouts. And you can have higher order layouts where you have tasks and stuff like that. And you can make the pages come from below the tabs. And also, there's a type, typography scale that you can use right away. So all these fonts you're seeing are right inside a shell. You don't have to look for, I mean, spend hours and hours to make your projects good. Finally, interactivity. How do you do interactive stuff in a shell? So we use this thing called reactive programming. There's a package called reactive.jl which was written to write an interact actually. It's a very general package which lets you deal with values that vary over time. So you can have UIs that vary over time. You must hear this key triangle with this slider. So I'm just drawing this. Okay, sure, thanks. Okay, I'm almost done. So that's an animation. And it's controlled by the switch. That's all the code that was required to write that. There's these things called behaviors. These widgets are nothing special. You can make widgets sort of anything in a shell. So here's a button. You just add the behavioral behavior to it and you can create a counter with it. Here's a counter. So I have these two buttons and they each sort of emanate these constants plus one and minus one. And they go into this input signal called delta and then you fold over those inputs and show the counter in the bin. And that's how the counter works and that's the code. I wanted to show more demos. Let me see into that. I think you have to stop. Yeah. Okay, this is an animation. Whatever, colleagues. Here I'm running a wait. It's just showing the behavior of the first blocking. Okay, I guess I'll stop here and take questions. So if we have time for just these questions? Okay. Yeah. So for these visualizations, you can view only in download or in general. Sure. So for example, Gath like blocks. Thanks to all these people. Gath like blocks you can write them to G files, SVG files, VDF, PGA. So the interaction won't of course be available for you without a problem. What are you using behind the scenes SVG? It's SVG and HTML. Yeah. So that's the show. Thanks a lot. Thank you all for the support of the speeches. Thank you for being here.