 So, thank you, everybody, for coming. Brief introduction. I'm outside of working in the conference. I work for Continuum Analytics. I'm a bouquet card developer and also just solutions architect and tech lead at Continuum. This is my Twitter handle. My email. Or you can also use Fabio.plier at Continuum.io. Continuum.io. A brief summary for this talk. So, usually I try to fight the boring of me speaking with some nice images. This time I'll try to do it with some nice plots. Before we start, some road map. I start with reductions and then I will basically go through what's in the recent release of bouquet. And then I will have a couple of extras of the bouquet ecosystem and briefly talk about what's next now. So, first, show me some hands. I'd like to know more about yourself. Who here uses bouquet? That's quite a good number. Who here never heard about bouquet? That's a good number as well. And that's good. Hopefully I'll show something good for you. Who here uses JavaScript for plotting or charting stuff? And who here uses B3? Sorry. So, here are some quick numbers before telling more about bouquet. Basically, when I started and when I joined the project, I think those numbers were really smaller. Bouquet had grown a lot recently and this is really cool. And we had a lot more community engagement. Bouquet is an open source project and it will say that it's part of the PyData ecosystem and it's under the known focus. And so, what is really amazing is to see those numbers really growing every month. We have a nice, good amount of stars, forks. Of course, this is not... We don't have 27 downloads a month on PyP. We have 5,000. And now we also have a chat on Gitter. So, I invite you to use it if you have questions or doubts or anything. Aside of that, we have the main list and all that stuff. So, what is bouquet? Bouquet is a visualization library made for Python and with data science in mind. So, trying to get rid of all the problems that a data scientist have when they try to plot the results, which is beneficial anyway for any Python user or any user because actually bouquet is not only a Python library. We have also bindings for Scala, Lua, Julia and NR in JavaScript. So, to get more about the project, you can go to the website and to have more information about it. It's going to be complicated. Okay, we have... You arrive at the gallery. And most of these are made by the core developers. Those are all basically bouquet plots made with bouquet. And many of these are... Some of these are actually user contributions. This one actually... Specifically, I'm very happy. This is full implementation made by an external contributor. And it's really cool. Look at this. It's all Python, no JavaScript written. So, back to the presentation. We recently just released a bouquet O12 version. Let me change this. Okay, a bit better. So, and you can get more information here at the main site. Documentation is really hard. Probably as hard as writing a visualization library like this. It's really complex as a library. And trying to document everything in a proper way is hard. Somebody do our best. And I really invite everyone that goes to the documentation maybe for the first time or whatever to post issues regarding what they found hard and how we can improve. And basically, we walk through all the main topics of bouquet and how to get through those things. So, I encourage you to do this. Here's the bouquet O12 release post. And basically, all objects you see here are bouquet plots. And they are interactive as well. So they can actually change things here. And there are different ways of doing this and how it works. And we'll be showing this during the demo. Hopefully the Wi-Fi is not so bad. And those things are connected. A few of these are connected to a server. The sliders are just JavaScript callbacks. But let's see in the moment. Cool. So what's that? Cool. So what are the new things? I said this talk as intermediate because to have a good understanding you probably is better to have an idea of what's bouquet and have used it. But I think it's beneficial for everyone. They should understand and see the benefits even if they never see it. Bouquet comes with a bouquet server, which is an object, a tornado server that lets you write Python and say, okay, every time my plot is updated or the user clicks on something or there's an event on the client side or in the server side, both sides can be synchronized. So we used to have another server and it has changed since around October or November. This new server is extremely more performant. It's all WebSocket based. There are no more REST calls. It's based on tornado and WebSockets, as I said. And it keeps basically all the objects and models synchronized between the server and the other side. So just to understand how a bouquet server app looks like, let's take a look at this. Now we're... Oh, well. Those are actually bouquet server apps running on that page and being embedded. But here you can see a few examples. So, for instance, this movies app is a bouquet server and it's connecting to a data store and I can actually change stuff. Every time I change this slider, a callback is triggered on the Python side. A pandas data frame is being keyworded and the returns are sending back to the server. As you can see, it's quite fast and it's quite reactive. And actually it's based on our example, which is actually slower than this. A shiny example, sorry. Let me see. Show off another example. For instance, this other one showed a histogram with showing off some of the bouquet server features. So we can select those areas. There's a Python callback that we compute in the histograms and they are sending back to the server. I can actually select multiple areas and I can actually also define the way those selections are triggering the Python callbacks. So it can be either every time a movement happens or in the end of the movement event. So let's see. Let me... Bouquet server now runs with the bouquet command. Basically to run on your computer, you just need to type bouquet serve and the app or the app script or the app there. You define your bouquet app. And it's quite simple to just run that. It accepts a lot of commands to deal with security and filtering. So if you need to serve behind an nginx server or you just need to serve under some ports or like use HTTPS connections and those kind of stuff. So this is what more or less a bouquet server app is the code for. More or less the same thing as a trivial bouquet standalone dynamic plot. There's a lot of code here but basically what is needed is you need to basically import per doc which is the only piece for the server. You need to import to create your figure which is the plot. Say all the things like how do you want to make it look add some glyphs or some elements to the plot. Here we define a pint of callback and basically we put a button and say every time someone clicks the button call this callback and then we add everything to the root of this car doc and that's it. Basically bouquet apps could be as simple as a Python script just a main dot py file and we write everything there or if we have some more complicated or complex requirements we can have a package or a directory with one file for the main file then a YAML file for a DIM how we want to make everything look and feel static for serving static files directly from bouquet server a server life cycle so you can actually define callbacks triggered in specific moments when the service is being spawned or things are shutting down and then we also have a template directory with an index file that it can replace the bouquet server main HTML template that used to be quite painful in the past that's a huge improvement actually well before jumping to the bouquet command I'd like to show you a couple of examples so let's so let me put it here so everybody can see so to serve a bouquet app I just go let's say bouquet serve let's do this this one is a bouquet server app that basically has oh I forgot to say I tell to show basically it has a periodic callback being called every I can't remember but it is redoing for Fourier harmonics for the whole circle and there's a lot going on the back and it's quite fluid as well another example that is quite nice as let's see this case I'm serving a bouquet app that is the directory and all I need to give the directory name this is an OHLC plot basically recomputing all the statistics and all the simulation every I think it's three or one minute a second and as I change the sliders the model is changing its behavior and as you can see it's quite fluid and the rate is fast enough to keep the rate between the Python side and the JavaScript side and it can be really anything you need we are doing simulations with NumPy and optimizing with Numba but you could connect to your data source or do whatever kind of crazy stuff you need cool okay let's move ahead here so bouquet command we also have two other we just saw before the bouquet command it also has different options the main most important ones are HTML basically it can just if your app doesn't have callbacks but it's just like client side callbacks or just some interactions with widgets you can use bouquet HTML or any HTML file that you can actually send by email or serve anywhere contains on the interactions that you need and bouquet JSON basically saves a serialized JSON file that you can then take and use elsewhere to create bouquet plots all the information I try to put the related links under every slide okay client side callbacks basically bouquet lets you also write JavaScript if you want so let's say you don't want to have a server you want to have some interactions and like in this case this case I have a notebook and I don't need a bouquet server I want to just have some sort of this dynamic plot and every time I move the slider I want this to move basically I would like to write JavaScript to do this and bouquet lets you it provides a custom JS widget that lets you write either a coffee script or JavaScript and define the code and it gives you access to the lower level data source so in this case this plot have one type of scatter and then it's connected to one data source you can say on this data source slide the objects or do any computation or anything in this case it's just replacing the source with every year as it changed so those JavaScript callbacks they extend the capability we are working this is because we are working on basically doing canned JavaScript callbacks for the things that most people want to do but we had a dream also to say what if we could write Python and make it work on the browser and it's not a dream anymore so with this new release you can actually write Python functions that we kindly translate to JavaScript for you and they work on the browser so like this case I have a bokeh plot, a simple curve that I have sliders and I want to tweak with the curve using the sliders so to use Python you just need to define your plot stuff and define a callback and define what kind of objects it need in this case the source which is the data source of this plot and a window object the window object is actually JavaScript but so basically you get the data from the source you tweak with your parameters you basically read the slider values and in this case we use the JavaScript function to recompute the numbers and then basically we get this object as a callback and we pass to the slider for every slider so every slider here we will be calling a JavaScript function that was written in Python and if you don't believe me well this is what's happening on the first page but let's show it locally that should work no, this is a similar thing slider maybe it's elsewhere maybe it's just slider and that's that in the O11 release it just supported Python 3 yeah but now it also supports Python 2.7 because sorry no, this actually is it just creates an HTML file slider and that's what it's serving there's no active callbacks or anything actually you can just get that and send to a client and the customer intro we actually you can actually write notebooks with those kind of things and use bokeh serve bokeh HTML to convert this notebook to an HTML file and just send the HTML file to someone it will convert the notebook to a bokeh HTML standalone file because it only grabs the cells that were created with bokeh anything that is notebook centric yes, anything that is notebook centric or that relies on your local data would not work but any real anything that is not related to your environment should work then you're fine cool we also now support jupiter notebook callbacks so it used to be quite hard because jupiter have their own web sockets that connects to jupiter web sockets we have our web sockets stuff right now we release the push notebooks callback that you can actually use to do the same thing and use ipython notebooks widgets to connect to a plot and recompuse okay another big problem with bokeh was that honestly it didn't look so well especially the widgets they used to suck a lot but they are super cool and better now and also it used to have really a lot of limitations with laying out stuff so it was really hard to do a lot in the way every user wanted so this one is a quick comparison about how things look now you can see the old one here and the new one here there are a few tweaks and changes in this case but the main things are that hbox and vbox which used to be the old boxes they are gone now we have roll columns approach we also have a widget box which basically makes easier to build rows and columns and it's quite simple now to lay out stuff and lay out stuff in a way that axes are aligned and you can define where to put the title and legend title and legend are can be put out of the plot itself so bokeh used to always need the widget inside the canvas area you can actually now put it outside this is an example of layout, column layout it's fairly easy you just need to say okay layout, column and then tell what to put in the column same for the row and same for grid plot we basically use array lists to define what goes and we compute everything we actually have a responsive flag that you can use to make things responsive and there are a few options like for the sizing mode stretch other options some layout examples I already showed you custom extensions so a lot of times bokeh do not contain everything like if you want to have a slider that looks differently or if you want to have a different kind of plot or different kind of tool you can actually bokeh now provides a mechanism to extend our models sort of a plugin system so you can actually create your own bokeh model either on the python side only or python and javascript side we try to make it less complicated it's possible so if you need to make changes to the javascript side you can actually define that on the python line class and you define a specific new attribute so how extending python classes work you basically actually let me show let me use this to help me so to extend bokeh on the python side it's quite simple you just iterate from the model you want to add everything you need for your custom model if you need to extend on the javascript side it's a bit more complicated you need to basically you have two options write your javascript file and then use it or you can actually just define your implementation in the model itself and I can show you here and that's all that basically you define your python class and you define this special under implementation attribute to define the javascript so the result of this in this case is for instance if I want to use hipster old school range I can just define all these things it works it injects all the javascript and the html into the page and replace the custom slider one so but you can also extend more things like if you what if bokeh doesn't support 3D and we want to have a 3D model now you can do it and you can so for instance bokeh show surface 3D you can actually have use whatever javascript library you want to integrate with bokeh and have the bokeh managing the higher level things and having your lower level javascript API doing the other stuff for instance it's using these javas that consumes a bokeh data source and plots the 3D dynamically on the page annotations bokeh now have real notations so you can actually use stuff to annotate your code we have arrows like this case and not that complicated you just import what you need as a layout in this case an arrow with open head and I give the coordinates you can actually tie that to data sources this is a box annotation here to highlight a specific area and yeah the way you use it is more or less the same you have labels like in this case with different aspects and we can tie it to different models we have we have much better geosupport now we actually support a geodeason data source that you can use to drop points on the screen we still have Google Maps support but Google just changed their terms of using APIs and basically you need to have your own key to use it but basically they didn't say anything and changed from one day to the other all tests failed so it was not nice but it's an extra step for the users and we are trying to check what we can do to make it just work geosupport we have good support for tile renders so if you have any service that you want to use we provide support for that to consume marketer projections new typescript and javascript API so typescript and javascript APIs pairs down the plotting API, the models API and a brief charts API which is not like bokeh core charts API it's just a handy thing to create like bars and pies on the javascript side like in this case JS transforms we have new JS transforms which means if you have a data column a column of data in the Python side and you want to basically create new data from that plot objects from the same column with some transformation we support this we now support jitter and interpolation so if you have just a number of dots and you want to interpolate in different ways you just specify the kind of interpolation you want we have now better WebGL support and it's actually quite fast just show quickly an example just show a quick example here of it now supports all the glyphs basically in this case we have WebGL not supported, not activated and if I zoom in you can see this time when things are gray it's basically recomputing everything and this is how it's recomputing to render everything this is how it's rendering with WebGL both examples have 10,000 points we have examples with 1 or 2 or 300 points and WebGL performs quite well but now there's a whole ecosystem growing around bokeh as well I want to mention two projects that are quite cool the first one is hollow views and basically hollow views let you have annotated data it's basically notebook centric and lets you have annotated data and it pre-builds it creates a new grammar to let you do specific complicated stuff with your annotated data so let's say I want to slice my big chunk of data in different layers in different dimensions and I want to have a slider to basically go through different steps and different layers of that cube of data it lets you do that quite fast those lines create this plot here and as you can see it's quite nice to read and quite lean in terms of code this other one project I would say it's fairly cool basically data share is part of the bokeh family and it lets you plot massive number of data on the browser this example here is taking the New York pick up and drop off data set it's a 12 million data set a few gigabytes I think it's 10 gigabytes of data and it basically just works well let me show you hopefully we still have time okay I should have that somewhere I still have questions though so you want to have questions or you want to see this cool so very briefly one problem with big data is that if you have points, points tend to overlap so in this case I have 12 million points I'm just plotting 1000 here you can barely see what's happening in this case 10,000 it's over plotting because you don't really understand anything anymore you can tweak with the data let's just have 10% alpha and 10% reduce the size of the dots but you don't understand stuff yet same here you try to improve and you can actually see the problem is that data is not linearly distributed so you have to have transforms and try to compute better data but the best thing you can this is actually changing in using logarithm transform this one is actually changing in using an equalized histogram so basically data shader lets you specify all those transforms and have a nice set of transform operations before it gets stuff to do okay so basically every time you have data in a screen you only see the points you would see so if I can zoom in it will basically go in and out and recompute stuff if I didn't break anything let's reload that oh this is the one on the browser this is being served on the network not locally if I still have time I'll show you otherwise just grab me later do you have time or no no okay I think 2 minutes is maybe fine thank you happy to answer questions on the conference aren't you