Add to Watchlist

Getting started with Bokeh / Let's build an interactive data visualization for the Python!


Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title Getting started with Bokeh / Let's build an interactive data visualization for the Python!
Title of Series EuroPython 2015
Part Number 16
Number of Parts 173
Author Bird, Sarah
License CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
DOI 10.5446/20117
Publisher EuroPython
Release Date 2015
Language English
Production Place Bilbao, Euskadi, Spain

Content Metadata

Subject Area Computer Science
Abstract Sarah Bird - Getting started with Bokeh / Let's build an interactive data visualization for the Python! As a web developer, I find myself being asked to make increasing numbers of data visualizations, interactive infographics, and more. d3.js is great, as are many other javascript toolkits that are out there. But if I can write more Python and less JavaScript... well, that makes me happy! Bokeh is a new Python library for interactive visualization. Its origins are in the data science community, but it has a lot to offer web developers. In this mini-tutorial, I'll run through how to build a data visualization in Bokeh and how to hook it into your web application. This will be a real-world example, that was previously built in d3.js. Along the way, I'll provide tips and tricks that I've discovered in my experience including how Bokeh works wonderfully with the iPython notebook which I use to prototype my visualizations, and many data science people use as their native way to explore data. For those of you who already know a little Bokeh, I'll be covering the new "actions framework" that lets you write JS callbacks in your python code so you can do lots of interactions all on the client side.
Keywords EuroPython Conference
EP 2015
EuroPython 2015
at the
it and it
check effective and more that's not of media is going to be talking about 350 in about a really diving into indirectly interactive component building buildings that broke out with his actual to that a be a really great thing going this afternoon said at the heart of is the model the common data sources and so it's very simple is just a table of data just like you might expect and so on of the such that we have and we take a data dictionary and Python normal dictionary to array and we also show how many people have worked with candles the only thing can work with and it's fine it's a lot like Excel but without an environment and then we have this should with not like a cellular bill change a life and then you can the core of AT composite dictionary you get a table of data and and the laws of other ways you can do you can read from Excel from Jason from CSP and so on and if you haven't used use patterns before I would tell you recommend brand roads and panders tutorial from Picon 2015 it was it's it really boils down like had a really just understand it but keeps the mice and I Simple level as you can make your column data source from either dictionary all 4 upon data and and you'll get ends up represented like that
analyzes the 1 difference between my when I passed dictionary well DataFrame I've I've got this extra time to execute value here at the index the index has come from a has come from dependence has come from the kind data from it's it's this left index here that it's it's named index for us so that is
the column vectors so the next
thing that's at the heart of our is the plot and I'm scared to others and the tells here because I don't know I don't think about important they're sort of this models plotting charts these 3 different ways to kind use by OK but they have a lot in common and you for you should find it pretty easy to jump between the 3 sort of levels of but I think it can be very confusing knowing exactly what to do from the get go which is 1 trying to sort of show you all 3 so at the lowest level we have the plot the plot objects and the next level up we have the figure
and finally we have the chance of they're will different things that come from different models of them by OK but you're going to see they all have the same kind of attributes attached to them like a tool location background fill cell so once you working with 1 you can kind of reasonably assume that the other 1 is going to come and behave similar and they all have 3 really important methods on them and tools and layout and had left hands and if you can remember the 3 methods are going to get a really long way into building all of your and all of your
thoughts good looks like he's saying no
I think that's a good to me at the word means nothing I was so confused for a long time it just means shape and and I don't know why it's called blebs socialism very very logical reason but a glycidyl shapes and so this is this is actually from the examples and these all of the different kinds of shapes you can spell within both OK and some combination of all of these is the home of the set here in some kind of combination of all these things you can make pretty much anything you can think of but if you couldn't we ensure would add another 1 but we really have got most most things covered here said that such a shape some of them were building good that's what we talked about data let's talk about charts but I keep going on about this models plotting charts I think and I wanna just as laid out a little bit more so there's these 3 modules OK models but cannot plotting a Bioconductor spoken models at the lowest level of OK but it doesn't mean it's a lovely should be afraid of so awesome level I love to live in the models level and everything else above it is is built on top of models and so offers you the most control somebody doesn't have to do all the work themselves on the complete opposite ends you have but charts these all of 1 mind functions the ladies that out about charts that are aligned charts that are horizon job but it just takes a data frame and and gives you something also so it's very very quick to use but and sort of does all the magic for you but cannot plots included in the middle and but you have to sort of organizing data format but it it that tries to pick sensible defaults so you have to add the acts even at the grave on tries to sort of give you something you want but it gives you a bit more controlled way you want to work is is really a matter of personal taste personally coming from a web well I started with charts and charts for me were gateways models but I think a lot of people coming from the data science and uh the data science world find passing sort of more intuitive but you'll see them all and you can in and you can you can choose what you will so let's start with 2 of the nation's 1 little pocket of their dashboard that I was the time was the morning and this this chart here this bar chart here has come out of that and has come
out of the chart interface so what I think that the child's interface is that it is a kind of magic it just takes the
data that's a bit of a shock the economy to know why it once the data to look like otherwise it can't do its magic so often when I'm getting started with the chart if refreshing music before I'll just set up some of some dummy data to make sure it's kind of roughly did what I expected to do before I put my related you know who knows whether it's it's OK all my data that's that's being with so we just have some of which just have a simple thing here we spent some time with and unicorns and and and other magic things and now we get to the input budget and as we wanted it from the charts function we employ about and now we just call it with data frame and we show bunch 1 line and here we have here we have a lot of what we have assumed we have reset we can say
that we can through that we can resize it and this is this is a web of data you could shed its HTML and it's all been worked beautifully for and so that's 1 how we expected to so now we're gonna try was the real data of all of the code that gets old real data is in that their reproduction with the earlier of global cover how I made it today and this is the raw data and then this is the sort of process data that I did some once again I spit out my data that's and speed of a bunch of which is almost how i this and I'm going to add a couple more options you know stacked with about and going set of power at the and now and it's fun to look a lot like what I showed you earlier finding and later in the talk so we'll get to that in a bit so that we get 1 line but not sure it's interactive you can add the you have 0 and they want what I
didn't know what I forgot to put in with a list of all of the different kinds of charts that you can import but but at the moment it's uh it's a what you might expect line in time series of horizon and scattering so said next up is of what you might see me do a couple of the topic there's no works is from brokered audio input output not work and show and when I call output node but in an IPython notebook I see this bird cages successfully loaded so that's how that's how we work with predicate the work and then there's also this output files and which is this the sort of equivalent and so at at the top book I would call out profile and I would give an HTML file and and then when I hit show instead of showing noble it opens a new browser with my static HTML has been has been cited like genome somebody I like to use this extra argument equal CDN which instead of dumping all of the JavaScript and CSS that the power broker in line in the HTML it just it just that puts in a reference to the OK and CDN which takes you all your HTML from the 1 . 6 megabytes down to about 6 K for small plot so it's a it's a decent have been band would that I so yeah that's that's how you get started with spelling spelling of stuff out so plot things we've done the child's
interface and now we will look at the plotting space this is what this is a plot that I couldn't build with the charts interface and there isn't there isn't a chart that's the sort of prebaked for me that does this have this categorical axis on the left slide here splitting up the different kinds of activities I get to get up to have a time axis on the time series on born here and then I have these rectangles life plotted across so once again I'm
going to and and going try was test data 1st this time i'm gonna build my own common data source you notice I
didn't have to do that with charts i just threw in a data frame and it just better job but this time I'm going to have to build my own collimators also I'm going to do it by passing a dictionary and then I'm going to instantiate my figure the figure doesn't do anything on it's not effective by just to show here what I get is a very helpful error message just come into OK thank you have no glyph rendering them not be of plant thing interesting and so will respond to this this as sort of validation are helping is is new and has a bit sparsity and so there some that's the direct is that that's if you ever see a place where like not wanting to give me an error message you know just throw open issue on their hard because we keep we keep adding these in some of
the once we have also the empty figure and now we have a whole bunch of methods on all of those different places that I showed you over and over and over again for every 1 of those lives there's a method for this key stock wanted to plot quot people wrecked put record the speed of so called quot central and and so on and so forth and so that our omega use the quantity of uh what you would call it a method and
it has been a plot this was just dummy data so I just have to uh linear axis on the on the uh left and bottom here I'm and synonymous let's think about how we might do this our plot so here's our data we have the start and the ending time of each of all the regional type block blocks of time and we have categorical name for all label for each of them this time blocks so we're going to try posting and it's not looking great and they have been given the thing and if I the Council 1 can see is although I try to pass some data a really did try and divide the council it's going to say could also initial ranges and if you're thinking the opening the consul really and this is where these requests for more validation can come and like this is totally something that we could have put 1 of those Arab messages in 4 we haven't done it yet so we should we should do that and then you can ensure all come from but going to the console is always a good place to look if things that don't work I expected to so what happened was instead of if I had a linear data like I had had appeared as a series of numbers when I instantiated my figure it was clever enough to figure out the OK I can figure out the Rangers this is no big deal but when I posted my data with time and categorical axes of like I don't want you want to do here like going to give you some help so so we won't now we're we're instantiating off again we are going to specify the range of the time series within a specified the categories on the left side when we do then we get out something that looks pretty good but not quite right so what you can see is our little blocks of time I like think could mean that if you human see that the back but then then but it is really small and so on what happened is how do you specify height a categorical axis and this is a bit of a time but it's a good 1 to me and when you have time all internal to 10 whatever it's pretty obvious how you specify high which we have categorical axis what does that mean and so that the way we do it OK is that from like the left to the right of the particle acts as a low bottom to the top is not to 1 and so you append a come along to you all to go and label and you add like this . 1 for the bottom 10 0 . 9 for the top the left or the right 1 as the once we've done that if we try again now it's common the height we expected to answer if I change if I change this to be No . 14 0 . 6 there be much narrower and so on so you can play with that as you as you wish and 1 things is saying here it is think about the original data from the original data frame the chart that I showed you was essentially have switched around version of this the
chart function did all of that magic for you it magically figured out how wide make things the processed all the data set are all the you so that you don't have to think about it which is also a mentally doesn't quite do we needed to do and then you have to to do it yourself and I should to be honest 1 always Eilenberg OK with a style using the chart like when I read the code for the chance to figure out how was how was doing all that I was able to
build so there we go OK so that was plotting and a little bit more verbose but a lot more control you can do lots of different things that sometimes the last but not least we answer models and so and this is where we use the lowest level of the to but to build upon charts in the docks
I'm pretty sure I read somewhere that like most people will need to do this but I I like living down here so again embodies the and so once again I preprocessed only data and I made up a dictionary of data sources but I want to that I that I want to plot which looks something like this which is the which is not so as I so this should looks somewhat familiar this is our 1st attempt in making a plot and this should look a lot like what we just showing what we just saw in plotting we are specifying the X explained in the what x range and the wide range because if we don't like you freak out now instead of
will calling method just yet were actually specifying a line here so when we specify aligned with important line from from Berkeley don't models and was saying I want the ax to be to be powered if you like by this this column called timestamp I wonder why to be powered by the columns cold air can hours and then what I'm gonna do is I'm gonna loop through and then add lines that each of my mine and data sources that I want to add so it's allowing me to add lots of different also different lines and so to do that I use that Radcliffe method that I talked about before and I passing column data source and passed in the specification for my life so when I do that this is what I get which is what else full but is not beautiful and and that's because they're the models level we really do have to spell everything else the 1st thing I wanna spend some color and by OK has a whole bunch of built-in palettes for you I would highly recommend and using the full the can of course that's value and politics and policy just a list of and the the heck school I GBA tuples a whole different bunch of things and you can see the reference at the pallets documentation so let's try again with a little bit more style and again we just have all ranges specified we're going to try a bit of background failed and water-filled semester with this and now we're going to and we had some layout so this is where we're adding all linear axis on the left and all the time axis on the bottom and then now outline the specification is a little bit more complicated when I only specified the x and the y we specifying a column with specifying some line with and so on and then once again we're just adding using this active method use the source use of force is the source and the government is the source and add an avalanche and once we do that
things that pretty promising and and so and we can we can really start out we can really start messing with this so far just turn this into a method so I can make it nicer repeatable I have to
and now what I've done is I wanted to add so this has no tools on the right the charts in the plotting came those tools was both of the books now we have the money yet the tools of cells to do this is very easy you just use of tools and you specify that so you want to add and now we have turned out and that's also except but I don't really want to pay up and down to the mechanisms for my data so I will try constraining its itself constraint equals where all
that and work it's with what happened all thank you thank
and have told me that can train as a constraint is unexpected view and the thing that is expecting all dimensions named cross-sectional tags and so this part of the error reporting about I find incredibly useful if you if I can't remember what you know what it wants often just bring garbage so that tells you was expecting and which is really handy so if anyone dimensions so who would you Python
fail always history to myself and now 0 at that thank you change the change of tomato and we're going so that I wanted dimensions I think it's said yeah it did say that but not saying gone unexpected error and is looking for a list and the list has to be that contain with high x or y but it just got which hidden yeah let's say again there's is the properties and reporting and this is value reporting and which is part of what we used to help us build to serialize them from Python to obtain a job script is also a very helpful for debugging and you'll code is
again and now is not a turns left and right
electron go up and down so much I might want to try so we can keep going and going with that's that's all I will spend from now on so quick
mention all the examples in the boat posted there's the there's the gallery on the site but if you actually download the repo and finds that the examples directory there were just a bit Julian examples in that and in particular forgetting start with model they're incredibly helpful Sertoli you recommend just downloading them running such style and we started to see a little bit of that and just now on the models but styling it is possible for every single level for plotting charts models it just depends on how you want to do a really similar show you for charts and and models and then you take a picture so you In the interest in finding a stable prototyping and on when you this is us making about shot just like we did earlier and once we've got that we can then just start to all of the activities of the tool 1 occasion the background fill the outline and so on we go and we grab the glitz and we can specify the
focal line color we you know and we set the that the treatment of the trees and finally we show and it looks it looks gorgeous and so on when I went in the IPython working at 1 the nice thing about it is the complete and the fact that you can really sort of use IPython notebook to sort of help you see what you know what the attributes you might have available to you or not and so that's 1 of the ways that especially on I used to play around with the with broken now with models but we we've we skeletal 1st right we don't create something and fix that we spend all as we go and so I like to do is and and the other thing we like to do if we're making
lots of plots and we all woman to look the same is we can start to build these dictionaries
of properties like online colors and so on and we can just pluck them into all the axes or we construct the structure and properties into all of the the plots so I build up this and the typically build up a style she and the couple's policy on my colors and having and things like that also the mayor of my CSS if I'm building a Web a web site and as and said I consider have common colors and and and things like that cross and then I have this plot properties dictionary axis properties dictionary and so on set up in my and in in in just a file called constants and then when I come to build 1 fall in models it actually starts to look quite clean I just make a plot open book properties that make my 2 axes they show all these
comments stylings again I make 2 rectangles the shell is common stylings and so this is why I kind of I kind of like working with models is because I I'm I'm doing a lot of heavy customization to the great and and I find this fairly clean as opposed to that big sort of quite verbose version that you end up doing we fix all the attributes of the charter but he still writing anything is possible such as layouts and there if
you just working within you're not interested in putting stuff on the web and there's there's plenty
that sort of in the box to help you make something and from the
get go and in particular there's a lot of the plot of the invite bucket I and what they do is they
just kind make rows and columns and and it's pretty it's pretty and self-explanatory so we've got here of the plot we've nested inside and explore and and 2 shots so I a lot across here we've sort of lined up all 3 things this is not what what this is just sort of giving demo what you know what you could do it and and and then I stacked on top of and some of the plots and so you could say that I into an HTML using the output file method and you're going to get you going to get something that's pretty preventable and that and all of these and you know all of these plots can can interact with each other once they're in the same way a document together and if you if you spell it all and that's the thing about this all those things will be able to interact together because I didn't it's in the well I use if that's the very high level I used a very low level and bed functions and again I to use this I the components method
and I take a dictionary of all my plots and and what the compare method gives me back in my HTML script and a dictionary of all of the data that I have to the div tag
so they have to stick into an HTML so I'll take a template this is a very simple 1 where I've just imported by OK and and maybe since the essence of the top and I've I've started to template in mind the difference that the barricades in the back and template in very important my script and using that that rendering out with the context descriptor there's which if
you're in this works in Django ginger whatever the templating languages it's all the same but
comes with ginger built-in so that's kind of convenient you can start to build this is a single page had H 1 building for my times lecture and this is the actual HTML page likely to be rendering through a web application all and all is the static HTML so that's layout and I'm pretty sure fabulous talk a bit more about embedding and
stuff in more detail at a later so if that was too
fast although the more I and so with all non durable promise that adding to it the pandas DataFrame method to HTML which tend to frame into into a nice HTML
table you can make everything that you that you see at these these tables here and tables this is all plotting
plot robot shot these are line charts and we've got it all
but with a nice and what's
what's different about it is I believe that the reason nice user my templated using of CSS and and and and comes out very nicely so
last but not least interactive so there's 2 parts of interactive at the 1st part has been built into a bucket for quite a while we have all tools like all the slides in impact which would be talking about a little bit and the shared selection panning and singer quickly run through how to do that and so just getting started I have a simple set of data and the 1st thing and I'm going to share some ranges and so what I've done here is a bit of figure at about 3 fingers sorry about sat side by side and in the 2nd figure I've used P 1 is x range right and then the 3rd
figure I've used the P. ones X Y and the X range and its why range and so when I do that it means that if I hadn't left to right it's going to handle all of the plots when I can up and down because I only shared the Y range with 1 of the plot only 1 is changing so this lets you sort of a there's lots of different times when you might be wanting to see different dimensions in and how they compare as you can plot the fundamental different plots that sought to move around and saying this is very handy and the other thing that we've done here is we've shared souls across them so instead of making different sources the different plots I use 1 source but with all of my data and and I shared
across my 3 at my 3 different plots of but I plotted different things my left plot has x no x and y all my middle part and so on and so once shared when I start using selections and they can have was selections Valtchev across the culture across all different selections and this is I'm running a bit
long time and very sorry about that but this is the spelling for how to do holders which are not going to talk
about a minute with through interactions to to
so this is that this is a quick example of something very nice I did with linking selections so when I click on a country this number here that this is the name of the country of states that the value of when I click release of the time I've also shared across tags in Somalia's updated here when I click on garment if I go back to my 1st have gone it will still be selected so that a bit more sort of sophisticated example of
what you can do without linking and last but not least I have 4 minutes and 14 seconds the wiki through callbacks and then February gonna really taken from a softening so-called acts have just been added to by OK and this super and that they allow you to write a tiny piece of javascript all giant is adjusted to be 1 too but have the body right and JavaScript in your Python code and you you can start to notice to do really sophisticated interactions and that currently available on the sort of weird and somewhat ad hoc but a subset of all of the of all the components of OK and that's the list there and as a web developer I really love this because what I really want is that that really rich kind of experience nothing crazy fancy nodding sort of computation on the set of all I will be giving people a chance to really play with the graphical and and this is really allowed me to do this so this is 1 I don't recently that got this slide with the Boston is about kay slider and what I'm doing very simple whenever the value 1 over a slide the value of this number at the back here changes and the data sources the power the the power of the circles of switches out so this is something that is a completely standalone pick piece of HTML Oldenburg and using this new callback mechanism if you have a job script more than life itself and there are and then we have where we're going we're starting to in the same way that we made uh charts as the sort of canned one-liners that will sort of dual magic for you was starting to build up these actions so a common thing might be used so you tap on selected a glitch and and and URL opens so the 1st action made the neural but more sort of pre-built things you never have to write Javascript coming up here is an example of how to use and of how to use the call back and so that use type were just as capable and so let's say so that we we we call we make call back and we have some code and like change the selected value to new thing and when it now instead of just adding a tool toolholder tool we add it with all callback was exciting here and it's a little hard to see when you get used to it you realize how magic is is i have passed I passed in these arguments of what I've done is I've given a name my column data sources and I've posted in the Python objects so now when I in my job prepared I can use the word I can use my column data sources that as the as a
java scripts and objects and I can start playing with that it's like I was playing with my Python object so you don't have to do any magic you can sort of be playing with your Python objects in in in Java Script and if you use that components method where you just have them all in 1 component of methadone all in 1 script that's how you can start interacting across all of the different plots and value is going to have to show you all about that later so with unless other interesting so that
yeah yeah I so I can repeat that the yes you may like a Google map world of OpenStreetMap or whatever and there the 0 sorry the
question was can you and can you embedded Google Street may a Google map on OpenStreetMap that there is a there is that she had a gene map and plot like Bob Charles and about like a plot the instantiate which works OK hands as but we want to make it better and 1 of the things I meant to reading the summary that working on our mapping support in general which is not as far as as we would like it but it's it's really how my do this is only 1 of the down yeah the sample so in the afternoon we have 2 possible to learn a little bit more about so I want to thank you for adults we have no
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation
Computer animation


  700 ms - page object


AV-Portal 3.8.0 (dec2fe8b0ce2e718d55d6f23ab68f0b2424a1f3f)