OMG, Bokeh is better than ever!
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 | 83 | |
| Number of Parts | 169 | |
| 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/21133 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EuroPython 201683 / 169
1
5
6
7
10
11
12
13
18
20
24
26
29
30
31
32
33
36
39
41
44
48
51
52
53
59
60
62
68
69
71
79
82
83
84
85
90
91
98
99
101
102
106
110
113
114
115
118
122
123
124
125
132
133
135
136
137
140
143
144
145
147
148
149
151
153
154
155
156
158
162
163
166
167
169
00:00
TwitterContinuum hypothesisSoftware developerCore dumpSemiconductor memoryComputer architectureWave packetMultiplication signAnalytic setLecture/Conference
00:31
Continuum hypothesisCore dumpComa BerenicesEmailSinguläres IntegralServer (computing)Client (computing)Extension (kinesiology)GeometryContinuum hypothesisEmailMedical imagingMultiplication signPlotterAreaComputer animationJSON
01:18
Number theoryGoodness of fitEndliche ModelltheorieComputer animationLecture/Conference
02:19
Continuum hypothesisProjektive GeometrieFocus (optics)Open sourceNumber theoryMereologyGoodness of fitPhysical systemComputer animation
03:22
Library (computing)Keyboard shortcutWebsiteVisualization (computer graphics)Electronic mailing listResultantProjektive GeometrieLecture/Conference
04:12
Electronic program guideLibrary (computing)DisintegrationWorld Wide Web ConsortiumStapeldateiInteractive televisionWeb browserVisualization (computer graphics)Online helpPlot (narrative)Complete metric spaceModemSoftware developerPresentation of a groupVariance3 (number)InformationPresentation of a groupSoftware developerPlotterImplementationCore dumpWritingTheoryComputer animation
05:12
Physical systemSpecial unitary groupRevision controlComputer animation
05:41
Electronic meeting systemValue-added networkMoving averageArc (geometry)Uniform resource nameWide area networkMenu (computing)Electronic program guideSummierbarkeitSpecial unitary groupInterior (topology)BuildingStorage area networkInformation managementConditional-access moduleMulti-agent systemWechselseitige InformationVisualization (computer graphics)PlotterInformationServer (computing)Multiplication signLibrary (computing)Object (grammar)Moment (mathematics)QuicksortProper mapNP-hardSeries (mathematics)Source code
07:23
Moment (mathematics)WordObject (grammar)Frame problemServer (computing)Multiplication signOrder (biology)WritingPlotterLecture/Conference
08:06
Server (computing)Web browserAsynchronous Transfer ModeSynchronizationSocket-SchnittstelleWorld Wide Web ConsortiumDisintegrationPOKEEvent horizonGUI widgetPlot (narrative)Electronic program guideInformationSanitary sewerAmsterdam Ordnance DatumArmExecution unitMetropolitan area networkPhysical lawServer (computing)Web 2.0Frame problemSelectivity (electronic)Multiplication signMobile appEvent horizonHistogramNetwork socketAreaMilitary baseEndliche ModelltheorieData storage deviceSystem callWeb pageEinbettung <Mathematik>Client (computing)Object (grammar)Asymptotic analysisDistanceFigurate numberState of matterLocal ringInstance (computer science)Focus (optics)AuthorizationMathematicsBasis <Mathematik>Set (mathematics)
10:23
ArmSummierbarkeitMassExecution unitCore dumpServer (computing)Electronic program guideInformationMobile appFilter <Stochastik>Scripting languageType theoryServer (computing)Information securityTheoryLecture/ConferenceComputer animationProgram flowchartXML
11:04
Mobile appSystem callModule (mathematics)Server (computing)File formatSingle-precision floating-point formatRandom numberTheory of everythingHexagonServer (computing)Information securityEstimatorConnected spaceMobile appMultiplication signPlotterRootCodeSystem callFiber bundleDynamical systemScripting languageElement (mathematics)CASE <Informatik>Video gameLecture/ConferenceComputer animation
12:24
Server (computing)Directory serviceFile formatMobile appComputer fileModule (mathematics)Single-precision floating-point formatSimilarity (geometry)Function (mathematics)Default (computer science)Attribute grammarPrice indexTemplate (C++)Cycle (graph theory)Different (Kate Ryan album)Video gameToken ringType theoryData modelParameter (computer programming)Computer fileDirectory serviceMereologyMoment (mathematics)Cycle (graph theory)Field (computer science)Video gameObservational studySeries (mathematics)Server (computing)Lecture/ConferenceXML
13:05
Mobile appDirectory serviceFile formatServer (computing)Single-precision floating-point formatModule (mathematics)Similarity (geometry)Function (mathematics)Computer fileDefault (computer science)Attribute grammarPrice indexTemplate (C++)Different (Kate Ryan album)Data modelType theoryParameter (computer programming)CountingBarrelled spaceRevision controlDirectory serviceComputer fileFocus (optics)Subject indexingServer (computing)Lecture/ConferenceXML
13:57
ArmUniform resource nameRaw image formatValue-added networkBit rateDirectory serviceHarmonic analysisPlotterCircleStatisticsSimulationServer (computing)Endliche ModelltheorieMobile appSynchronizationCASE <Informatik>Medical imagingRadiusSound effectMereologySource codeComputer animation
15:35
Source codeComputer simulationNumber theoryConnected spaceScripting languageSimulationLecture/Conference
16:08
InformationElectronic program guideRepresentation (politics)Interactive televisionWorld Wide Web ConsortiumSource codeMobile appDirected setMoving averageMetropolitan area networkMaxima and minimaSinguläres IntegralServer (computing)Client (computing)Extension (kinesiology)GeometryGamma functionRobotCohen's kappaSpecial unitary groupMountain passComputer iconServer (computing)Computer file1 (number)Mobile appInteractive televisionComputer configurationSerial portAdditionEmailDirection (geometry)State of matterMereologyCycle (graph theory)XMLJSON
16:48
Continuum hypothesisSpecial unitary groupMetropolitan area networkRobotElectronic program guideInformationRepresentation (politics)World Wide Web ConsortiumSource codeDirected setMobile appMUDExtension (kinesiology)GeometrySinguläres IntegralServer (computing)Venn diagramLie groupSummierbarkeitWide area networkArmInformationLink (knot theory)PlotterSlide ruleServer (computing)CASE <Informatik>Direction (geometry)QuicksortGUI widgetMultiplication signScripting languageLevel (video gaming)Type theorySource codeComputational geometryObject (grammar)Order (biology)MathematicsLogicBlogLecture/ConferenceXMLComputer animation
18:21
Intrusion detection systemLine (geometry)Marginal distributionWritingWeb browserScripting languageInterpreter (computing)Java appletClient (computing)Function (mathematics)Endliche ModelltheorieInformationElectronic program guideExtension (kinesiology)FamilyDialectFunctional (mathematics)WritingTranslation (relic)Web browserComputer animationLecture/Conference
19:05
Control flowClient (computing)Line (geometry)Marginal distributionWritingWeb browserInterpreter (computing)Data modelFunction (mathematics)InformationElectronic program guideContinuum hypothesisCountingFunctional (mathematics)Source codeWindowCASE <Informatik>Set (mathematics)Object (grammar)Slide ruleCharge carrierSocial classWeb browserCodeWeb crawlerTwitterPlotterCurveParameter (computer programming)SineSystem call
20:16
Metropolitan area networkVacuumWide area networkPoint (geometry)TheorySlide ruleGame controllerClient (computing)SoftwareLecture/ConferenceSource code
22:13
WordTwitterLaptopComputer fileRow (database)Group actionForm (programming)Symbol tableIntegrated development environmentGravitationCellular automatonLecture/Conference
23:29
Graphical user interfaceContinuum hypothesisAlgebraGrand Unified TheoryClient (computing)Extension (kinesiology)GeometrySinguläres IntegralServer (computing)Web 2.0GUI widgetSocket-SchnittstelleNetwork socketLaptopPlotterInheritance (object-oriented programming)XMLJSON
24:04
Cohen's kappaCuboidComputer-assisted translationContinuum hypothesisPlot (narrative)Number theoryAsynchronous Transfer ModeGUI widgetEmpennageWindowWeb browserInformationElectronic program guideMeta elementPhysical lawLimit (category theory)WordDialectPlotterGUI widgetMathematicsPairwise comparisonRow (database)Cartesian coordinate systemCuboidMedical imagingTwitterWeb pageLecture/ConferenceXML
25:10
Plot (narrative)Physical lawCodeCountingWhiteboardAreaPlotterGroup actionElectronic mailing listDependent and independent variablesComputer configurationFlagLecture/ConferenceDiagram
26:34
Client (computing)GeometrySinguläres IntegralServer (computing)Extension (kinesiology)Endliche ModelltheorieDifferent (Kate Ryan album)Mechanism designQuicksortPhysical systemJSONLecture/Conference
27:06
Continuum hypothesisExtension (kinesiology)Integrated development environmentBuildingSource codeEndliche ModelltheoriePersonal digital assistantTime domainInformationElectronic program guideMereologySocial classData modelAttribute grammarInstance (computer science)String (computer science)Core dumpMetropolitan area networkHydraulic jumpValue-added networkArc (geometry)Wide area networkArmSpecial unitary groupUniform resource nameEndliche ModelltheorieSocial classVotingImplementationWebsiteRight angleDisk read-and-write headGroup actionProcess (computing)Task (computing)Profil (magazine)MathematicsBitInternet forumComputer configurationAttribute grammarClient (computing)Source code
28:24
Extension (kinesiology)Endliche ModelltheorieView (database)CodeAsynchronous Transfer ModeInheritance (object-oriented programming)Scripting languageJava appletLibrary (computing)Social classCore dumpInstance (computer science)String (computer science)Control flowData modelFile Transfer ProtocolVenn diagramMaxima and minimaSimulationWide area networkComputer clusterUniform resource nameSineImplementationAttribute grammarFiber bundleScripting languageSound effectSocial classResultantInstance (computer science)CASE <Informatik>Range (statistics)Endliche ModelltheorieSubject indexingSource codeLevel (video gaming)PlotterWeb pageLibrary (computing)Server (computing)XMLComputer animationLecture/Conference
30:05
Grand Unified TheoryComputer-aided designUniform resource nameSoftware engineeringPlastikkarteArtificial neural networkUniform resource locatorCoordinate systemAreaCodeCuboidDifferent (Kate Ryan album)Endliche ModelltheorieArrow of timeOpen setCASE <Informatik>IdentifiabilitySource codeBarrelled spaceLecture/Conference
31:06
SummierbarkeitInterior (topology)Source codeAlpha (investment)Continuum hypothesisGeometryTerm (mathematics)GoogolServer (computing)CountingGeometryPoint (geometry)TouchscreenSource codeTerm (mathematics)Key (cryptography)XML
31:37
Service (economics)Source codeGeometryMetropolitan area networkBus (computing)MathematicsSoftware testingTesselationGoodness of fitProjektive GeometrieGeometryServer (computing)AreaLecture/Conference
32:11
GeometryClient (computing)Extension (kinesiology)Singuläres IntegralServer (computing)Real numberRevision controlLevel (video gaming)Endliche ModelltheorieInterface (computing)Electronic program guideInformationRegulärer Ausdruck <Textverarbeitung>Uniform resource nameRadiusScalable Coherent InterfaceTerm (mathematics)MKS system of unitsComa BerenicesAngleSpecial unitary groupRadio-frequency identificationSummierbarkeitVarianceArtificial neural networkMIDI3 (number)Game theoryElectronic data interchangeFactory (trading post)Endliche ModelltheorieCore dumpPiCASE <Informatik>Wave packetMarginal distributionForm (programming)JSONXMLComputer animationLecture/Conference
32:41
Client (computing)Extension (kinesiology)GeometryServer (computing)Maxima and minimaFunction (mathematics)Singuläres IntegralPlot (narrative)Royal NavyAlpha (investment)3 (number)Physical lawRaw image formatContinuum hypothesisComputer-assisted translationObject (grammar)System callPlotterTransformation (genetics)Number theoryInterpolationDot productDifferent (Kate Ryan album)JSONComputer animationLecture/Conference
33:15
InformationElectronic program guideArmMUDUniform resource namePoint (geometry)CASE <Informatik>Multiplication signProcess (computing)Computer animation
34:06
InformationWide area networkPoint (geometry)Projektive GeometriePhysical systemSet (mathematics)Formal grammarLaptopLecture/ConferenceComputer animation
34:57
InformationShader <Informatik>Different (Kate Ryan album)Line (geometry)PlotterDimensional analysisProgram slicingFamilyMassNumber theoryMereologyPoint (geometry)Term (mathematics)Projektive GeometrieProxy serverWeb browserDrop (liquid)CodeLecture/ConferenceComputer animation
35:58
Value-added networkSineMUDMetropolitan area networkRight angleExecution unitWordLecture/ConferenceComputer animation
36:34
Metropolitan area networkWide area networkEmulationPoint (geometry)Alpha (investment)Transformation (genetics)LogarithmHistogramSet (mathematics)Operator (mathematics)Multiplication signServer (computing)CASE <Informatik>Form (programming)Power (physics)TouchscreenMetadataRight angle
38:15
Uniform resource nameMetropolitan area networkElectronic program guideElectronic meeting systemMaxima and minimaArmWide area networkEmulationMoving averageEmailReading (process)Value-added networkWeb browserAreaComputer networkComputer animationSource codeLecture/Conference
Transcript: English(auto-generated)
00:00
So, thank you everybody for coming. A brief introduction. I'm outside of working on the conference. I work for Continuum Analytics. I'm a bouquet core developer and also just solutions architect
00:24
and tech lead at Continuum. This is my Twitter handle. My email. Or you can also use Fabio.plier at Continuum.io.
00:46
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 roadmap.
01:02
I start with introductions and then I will basically go through what's in the next, 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.
01:22
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?
01:46
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?
02:03
Or charting stuff? And who here uses B3? Sorry. So here are some quick numbers before telling more about bouquet.
02:24
Basically, when I joined the project, I think those numbers were really smaller. Really smaller. Bouquet had grown a lot recently. And this is really cool. And we had a lot more community engagement.
02:43
Bouquet is an open source project and it will stay 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.
03:01
We have a nice, a good amount of stars for it. Of course, this is not, we don't have 27 downloads a month on PyPy. 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.
03:22
Aside of that, we have the mini 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
03:40
that a data scientist have when they try to plot their 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 R and JavaScript.
04:01
So to get more about the project, you can go to the website and to have more information about it.
04:23
It's gonna 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
04:44
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 a contributor, external contributor, and it's really cool.
05:03
Look at this. It's all Python, no JavaScript written. So back to the presentation. We recently just released a bouquet of 12 version.
05:21
Let me change this, okay, a bit better.
06:02
So, and you can get more information here. The main side, we have 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, but we do our best
06:21
and I really invite everyone that goes to the documentation, maybe for the first time or whatever, to pose issues regarding what they found hard and how we can improve. So, 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.
06:44
Here's the bouquet of 12 release. Post, and basically, all objects you see here are bouquet plots and they are interactive as well. So we can actually change things here.
07:02
And there are different ways of doing this and how it works and we'll be showing this during the demo. Hopefully, the WiFi is not so bad and those things are connected. A few of these are connected to a server. The sliders are just JavaScript callbacks,
07:23
but let's see in a moment. Cool. So what's that? Cool. So, what are the new things? I set this talk as intermediate
07:42
because you, to have a good understanding, you probably, it's better to have an idea of what's bouquet and have used it, but I think it's beneficial for everyone. Just, they should understand and see the benefits even if they never see it. Bouquet comes with a bouquet server, which is an object, it's a tornado server
08:01
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 have, we used to have another server
08:23
and it has changed since around October, November. Right, this new server is extremely more performant. It's all web socket based. There are no more REST calls. It's based on tornado and web sockets, as I said.
08:42
And it keeps basically all the objects and models synchronized between the server and the other side. So just to understand what a bouquet server app looks like, let's take a look at this.
09:02
Oh wow, 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.
09:21
Every time I change this slider, a callback is triggered on the Python side. A pandas data frame is being filtered 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.
09:41
A shiny example, sorry. Okay, let me see, show off another example. For instance, this other one shows a histogram with showing off some of the bouquet server features. So when I select those areas, there's a Python callback
10:02
that recomputes 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
10:21
or in the end of the movement event. So let's see. Bouquet server now runs with the bouquet command.
10:42
Basically to run on your computer, you just need to type bouquet serve in the app or the app script or the app there, define your bouquet app. And it's quite simple to just run that.
11:02
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 use HTTPS connections and those kind of stuff. So this is what more or less a bouquet server app is.
11:27
It's 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
11:41
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 wanna make it look, add some glyphs or some elements to the plot.
12:01
Here we define a Python 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 the score doc and that's it.
12:22
Basically bouquet apps could be as simple as a Python script just a main .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
12:42
with one file for, well, the main file, then a YAML file for a DIMM, how we wanna make everything look and feel. Static for serving static files directly from bouquet server a server lifecycle so you can actually define callbacks triggered in specific moments
13:02
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 bouquet server main index HTML template.
13:21
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 me put it here, okay.
13:52
So to serve a bouquet app, I just go and say bouquet serve.
14:04
Let's do this. This one is a bouquet server app that basically has, oh, I forgot to say. I told to show. So basically, it has a periodic callback
14:24
being called every, I can't remember. But it is redoing for a few year harmonics for the whole circle. And there's a lot going on in the backend. It's quite fluid as well. Another example that is quite nice is, let's see.
14:56
In this case, I'm serving a bouquet app that is the directory.
15:00
And all I need is to give the directory a name. This is an OHLC plot that is basically recomputing all the statistics and all the simulation every, I think it's three or one millisecond. And as I change the sliders, the model is changing.
15:24
And it's behavior. And as you can see, it's quite fluid. And the rate, it's fast enough to keep the rate and sync everything between the Python side and the JavaScript side.
15:40
So 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.
16:02
Let's move ahead here. So, bouquet command. We also have two other, we just saw before the bouquet command serving the server. It also has different options. The main, most important ones are HTML.
16:22
Basically you 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. It will create an HTML file that you can actually send by email or serve anywhere it contains
16:40
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.
17:03
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, in this case, I have a notebook,
17:26
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.
17:43
And yeah, 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 GIF,
18:01
which is scatter, and then it's connected to one data source. You can say, okay, 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.
18:25
So, those JavaScript callbacks, they extend the capability. We are working, this is kind of yellowish, because we are working on basically doing canned JavaScript callbacks for the things that most people want to do.
18:45
But we had a dream also to say, okay, 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,
19:04
and they work on the browser. So, like this case, I have a bouquet plot, a simple curve that I have sliders and I want to tweak with the curve using the sliders.
19:23
So, to use Python, you just need to define your plot stuff and define a callback and define what kind of objects it needs. In this case, the source, which is the data source of this plot, and a new window object.
19:41
The window object is actually JavaScript. So, basically, you get the data from the source, you tweak with your parameters. Basically, you read the slider values. In this case, we use the JavaScript sin function
20:03
to recompute the numbers. And then, basically, we get this object, call it as a callback, and we pass to the slider for every slider. So, every slider here will be calling a JavaScript function that was written in Python.
20:21
And, if you don't believe me, well, I already showed you, actually, this is what's happening on the first page, but let's show it locally.
20:59
That should work.
21:01
No, this is a similar thing. Maybe it's elsewhere.
21:22
Maybe it's just a slider. In the O11 release, it just supported Python 3.
21:42
But now, it also supports Python 2.7, because. There are no network callbacks. Sorry? No, this actually is a, it just creates an HTML file, slider, and that's what it's serving.
22:03
There's no active callbacks or anything. It's standalone. Actually, you can just get that and send to a client and the customer and show things happening. We actually, you can actually write notebooks with those kind of things and use Bokeh serve,
22:22
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.
22:48
Anything that is notebook-centric or anything, yes, anything that is notebook-centric or that relies on your local data would not work, but any real, anything that is not related
23:05
to your environment should work. Yes, then you're fine. Cool.
23:22
We also now support, have a better support for Jupyter notebook callbacks. So, it used to be quite hard because Jupyter have their own web sockets that connects to the Jupyter web socket. We have our web socket stuff.
23:41
Right now, we released 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 recompute stuff. Okay, another big problem in Bokeh was that,
24:03
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
24:22
to lay out plots 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.
24:42
There are 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, luckily. Now, we have row columns approach. We also have a widget box,
25:01
which basically makes it easier to build rows and columns. And it's quite simple now to lay out stuff and lay out stuff in a way that axis are aligned, and you can define where to put the title and legend.
25:22
Actually, now, title and legend can be put out of the plot itself. So, Bokeh used to always need the legend inside the canvas area. You can actually now put it outside. This is an example of layout, column layout.
25:40
It's fairly easy. You just need to say, okay, layout, column, and then tell what to put in the column. The same for the row, and same for grid plot. We basically use array lists to define what goes,
26:01
and we compute everything. We actually have a responsive flag that you can use to make things responsive. And yeah, there are a few options, like for the sizing mode, stretch, or other options.
26:28
Okay, some layout examples I already showed you. Custom extensions. So, a lot of times, Bokeh do not contain everything.
26:42
Like, if you want to have a slider that looks differently, or if you want to have a different kind of plot, or a different kind of tool, you can actually, Bokeh now provides a mechanism to extend our models, sort of a plug-in system.
27:01
So, you can actually create your own Bokeh model, either on the Python side only, or Python and JavaScript side. You don't need to, we try to make it less complicated as possible. So, if you need to make changes to the JavaScript side,
27:21
you can actually define that on the Python, your new Python client class, and you define a specific new attribute. So, how extending Python classes work, you basically, well actually, let me show, let me use this to help me.
27:46
So, to extend Bokeh on the Python side, it's quite simple. You just iterate from the model you want to extend, and add everything you need for your custom model. If you need to extend on the JavaScript side,
28:02
it's a bit more complicated. You need to basically, you have two options, write your CoffeeScript or JavaScript file, and then use it, or just, you can actually just use your, define your implementation in the model itself.
28:23
And I can show you here. And that's all that, basically. You define your Python class, and you define the special bundle implementation attribute to define the CoffeeScript and the JavaScript.
28:43
So, the result of this, in this case, is for instance, if I want a new hipster old school range, I can just define all these things, and it works. It injects all the JavaScript and the HTML into the page, and it replays the custom slider one.
29:06
But you can also extend more, more things, like if you, what if Bokeh doesn't support 3D, and we want to have a 3D model.
29:20
Now we can do it. And you can, so for instance, Bokeh, serve, show, service 3D. You can actually have, use whatever JavaScript library
29:42
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. So in this case, it's using VSJS, that consumes a Bokeh data source,
30:03
and plots the 3D dynamically on the page. Cool. Annotations.
30:20
Bokeh now have real annotations, so you can actually use stuff to annotate your code. We have arrows, like this case, and it's not that complicated, you just import what you need. Add as a layout, so in this case, an arrow with open head, and I give the coordinates.
30:41
I 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.
31:03
Spins. We have much better geo support, now we actually support a geo data, JSON data source that you can use to drop points on the screen.
31:20
We have, 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. Basically, they didn't say anything and changed from one day to the other.
31:41
All tests failed, so it was not nice. And it's an extra step for the users and we are trying to check what we can do to make it just work. Geo support, we have good support for tile renderers, so if you have any service that is a tile renderer,
32:02
we provide support for that to consume Mercator projections. New TypeScript and JavaScript API. So TypeScript and JavaScript APIs have, it pairs down the plotting API, the models API,
32:23
and a brief charts API, which is not like the okay core charts API. It's just a handy thing to create like bars and pies on the JavaScript side,
32:40
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 wanna basically create new data from that, like plot objects from the same column
33:01
with some transformation, we support this. We now support jitter and interpolation, so if you have just a number of dots and you wanna interpolate in different ways, it just specify the kind of interpolation you want. We have now better WebGL support,
33:22
and it's actually quite fast. Just show quickly an example, I'll just show quickly an example here of, and it now supports all the glyphs basically. In this case, we have WebGL not activated, and if I zoom in, you can see this time,
33:46
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.
34:02
Both examples have 10,000 points. We have examples with one or two or 300 points and WebGL performs quite well. But now there's a whole ecosystem growing
34:28
around bokeh as well. I wanna mention two projects that are quite cool. The first one is HoloViews, and basically HoloViews lets you have annotated data.
34:42
It's basically notebook-centric and lets you have annotated data, and it creates a new grammar to let you do specific, complicated stuff to your annotated data.
35:01
So let's say I wanna slice my big chunk of data in different layers, in different dimensions, and I wanna 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,
35:23
and as you can see, it's quite nice to read and quite dense in terms of, quite lean in terms of code. This other one project, it's, I would say it's fairly cool. Basically, DataShare is part of the bokeh family,
35:43
and it lets you plot massive number of data on the browser. This example here is taking the New York pick up and drop offs data set. It's a 12 million points data set.
36:01
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.
36:29
I still have questions though, right? No, okay. So you wanna have questions? You wanna have questions or you wanna see this?
36:42
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 1,000 here. You can barely see what's happening. In this case, 10,000, it's over plotting
37:03
because you don't really understand anything anymore. You can tweak with the data and say, okay, let's do, 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,
37:22
and you can actually see that the problem is that data is not linearly distributed, so you have to have transforms and try to get more better data. But the best thing you can, this is actually changing and using a logarithm transform.
37:42
This one is actually changing and using an equalized histogram. So basically, DataShader 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,
38:02
you only see the points you would see. So in this case, I can zoom in. It will basically go in and out and recompute stuff if I didn't break anything. Okay, let's reload that. Oh, this is the one on the browser. Anyway, this is being served on the network, not locally.
38:28
If I still have time, I'll show you. Otherwise, just grab me later. Alex, do we have time, or no? No. We've got three minutes until the next talk.
38:41
Okay, I think three minutes is maybe fine. Thank you. Yeah, thank you. Happy to answer questions on a conference, aren't you?