Getting started with Bokeh / Let's build an interactive data visualization for the web..in Python!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 16 | |
| Number of Parts | 173 | |
| Author | ||
| 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 | |
| Identifiers | 10.5446/20117 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Bilbao, Euskadi, Spain |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
00:00
World Wide Web ConsortiumInteractive televisionBootingDiscrete element methodServer (computing)Curve fittingMetropolitan area networkLevel (video gaming)Uniform resource locatorComputer animation
04:24
Maxima and minimaReal numberMetropolitan area network
05:20
LaptopInteractive televisionEndliche ModelltheorieDiscrete element methodPersonal area networkMetropolitan area networkUrinary bladderFrame problemBuildingHypermediaConnectivity (graph theory)Source codeSound effectCore dumpIntegrated development environmentTable (information)Physical lawLevel (video gaming)Normal (geometry)Pattern languageVideo gameData dictionaryInteractive televisionEndliche ModelltheorieQuicksortKey (cryptography)Different (Kate Ryan album)Frame problemMathematicsComputer animation
07:44
Computer fileKernel (computing)Cellular automatonFrame problemMetropolitan area networkHigher-order logicAttribute grammarSubject indexingDifferent (Kate Ryan album)Multiplication signFrame problemVector spaceSource codeLevel (video gaming)Endliche ModelltheorieQuicksortObject (grammar)Figurate numberBitComputer animation
08:45
Data modelCellular automatonEndliche ModelltheorieAttribute grammarMetropolitan area networkKernel (computing)Computer fileCellular automatonEndliche ModelltheorieAttribute grammarUniform resource locatorModule (mathematics)Different (Kate Ryan album)Similarity (geometry)1 (number)Computer animation
09:16
Attribute grammarCellular automatonMetropolitan area networkSquare numberLevel (video gaming)Function (mathematics)Online chatGoodness of fitFile formatEndliche ModelltheorieShape (magazine)BitDifferent (Kate Ryan album)QuicksortProcess (computing)Multiplication signInterface (computing)HorizonCombinational logicLevel (video gaming)WordGateway (telecommunications)Game controllerDefault (computer science)Functional (mathematics)Frame problemWeb 2.0Module (mathematics)Line (geometry)LogicComputer animation
11:53
Metropolitan area networkKernel (computing)Cellular automatonComputer fileSystem callInsertion lossTotal S.A.Power (physics)Process (computing)Musical ensembleQuicksortoutputBitLine (geometry)Covering spaceComputer configurationMultiplication signFrame problemWeb 2.0CodeSet (mathematics)Software repositoryObject (grammar)Different (Kate Ryan album)Electronic mailing listZoom lensComputer animation
13:42
Metropolitan area networkFunction (mathematics)Asynchronous Transfer ModeLaptopDifferent (Kate Ryan album)Content delivery networkElectronic mailing listEqualiser (mathematics)Musical ensembleLine (geometry)HorizonParameter (computer programming)Function (mathematics)Profil (magazine)Service-oriented architectureComputer fileoutputMoment (mathematics)Equivalence relationWeb browserExpected valuePower (physics)Time seriesInterface (computing)Band matrixSystem callQuicksortScattering1 (number)Asynchronous Transfer ModeComputer animation
15:07
Metropolitan area networkTestdatenDot productFunction (mathematics)QuadrilateralTime seriesMultiplication signInterface (computing)Heegaard splittingSoftware testingSpacetimeRectangleSlide ruleCartesian coordinate systemDifferent (Kate Ryan album)Source codeVideo gameGreatest elementQuicksort
15:43
TestdatenLaptopFunction (mathematics)Kernel (computing)Cellular automatonCloningMetropolitan area networkComputer fileSystem callZoom lensVideo game consoleOpen setSet (mathematics)Menu (computing)Tape driveStatisticsMaxima and minimaValue-added networkGamma functionBlock (periodic table)Category of beingType theoryMultiplication signRange (statistics)BitGreatest elementRight angleRow (database)Morley's categoricity theoremParticle systemNumbering schemeError messageVideo game consoleRevision controlSparse matrixCartesian coordinate systemProcess (computing)Time seriesFigurate numberOnline helpValidity (statistics)Message passingQuicksortSeries (mathematics)Frame problemKey (cryptography)SicOpen setFunctional (mathematics)QuadrilateralPoint (geometry)Clique-widthSource codeCircleSet (mathematics)Computer animation
19:58
Maxima and minimaMetropolitan area networkEndliche ModelltheorieFunction (mathematics)Storage area networkData dictionaryRange (statistics)Different (Kate Ryan album)CodeLevel (video gaming)Set (mathematics)Source codeBitGame controllerFunctional (mathematics)Endliche ModelltheorieFreewareLine (geometry)Computer clusterComputer animation
21:26
Line (geometry)Dot productMusical ensembleBinary fileMetropolitan area networkEndliche ModelltheorieComputer fileKernel (computing)Cellular automatonPrice indexLucas sequenceSystem callPort scannerExt functorBit rateCartesian coordinate systemPersonal area networkData miningSource codeCAN busVideo gameLine (geometry)BitForcing (mathematics)Latent heatGreatest elementTupleDifferent (Kate Ryan album)TimestampLevel (video gaming)Loop (music)Cartesian coordinate systemHecke operatorRange (statistics)Multiplication signEndliche ModelltheorieDefault (computer science)QuicksortElectronic mailing listHexagonComputer animation
23:38
Open setDot productPort scannerLine (geometry)Endliche ModelltheorieBit rateKernel (computing)Cellular automatonMathematicsComputer filePersonal area networkArmMetropolitan area networkHand fanExt functorMaxima and minimaMechanism designRight angleConstraint (mathematics)Cellular automatonCuboidComputer animation
24:26
Metropolitan area networkEndliche ModelltheorieRothe-VerfahrenCloningKernel (computing)Cellular automatonDot productSystem callTabu searchGradientGreatest elementComputer fileInterior (topology)Cartesian coordinate systemPersonal area networkInclusion mapGrand Unified TheoryElement (mathematics)ArmAnalog-to-digital converterCloud computingDrop (liquid)Insertion lossControl flowCurvatureHand fanError messageCategory of beingElectronic mailing listConstraint (mathematics)MereologyDimensional analysisProcess (computing)Right angleView (database)Scripting languageMathematicsTraffic reportingCodeExpected valueAttribute grammarException handlingComputer animation
25:41
Hand fanModul <Datentyp>Endliche ModelltheorieMetropolitan area networkSample (statistics)Port scannerArmComputer fontBitDirectory serviceEndliche ModelltheorieTelecommunicationSoftware repositoryPrototypeUniform resource locatorLine (geometry)Attribute grammarMultiplication signXMLComputer animation
26:54
Form (programming)GradientAlpha (investment)Metropolitan area networkFile formatComa BerenicesAutomorphismMaxima and minimaTotal S.A.Cartesian coordinate systemEndliche ModelltheorieExt functorMusical ensembleAttribute grammarRight angleEndliche ModelltheorieNetwork topologyQuicksortOnline helpCategory of beingData dictionaryLine (geometry)LaptopComputer animation
27:43
Endliche ModelltheorieMetropolitan area networkCartesian coordinate systemRothe-VerfahrenMaxima and minimaValue-added networkWeb 2.0Data dictionaryCategory of beingLogical constantEndliche ModelltheorieCartesian coordinate systemWebsiteComputer fileData structureOpen setGraphics tabletXML
28:26
Total S.A.Cartesian coordinate systemMetropolitan area networkLaptopFunction (mathematics)Plot (narrative)Cellular automatonSystem callKernel (computing)Time line <Programm>Newton's law of universal gravitationGrand Unified TheoryComputer fileLogarithmRectangleAttribute grammarCuboidEndliche ModelltheorieGastropod shellQuicksortRevision controlWeb 2.0Computer animation
29:05
Metropolitan area networkMatroidGrand Unified TheoryConnectivity (graph theory)Level (video gaming)Functional (mathematics)QuicksortFunction (mathematics)Row (database)Demo (music)Computer fileWeb 2.0
30:15
Division (mathematics)Machine codeKernel (computing)Cellular automatonComputer fileMetropolitan area networkPlot (narrative)Menu (computing)Maxima and minimaSystem callScripting languageLink (knot theory)Time line <Programm>Connectivity (graph theory)Formal languageScripting languageDivision (mathematics)Data dictionaryTemplate (C++)Context awarenessCodecDifferent (Kate Ryan album)Computer animation
30:58
Metropolitan area networkAerodynamicsValue-added networkDemo (music)Discrete element methodBitWeb applicationWeb pageEinbettung <Mathematik>BuildingMultiplication signRight angleTable (information)Frame problemComputer animation
31:38
Metropolitan area networkArmDemo (music)Interactive televisionZoom lensPersonal area networkFunction (mathematics)Haar measureInformation systemsMatroidTable (information)Line (geometry)RoboticsDifferent (Kate Ryan album)Template (C++)Interactive televisionBitFigurate numberMereologyRange (statistics)Right angleSelectivity (electronic)Slide rulePersonal area networkSet (mathematics)Zoom lens1 (number)2 (number)Computer animation
32:42
Drop (liquid)Point (geometry)Ring (mathematics)Kernel (computing)Cellular automatonSystem callReal numberMetropolitan area networkPlot (narrative)Source codeSelectivity (electronic)Different (Kate Ryan album)Dimensional analysisQuicksortMultiplication signFigurate numberSynchronization1 (number)BitRange (statistics)Shared memoryMereologyComputer animation
33:55
Metropolitan area networkInteractive televisionPersonal area networkZoom lensMathematicsMaxima and minimaOpen setUniform resource locatorMultiplication signInteractive televisionWordSelectivity (electronic)WikiWeb-Designer2 (number)State of matterVideo gameMathematicsElectronic mailing listSource codeNumbering schemeRight angleProcess (computing)Type theoryConnectivity (graph theory)Parameter (computer programming)Set (mathematics)System callSlide ruleSubsetMechanism designNeuroinformatikQuicksortCircleGroup actionObject (grammar)BitPower (physics)CAN busCodeScripting languageServer (computing)WritingUniform resource locatorLink (knot theory)Computer animation
37:11
Machine codeTime line <Programm>Demo (music)Endliche ModelltheorieInteractive televisionServer (computing)Storage area networkConnectivity (graph theory)Object (grammar)Java appletScripting languageDifferent (Kate Ryan album)MultilaterationLevel (video gaming)Open setComputer animation
38:02
Level (video gaming)BitElectronic mailing listMappingOpen setSampling (statistics)Lecture/Conference
Transcript: English(auto-generated)
06:14
Going to be talking about at 3 15 about really diving into interact the interactive component and building building sort of bokeh out bokeh dashboard and stuff so be a really great segue this afternoon.
06:26
So data at the heart of bokeh is the model the column data source and it's very simple. It's just a table of data. Just like you might expect and so.
06:42
So we have a we take a data dictionary in python a normal dictionary keys array and. We also how many people here of work with pandas. Almost everybody if you haven't worked with pandas it's fine it's a lot like excel but way better in python and
07:05
it's not a lot like excel you'll change your life but you can the core of it is you can pass it a dictionary and you get out a table of data and there's lots of other ways you can do you can read from excel from jason from csv and so on if you haven't used use pandas before I would totally recommend Brandon Rhodes.
07:25
Pandas tutorial from python 2015 it was it's it really boils down like how to really just understand it but keeps it a nice a nice simple level and so you can make your column data source from either a dictionary or from a pandas data frame and and your data ends up represented
07:44
like that and you'll notice the one difference between my when I passed in my dictionary and when I passed in my data frame is that I've. I've got this extra this extra key value here the index the index has come from has come from the pandas has come from the pandas data frame it's it's this left index here that it's it's named index for us so that is the column
08:09
data source the next thing that's at the heart of bokeh is the plot and I'm skirting over some details here because I don't. I don't think they're that important there are sort of there's this models plotting charts these 3 different ways to kind of
08:25
use bokeh but they have a lot in common and you'll you should find it pretty easy to jump between the 3 sort of levels but I think it can be a bit confusing knowing exactly what to do from the get go which is why I'm trying to sort of show you all 3 so at the lowest level we have the plot the plot object.
08:43
The next level up we have the figure and finally we have the charts. They're all different things that come from different modules within bokeh but they you're going to see they all have the same kind of attributes attached to them like a toolbar location background fill and so on so once you're working with one you can kind
09:01
of reasonably assume that the other ones going to kind of behave similar and they all have 3 really important methods on them. Add tools add layout and add glyph and and if you can remember those 3 methods you're going to get a really long way into building all of your into all of your plots glyphs I hear you say.
09:23
No one said glyphs glyphs to me the word means nothing I was so confused for a long time it just means shapes and I don't know why it's called glyphs I'm sure there's some very very logical reason but. Glyphs are just shapes and so this is this is actually from the examples and these are all of the different
09:40
kinds of shapes that you can spell within bokeh and in some combination of all of these is a whole nother set here in some kind of combination of all of these things you can make pretty much anything that you could think of. If you couldn't we I'm sure we would add another one but we really have got most most things covered here so glyphs are just shapes.
10:02
So we're building a dashboard we've talked about data let's talk about charts. But I keep going on about this models plotting charts. Thing and I want to just lay it out a little bit more so there's these 3 modules bokeh dot models. Bokeh dot plotting and bokeh dot charts bokeh dot models is the lowest level of bokeh but it doesn't mean it's a level you
10:26
should be afraid of it's an awesome level I love to live in the models level everything above it is built on top of models. So it offers you the most control but it does mean you have to do all the work yourselves on the complete opposite end you have
10:41
bokeh dot charts these are one line functions that let you spit out a bar chart spit out a line chart spit out a horizon chart. It just takes your data frame and gives you something awesome so it's very very quick to use but it sort of does all the magic for you bokeh dot plotting kind of lives in the middle and you have to sort
11:03
of organize your data for it but it then tries to pick sensible default so you don't have to add the axes and add the grid and so on so it tries to sort of give you something you want but gives you a bit more control where you want to work is really a matter of personal taste personally coming from a web world. I started with charts and charts for me were a gateway to models but I think a lot of people coming from the
11:24
data science the data science world find plotting sort of more intuitive but you'll see them all and you can you know you can you can choose what you will so let's start with charts so this is one little pocket of the dashboard that I was that I was done wearing and this this chart here this bar chart here has come out of has come out of the charts interface.
11:48
So one of the things about the charts interface is that it it kind of does some magic it just takes your data and spits out a chart so you kind of need to know what it wants the data to look like otherwise it can't do its magic so often when I'm getting
12:03
started with the chart especially if I haven't used it before I'll just set up some some dummy data to make sure it's kind of roughly doing what I expected to do before I I put in my real data because then you know who knows whether it's it's okay or my data that's. Being weird so we just have some we just have a simple thing here we've spent some
12:22
time with ponies and unicorns and other magic things and now we get to importing our bar chart. And so we've imported it from the charts function we import bar and now we just call it with our data frame and we show the bar chart one line. And here we have here we have our chart we have zoom we have reset we can save it we can do that we
12:46
can resize it and this is this is a web object you could share this HTML it's all going to work beautifully for you. So that's working how we expected to so now we're going to try with some of our real data. All of the code that gets all the real data is in that the repo that I shared with you earlier I'm not going to cover how I
13:07
made it today this is the raw data and then this is the sort of process data that I did so once again I spit out my data. That's I spit out my bar chart which is almost how I want it so now I'm going to add
13:21
a couple more options I'm going to stack my bar chart and I'm going to set a pallet and now. It's it's starting to look a lot like what I showed you earlier styling is later in the talk so we'll get to that in a bit so there we go one line bar chart it's interactive you can add hover you have zoom and there you are
13:42
what I didn't what I forgot to put in was a list of all of the different kinds of charts that you can import but at the moment it's it's it's all the ones you might expect line and time series and horizon and scatter and so on. So next up is IO what you might have seen me do a couple of the top of those notebooks is from
14:04
bokeh.io import output notebook and show and when I call output notebook in an ipython notebook I see this bokeh.js successfully loaded so that's how that's how we work with bokeh in a notebook and then there's also this output file which is. The sort of equivalent and so would then at the top of my notebook I would call output file and I would give
14:25
it an HTML file name and then when I hit show instead of showing in the notebook it opens a new browser with my static HTML has been has been saved and I could share that with somebody I like to use this extra argument mode equals CDN which instead of dumping all of the JavaScript and CSS that power bokeh in line into the HTML it just it just.
14:50
Puts in a reference to the bokeh CDN which takes your HTML from sort of 1.6 megabytes down to about 6 K for a small plot so it's a it's a decent bandwidth saver so yeah so that's that's how you get started
15:05
with spitting spitting your stuff out so plotting we've done the charts interface and now we want to look at the plotting interface. This is a plot that I couldn't build with the charts interface there isn't there isn't a chart that's sort of pre baked for me that does this I have this categorical axis on the left side here splitting up the different kinds of
15:26
activities I get to get up to I have a time axes on the time series axis on the bottom here and then I have these rectangles that I've I've plotted across so once again I'm going to I'm going to try with some test data first.
15:41
This time I'm going to build my own column data source you notice I didn't have to do that with charts I just threw in a data frame and it just spat out a chart but this time I'm going to have to build my own column data source and I'm going to do it by passing in a dictionary and then I'm going to instantiate my figure. Now figure doesn't do anything on its own in fact if I just do show P here what I get is a very
16:02
helpful error message just come into bokeh saying you have no glyph renderers I'm not going to be able to plot anything interesting so we're starting to this this sort of validation and error helping is is new and so it's a bit spotty so there are some bits that do it and some bits that don't so if you ever see a place where you're like why didn't
16:20
they give me an error message you know just throw up an issue on GitHub because we keep we keep adding these in. So the once we have our sort of empty figure now we have a whole bunch of methods on it remember all of those different glyphs that I showed you over and over and over again for every one of those glyphs there's a method so there's P dot quad to plot a quad there's P dot rect
16:43
to plot a rect there's P dot circle to plot a circle and so on and so forth and so for our one we're going to use the quad. What do you call it method and and spit out a plot this was just dummy data so I just have linear axes
17:03
on the on the left and bottom here and so now let's let's think about how we might do this for our plot. So here's our data we have the start and the end in time of each of our of each of our type block blocks of time and then we have our categorical name for our label for each of the those time blocks so we're going to try plotting this.
17:27
And it's not looking great it hasn't given us anything and if I open the console what I'm going to see is although I tried to pass it some data and I really did try if I open the console it's going to say could not set initial ranges and if you're thinking.
17:45
Opening the console really this is where these requests for more validation can come in like this is totally something that we could have put one of those error messages in for we haven't done it yet so we should we should do that and and and I'm sure it will come but going to the console is always a good place to look if things didn't.
18:03
Um didn't work how you expected to so what happened was instead of if I had linear data like I had had up here just a series of numbers when I instantiated my figure it was clever enough to figure out that OK I can figure out the ranges this is no big deal but when I passed it my data with time and categorical axes it's like I
18:24
don't know what you want me to do here like you got to give me some help so so we now when we're instantiating our figure. We are going to specify the range the time series and we're going to specify the categories on the left side when we do this.
18:41
We get out something that looks pretty good. But not quite right what you can see is our little blocks of time are like teeny tiny I don't know if you can even see that the back but they're there but they're just really small and so what happens is how do you specify height on a categorical axis this is a bit of a tangent but it's a good one to know so when you have time or you
19:07
know naught to 10 or whatever it's pretty obvious how you specify height or width when you have a categorical axis what does that mean and so. The way we do it in bouquet is from like the left to the right of your categorical axis or the bottom to the top is naught to one and so you append a colon to your to your label and you add like naught point one for the bottom
19:28
to naught point nine for the top or the left or the right or whatever and so once we've done that if we try again. Now it's come the height we expected to and so if I change if I change this to be naught point four to naught point six
19:42
they've been much narrower and so on so you can play with that as you as you wish and one of the things you're seeing here is. Think about that original data frame that original data frame the chart that I showed you was. Essentially a switched around version of this the chart function did all of that magic for you it magically figured out
20:03
how wide I'm going to make things that processed all the data set that all up for you so that you didn't have to think about it which is awesome until it doesn't quite do what you need it to do and then you have to do it yourself and actually to be honest one of the ways I learned bouquet was I. Started using the charts and then I went and read the code for the charts to figure out how it was how it was doing it all and then I was
20:21
able to build my own so there we go okay so that was plotting a little bit more verbose but a lot more control you can do lots of different things there and so last but not least we get on to models and so this is where we use the lowest level of bouquet to build up our charts in the docks.
20:41
I'm pretty sure I read somewhere that it's like most people wouldn't need to do this but I I like living down here so you know but each to their own so once again I've preprocessed all my data and I I've made a dictionary of data sources that I want to. That I want to plot which looks something like this.
21:04
Which is which is nice so so this should look somewhat familiar this is our first attempt at making a plot and this should look a lot like what we just saw in what we just saw in plotting we are specifying the X range in the X range and the Y range because if we don't bouquet free cow.
21:24
Now instead of we're not calling a method just yet we're actually specifying our line here so when we specify our line we've imported line from bouquet dot models and we're saying I want the X to be to be powered if
21:40
you like by this this column called timestamp I want the Y to be powered by the column called cume some hours. And then what I'm going to do is I'm going to loop through and I'm going to add lines for each of my data sources that I want to add so it's allowing me to add lots of different lots of different lines and so to do that I use that ad glyph method that I talked about before and I pass in a column data source.
22:06
And I pass in the specification for my line so when I do that this is what I get which is what I asked for but is not beautiful and that's because down at the models level we really do have to spell everything out so the first thing we
22:21
might want to spell out is some color and bouquet has a whole bunch of built in pallets for you that I would totally recommend. Using as default but you can of course spell your own pallets and pallets are just a list of either hex or I GBA 2 pools or 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 a little bit more style.
22:47
Again we just have our ranges specified now we're going to try a bit of background feel a bit of border film sort of mess around with this and now we're going to add we're going to add some layout so this is where we're adding our linear axis on the left and our date time axis on the bottom.
23:05
And then now our line the specification is got a little bit more complicated when I only specifying the X and the Y. We're specifying a color with specifying some line with and so on and then once again we're just adding using this ad glyph method use the source.
23:23
How do I use the force use the source and use the source and add the add the line and once we do that things start to look pretty promising and so. We can we can really start we can really start messing with this so if I just turn this into a method so I can make it nice and repeatable.
23:48
Did you. And now what I've done is I wanted to add so this has no tools on it right the charts and the plotting came with all those tools just poof out the box now we have to manually add the tools ourselves to do this it's very easy
24:02
you just use add tools and you specify the tool you want to add and now we have pan added and that's awesome except. I don't really want it to pan up and down cuz it doesn't make any sense for my data so I'm going to try constraining it so. Constrain equals with all that didn't work that's weird what happened oh thank you bokeh it has told me that can train is constrain is unexpected
24:30
attribute and the things that it's expecting are dimensions name plot session or tags and so this part of the error reporting of bokeh I find incredibly useful if you if I can't remember what you know what it wants I'll often just put in garbage so that it tells me what it's expecting.
24:46
Which is really handy so it said it wanted dimensions so I python fail oh I think I just deleted my cell hang on. No oh it's there thank you know I changed the change it to markdown there we go so it said it wanted dimensions.
25:06
I think it said that. It did say that but now it's saying it got an unexpected error and it's looking for a list and the list has to either contain with high X or Y but it just got with it and get a list so again there's the properties reporting and then there's this value
25:25
reporting which is part of what we use to help us be able to serialize from python to JavaScript but it's also very helpful for debugging. Your code as you go and now has our it pans left and right and I can't go up and down however
25:43
much I might want to try so we can keep going and going with that but I will spare you for now so. Quick mention of the examples in the bokeh repo so there's the there's the gallery on the website but if
26:01
you actually download the repo and find the examples directory there are just a bajillion examples in there and in particular for getting start with models there incredibly helpful so I would totally recommend just downloading them and running them so styling. We started to see a little bit of that just now on the models but styling is possible.
26:21
For every single level for plotting charts models it just depends on how you want to do it really so I'm going to show you for charts and models and you know take a pic so. In the interest of time I'm going to skip the little prototyping but.
26:40
On when you this is us making a bar chart just like we did earlier and once we've got that we can then just start to set all of the attributes the toolbar location the background fill the outline and so on we go and we grab the glyphs and we can specify their full color line color we you know and we set the attributes and we set the attributes and we set the attributes and then finally we show it and it looks it looks gorgeous and so.
27:05
When I when you're in the ipython notebook you know the one of the nice things about it is the autocomplete and the fact that you can really sort of use ipython notebook to sort of help you see what you know what the attributes that you might have available to you are and so that's one of the ways that especially early on I used to play around with with bokeh a lot.
27:22
Now with models we spell it all first right we don't create something and then fix it we spell it all as we go and so what I like to do is. And the other thing we like to do. If we're making lots of plots and we all want them to look the same is we can start to build these dictionaries
27:42
of properties like our line colors and so on and we can just slap them into all the axes or we can splat splat properties into all of the plots so I build up this typically build up the style sheet and the top of the style sheet I have my colors and padding and things like that that will sort of mirror my CSS if I'm building a web a website.
28:04
And and so that I can sort of have those common colors and things like that across and then I have this plot properties dictionary access properties dictionary and so on set up in my in a in just a file called constants and then when I come to build my plot in models it actually starts to look quite clean.
28:22
I just make a plot and I put in the plot properties I make my two axes they show all these common stylings again I make my two rectangles they show all these common stylings and so this is why I kind of I kind of like working with models is because I'm doing a lot of heavy customization typically and I find this fairly clean as opposed to that big sort
28:41
of quite verbose version that you end up doing where you fix all the attributes on a chart but each to their own anything is possible. So. Layouts. There's. If you're just working within bouquet you're not interested in putting stuff on the web there's there's plenty that sort of
29:02
in the box to help you make something nice from the get go in particular there's H plot and V plot that are that are invite bouquet dot IO and what they do is they just kind of make rows and columns. And it's pretty it's pretty self explanatory so we've got here a V plot and we've nested inside it and H plot and two
29:26
charts so I H plot across here we've sort of lined up all three things this is not my dashboard this is just sort of giving you a demo of what you know what you could do and then I've stacked it on top of some other plots and so you could spit that into an HTML using the output file method and you're going to get you're going to get something that's pretty presentable.
29:46
And and all of these you know all of these plots can can interact with each other once they're in the same document together if you spell it all in a nested thing like this all of those things will be able to interact together.
30:02
Because I typically sit in the web I use. If that's the very high level I use the very low level embed function and again I to use this I use the components method. And I take a dictionary of all of my plots and what the components method gives me back is my HTML script
30:26
and a dictionary of all of the divs that I have to the div tags that I have to stick into my HTML so I'll take a template this is a very simple one where I've just imported bouquet and maybe some CSS at the top.
30:40
And then I've I've started to template in my the divs that bouquet is giving me back and I template in very important my script. And using that rendering that out with the context of the script and the divs which if you're in this works in Django ginger whatever you're templating languages it's all the same bouquet comes with ginger built in so that's kind of convenient you can start
31:02
to build this is an HTML page right I had H1 building a dashboard my time selector and this is the actual HTML page. But I could either be rendering through a web application or always a static HTML so that's layout and I'm pretty sure Fabio is going to talk a bit more about embedding and stuff in more detail later so if that was too fast though they'll be more.
31:23
And so with all of that under your belt. I promise that. Adding to it the pandas data frame method to HTML which turns your data frame into a into a nice HTML table you can make everything that you that you see here these these tables here are pandas tables this is our plotting plot these are our bar
31:46
charts these are line charts and we've got it all with a nice you know and what's what's different about it is I've used. I've used a nice I've used a nice template I've used some nice CSS and and it and it all comes out very nicely so last but not least interactive.
32:05
So there's 2 parts of interactive the first part has been built into bouquet for quite awhile we have our tools like hover select zoom pan which we've been talking about a little bit and the shared selection and panning so I'm going to quickly run through how to do that.
32:21
So just getting started I have a simple set of data and the first thing I'm going to do is I'm going to share some ranges and so what I've done here is I've got a figure. I've got 3 figures sorry that I've sat side by side and in the second figure I've used P ones X range right and in the
32:43
third figure I've used the P ones X range of the X range and it's why range and so when I do that it means that. If I pan left to right it's going to pan out on all of the plots when I pan up and down because I only shared the Y range with one of the plot only one is changing so this
33:05
lets you sort of there's lots of different times when you might be wanting to see different dimensions and how they compare so you can plot different dimensions on different plots but start to move around in sync which is very handy. The other thing that we've done here is we've shared a source across them so instead of making different sources for different
33:23
plots I use one source with all of my data in it and I shared it across my 3 my 3 different plots. But I plotted different things in my left plot has X and Y not my middle plot and so on and so once I've shared a source when I start using selections.
33:44
They can when I start using selections they'll share across they'll share across all the different selections. This is I'm running a bit low on time I'm very sorry about that this is the spelling for how to do hovers which I'm not going to talk about I'm going to whip through interactions.
34:05
To. To show you so this is but this is a quick example of something very nice I did with linking selections so when I click on a country this number here update this the name of the country updates the value updates when I click over on this other tab.
34:21
I've also shared it across tabs and so Molly has updated here when I click on Ghana if I go back to my first tab Ghana will still be selected so that's a bit more sort of sophisticated example of what you can do with that linking. And last but not least I have 4 minutes and 14 seconds to whip you through callbacks and then Fabio is going to really take this and run with it this afternoon so callbacks have just been added to bokeh and they're super awesome they allow you to
34:46
write a tiny piece of JavaScript or a giant piece of JavaScript if you want to but but you write some JavaScript in your Python code and you can start to do really sophisticated interactions and they're currently available on the sort of weird and somewhat ad hoc.
35:02
Subset of all of the of all of the components of bokeh 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 not doing sort of computation on the server whatever but giving people the chance to really play with their infographic a little bit and this is really allowed me to do this so this is one.
35:21
I built recently they've got the slider at the Boston this is a bokeh slider and what I'm doing it's very simple whenever the value whenever I slide the value of this number at the back here changes and the data source that powers the powers the circle sort of switches out so this is something that is a completely standalone piece of HTML all done in bokeh.
35:42
Using this new callback mechanism. If you hate JavaScript more than life itself there are there we're going we're starting to in the same way that we made charts as the sort of canned one liners that will sort of do all the magic for you we're starting to build up
36:00
these actions so a common thing might be you so you tap on that you select a glyph and a URL opens so the first action we've made is open URL but there'll be more sort of prebuilt things so you never have to write JavaScript coming. Here is. An example of how to use of how to use the call back so.
36:27
Excuse that type of where it just says code equals blank there so let's say so that we call we make a call back and we have some code like change the selected value to a new thing.
36:43
And when now instead of just adding a tool hover tool we add it with our call back what's exciting here and is a little hard to see but when you get used to it you realize how magic is is I have passed I've passed in these arguments and what I've done is I've given a name my column data source and I've passed in the Python object.
37:04
So now when I in my JavaScript code I can use the word I can use my column data sources as a as a JavaScript object and I can start playing with that and 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
37:22
in JavaScript and if you use that components method where you just have them all in one components method and all in one script. That's how you can start interacting across all of your different plots and Fabio is going to to show you all about that later. So with one minute left are there any questions.
37:41
Yeah you can show I can repeat it yes you mean like a Google map or a open street map or whatever there.
38:04
Oh sorry the question was it can you can you embed a Google street map a Google map or an open street map or something like that there is a there is actually a G map plot like bar chart or something like that like a plot that you can instantiate which works OK.
38:22
And but we wanted to make it better and one of the things I meant to be doing this summer is actually working on our mapping support in general which is not as hot as we would like it but it's it's really high on my to do list because it's something I want to see done so yeah. Sarah told us in the afternoon we have the possibility to learn a little bit more about Bokeh so I want to thank you for your talk we have now.