WE HAVE THREE EXCELLENT TALKS.
YOU WILL BE GLAD YOU STUCK AROUND.
OUR FIRST SPEAKER IS SARAH BIRD WHO WILL TELL US ONCE AND FOR
ALL WHETHER IT'S BO-KA OR BO-KAY.
[ Applause ] >> HI, EVERYBODY.
MY NAME IS SARAH BIRD. I WORK FOR A COMPANY CALLED
APTIVATE. AND TODAY WE'RE GONNA BE TALKING
ABOUT INTERACTIVE DATA FOR THE WEB IN PYTHON USING THE DATA
VISUALIZATION LIBRARY BOKEH. I JUST PRONOUNCE IT WITH MY
BRITISH ACCENT AND PEOPLE SAY IT SOUNDS CHARMING.
AND SO I'M THE KIND OF PERSON THAT LIKES TO LEARN THINGS BY
DOING, SLASH, BREAKING THEM, SO WE'RE GONNA GET A FEEL FOR THE
CAPABILITIES. IT'S A DATA VISUALIZATION
LIBRARY. THERE ARE MANY DATA
VISUALIZATION LIBRARIES ALREADY. IT'S TYPICALLY A STRONG HOLD OF
JAVASCRIPT WORLD, BUT IN THE PYTHON WORLD WE HAVE THINGS LIKE
MAP PLOT LIB AND OTHER THINGS LIKE THAT.
BUT BOKEH IS DIFFERENT. BOKEH IS IN PYTHON.
IT MAKES YOUR VISUALIZATIONS FOR THE WEB AS WEBBY OBJECTS THAT
ARE INTERACTIVE AND DYNAMIC AND REALLY DATA DRIVEN AND ITS ROOTS
AND ITS HISTORY IS IN DATA SCIENCE AND SO HOW MANY PEOPLE
HERE WOULD SORT OF PULL THEMSELVES IN THE DATA SCIENTIST
CAMP? SO A FEW PEOPLE HERE, PANDA, AND
NOTEBOOK, THEY'RE GONNA BE NODDING.
HOW MANY PEOPLE ON THE WEB DEVELOPER SIDE OF THINGS?
RIGHT. SO THESE THINGS MEAN NOTHING TO
US. BUT THAT'S A BIT OF A FOREIGN
WORLD, BUT I THINK BOKEH IS A REALLY POWERFUL TOOL FOR ME AS A
DJANGO DEVELOPER. AND SO WHENEVER I CAN, I LIKE TO
STAY IN PYTHON. THAT IS MY FIRST REASON FOR
LOVING BOKEH IS I REALLY LIKE WRITING IN PYTHON, AND I THINK
THIS IS A CROWD THAT PROBABLY ALSO LIKING WRITING IN PYTHON.
YOU GET TO STAY JUST IN THAT WORLD, BUT YOU'RE STILL MAKING A
DIFFERENT END INTERACTIVE VISUALIZATIONS.
THERE ARE OTHER REASONS TO USE BOKEH TOO.
THE FIRST ONE IS IF ANY OF YOU HAVE EVER USED SOMETHING LIKE
D3.JS, THERE IS A LIMIT TO HOW MANY NUMBER -- HOW MANY NUMBER
OF ELEMENTS YOU CAN ACTUALLY THROUGH AT THE DOME BEFORE YOUR
BROWSER EXPLODES. BOKEH USES CANVAS TO RENDER YOUR
VISUALIZATIONS, AND IT'S NOT GONNA COMPLAIN.
THEY'RE ACTUALLY WORKING ON SOME WEB G.L. BACK IN 2 WHICH IS
GONNA MAKE THAT EVEN BETTER. AND WITH BOKEH CONNECTED TO THE
SERVER SIDE, YOU CAN REALLY DO SOME AWESOME THINGS WITH BIG
DATA, WHICH THERE'S LOTS OF INFORMATION ABOUT ONLINE, I'M
NOT GONNA TALK SO MUCH ABOUT TODAY BUT I'M HAPPY TO TALK
ABOUT LATER. BOKEH LET'S YOU DO REAL-TIME
UPDATES. WHEN YOU CONNECT YOUR DATA
VISUALIZATION TO THE BOKEH SERVER, ANY TIME YOUR DATA
CHANGES, THAT DATA'S GONNA BE PUSHED STRAIGHT DOWN YOUR PLOT.
THE FOURTH THING THAT MAKES BOKEH AWESOME IS YOU'RE TRYING
TO INTERACT WITH YOUR PLOT BUT MAYBE DOING SOME COMPUTATION
THAT YOUR BROWSER'S GONNA REALLY COMPLAIN ABOUT, THROW IT BACK
DOWN AND IT'S GONNA WORK REALLY NICELY FOR YOU.
SO BOKEH IS NOT THE MAGIC SILVER BULLET.
THERE NEVER IS ONE IN WEB. BUT IT IS MY NEW DEFAULT.
IT'S MY NEW GO-TO TOOL TO WRITE SOMETHING, AND THEN, YOU KNOW,
MAYBE YOU HAVE TO MOVE ON IF YOU REALLY HAVE A SPECIALIZED NEED.
BUT BOKEH COVERED AN AWFUL LOT. VERY QUICKLY, HOW DOES IT WORK,
BECAUSE WE'RE WRITING PYTHON, BUT MAGICALLY JAVASCRIPT COMES
OUT. YOU WRITE PYTHON ON THE SERVER
SIDE. AND IT MAKES A JSON AND THAT
GETS SHOVED DOWN TO YOUR CLIENT. AND THERE IS ACTUALLY A LIBRARY,
SO THE BOKEH CORE DEV TEAM ACTUALLY HAVE TO WRITE A LOT OF
JAVASCRIPT FOR US, AND THAT TELLS THE PYTHON TO TURN -- IN
HTML. AND WHAT'S REALLY COOL ABOUT
THIS IS THAT ACTUALLY IF YOU LIVE IN A WORLD OTHER THAN
PYTHON SOMETIMES, THERE ARE OTHER LANGUAGES, OTHER LIBRARIES
THAT CAN ALSO CREATE THAT -- CREATE THAT JSON.
SO THERE'S R-BOKEH AND BOKEH SCHOLAR AND ALL SORTS OF THINGS
THAT I'VE NEVER USED. DON'T ASK ME ABOUT THEM, BUT
THEY EXIST AND SOME PEOPLE THINK THEY'RE REALLY AWESOME.
ALSO, THERE'S A COMPATIBILITY LAYER, THE FAR RIGHT THERE, SO
IF YOU ALREADY HAVE A WHOLE BUNCH OF PLOTS IN MAP PLOT LIB
OR C BORN OR SOMETHING LIKE THAT, THERE'S ALREADY A
COMPATIBILITY LAYER IN THERE, SO THEY'LL COME OUT AS WEB
VISUALIZATIONS FOR YOU USING BOKEH.
BUT TODAY WE'RE GONNA REALLY BE FOCUSING ON THE CORE BOKEH
LIBRARY. AND BOKEH ITSELF IS CERTAINLY
WHEN I CAME TO IT ABOUT A YEAR AGO, THERE'S AN AWFUL LOT OF
WAYS YOU CAN USE IT, SO I'M GONNA FOCUS ON TWO SORT OF
ASPECTS. AND FOR ME THAT WAS -- THAT'S
ENOUGH TO GET A LOT DONE, AND I THINK IT SHOWS THAT ACTUALLY
BOKEH'S PRETTY ACCESSIBLE. SO WHAT WE'RE GONNA BE DOING
TODAY IS WE'RE GONNA BE BUILDING THE VISUALIZATION THAT YOU CAN
SEE HERE. I WORK FOR A COMPANY CALLED
APTIVATE. WE'RE A NONPROFIT, AND WE BUILD
SOFTWARE FOR OTHER NONPROFITS. ABOUT A YEAR AGO WE BUILT THIS
VISUALIZATION FOR WATER AID, WHICH IS -- AND IT'S A MAP OF
WATER AND SANITATION IN AFRICA AND HOW IT'S CHANGING OVER TIME.
IT'S BUILT IN D3. AND THAT WAS A GOOD CHOICE AND I
THINK I WILL STILL BUILD IT IN D3 IF I WAS DOING IT AGAIN
TODAY, BUT YOU CAN GO TO THE GITHUB PAGE AND SEE THE ORIGINAL
CODE AS WELL AS GOING TO THE CODE FOR THIS TALK TO SEE THE
BOKEH CODE IF YOU'RE INTERESTED. I MAY USE THE ACRONYM W.A.S.H. A
LOT TODAY. AND IT'S JUST ONE OF THOSE TERMS
THAT WE USE IN THE WATER AND SANITATION WORLD.
SO HERE'S THE VISUALIZATION. AND IT HAS A SLIDER.
AND IF I CLICK ON THE SANITATION SIDE OF THINGS, YOU CAN SEE THE
COLORS CHANGE OVER TIME. AND WE CAN HOVER OVER COUNTRIES
AND WE CAN PICK COUNTRIES. AND SO WE'RE GONNA REMAKE --
OOPS, WE'RE GONNA REMAKE THIS TODAY.
D3 ONE ON THE LEFT AND THE BOKEH ONE THAT WE'RE GONNA MAKE TODAY
IS ON THE RIGHT. AND THERE AGAIN FOR THE PEOPLE
THAT CAME IN LATE, THERE'S THE LINK FOR THE CODE TO THIS TALK
AND THE SLIDES FOR THIS TALK, AND I'LL TWEET ABOUT IT LATER AS
WELL. SO WE'LL START WITH THE CHARTS
INTERFACE. WHICH IS KIND OF AMAZING.
AND SO THERE'S A WHOLE SERIES OF FUNCTIONS BUILT INTO BOKEH.
AND SO YOU IMPORT THE LINE. WE'RE GONNA START WITH THE LINE
CHART THAT WAS ON THE VISUALIZATION.
AND IMPORT THE LINE FUNCTION FROM BOKEH.CHARTS.
YOU SHOVE IN YOUR DATA. YOU USE THE SHOW METHOD.
AND THIS APPEARS. AND THIS A FULLY WEB-IFIED
VISUALIZATION. WE HAVE A WHOLE BUNCH OF THINGS.
WE HAVE A PAN TOOL THAT SORT OF WORKING OUT THE BOX.
WE HAVE A ZOOM. WE HAVE A RESIZE FUNCTION HERE.
SHOULD WE WANT TO DO THAT. ZOOM.
SAVE IT. RESET.
AND MOVE ON. SO THAT'S PRETTY RAD.
AND THERE'S A WHOLE BUNCH OF THESE ALREADY BUILT IN.
YOU'VE GOT YOUR AREA CHARTS, BAR PLOTS AND HEAT MAPS AND SO ON.
SO YOU CAN USE THESE STRAIGHT AWAY.
SO HALF OF THE PEOPLE IN ROOM WHO ALREADY SELF-IDENTIFIED AS
UNDERSTANDING PANDAS, YOU CAN THROW THAT INTO ALL THE CHART
FUNCTIONS AND INTO BOKEH, AND IT'S GONNA DO WHAT YOU WANT.
FOR THE PEOPLE WHO HAVE NEVER USED PANDAS BEFORE, IT'S ONE OF
THESE AWESOME TOOLS BUT IT HAS A FAIRLY STEEP LEARNING CURVE, BUT
YOU DON'T NEED TO WORRY ABOUT IT TOO MUCH TO REALLY GET GOING
WITH BOKEH. WHAT YOU NEED TO KNOW IS THAT IF
YOU HAVE -- WHAT YOU NEED TO KNOW IS BASICALLY AT THE END OF
THE DAY, IT'S JUST BASICALLY DATA THAT LOOKS LIKE A TABLE.
AND SO IF YOU HAVE A CSV, YOU CAN USE THE READ CSV METHOD.
IF LIKE ME YOU ARE MORE LIKELY TO HAVE A DJANGO QUERY SET,
THEN -- AND THIS TOPIC LINE HERE LOOKS SUPER FAMILIAR TO YOU,
THEN IN ORDER TO GET THAT INTO A DATA FRAME, YOU TURN THAT INTO A
VALUES QUERY SET, AND THEN YOU CAN USE THE FROM RECORDS METHOD.
WHICH WILL THEN TURN YOU -- YOUR DJANGO QUERY SET INTO A PANDAS
DATA FRAME AND YOU'RE GOOD TO GO.
AND YOU CAN DO IT FROM RAW SQL. THAT ALL WORKS TOO.
AND THERE'S LOTS MORE INFORMATION AT
PANDAS.PYDATA.ORG. AND SO HERE YOU ARE.
YOU'RE LIKE YES, I'M GONNA MAKE A DATA VISION.
YES, I USED MY CHART FUNCTION. YOU WALK PAST YOUR DESIGNER, AND
YOUR DESIGNER IS LIKE, THIS DOES NOT LOOK LIKE OUR WEBSITE.
AND SHE HAS SAD FACE. AND SO IT'S TIME TO GO BACK TO
THE DRAWING BOARD A LITTLE BIT, AND YOU SHEEPISHLY WALK AWAY.
AND SO WE HAVE TWO WAYS TO MAKE IT SHINY.
THE FIRST ONE WHICH IS ACTUALLY ONE I USE A LOT, I CALL IT THE
REDUCTIVE APPROACH. WE TAKE THAT CHART FUNCTION, THE
LINE FUNCTION, AND WE PASS IN SOME ADDITIONAL ARGUMENTS TO IT
TO START TO CLEAN IT UP. WE GIVE IT THE HEIGHT AND WIDTH
WE WANT. TAKE AWAY SOME OF THOSE GRID
LINES. WE'VE TAKEN AWAY ALL THE TOOLS
BECAUSE WE DON'T ACTUALLY NEED THEM AND WE ARE MAKING SOME
PROGRESS. BOKEH ACTUALLY COMES WITH A
WHOLE BUNCH OF BUILT-IN PALLETTES WHICH IS REALLY HANDY
FOR MAKING THINGS LOOK NICE OUT OF THE BOX.
SO THAT GETS US KIND OF FAR, BUT REMEMBER WE'RE WORKING IN
PYTHON, AND SO WE HAVE A WHOLE BUNCH OF PYTHON OBJECTS.
SO WE CAN START SETTING ATTRIBUTES ON THOSE OBJECTS.
SO WE JUST SPECIFY AN X RANGE AND A Y RANGE AND JUST START
SELLING THINGS OVER AND OVER AGAIN.
AND WITH A LITTLE BIT MORE TWEAKING, WE CAN GET IT DOWN TO
THIS. AND AT THAT POINT I WILL MENTION
THAT WHEN I'M DOING THIS KIND OF TWEAKING, I DO REALLY LOVE TO
WORK IN THE IPYTHON NOTEBOOK. IF YOU HAVEN'T TRIED IT, IT'S
REALLY GREAT FOR PROTOTYPING VISUALIZATIONS IN BOKEH.
BECAUSE IT HAS ALL THE AUTO COMPLETE.
IT'S REALLY EASY TO JUST SEE WHAT THINGS YOU MIGHT WANT TO
FIDDLE WITH. SO I REALLY LOVE IT FOR
PROTOTYPING, AND IT WORKS NICELY WITH PYTHON NOTEBOOK.
BUT WE CAN USE IT FOR DESIGN WORK TOO.
SO THAT WAS NICE. BUT WHERE WE'RE GOING IS
ACTUALLY TRYING TO BUILD THIS VISUALIZATION WHICH HAS A LOT OF
COMPONENTS TO IT. AND SO TO DO THIS, WE'RE GONNA
ACTUALLY START AGAIN AND WE'RE GONNA START USING THAT LOW LEVEL
INTERFACE AND BUILDING THINGS UP ONE A TIME.
I ALREADY SAID. THE LOW LEVEL INTERFACE.
SO WE'RE GONNA START WITH A PLOT OBJECT.
IF YOU -- WHEN YOU CREATE A PLOT OBJECT, ALL YOU GET IS JUST AN
EMPTY SPACE, AND IT'S NOW YOUR RESPONSIBILITY TO START ADDING
THINGS TO, AND THERE'S ONLY REALLY THREE WAYS TO DO THAT.
YOU USE THE ADD GLYPH, THE ADD LAYOUT, OR THE ADD TOOLS METHOD.
A QUICK INTERLUDE ON EMBEDDING BECAUSE I'M SAYING ALL THIS, BUT
HOW DOES IT ACTUALLY GET INTO YOUR WEB PAGE?
BOKEH HAS A COUPLE OF BUILT-IN METHODS FOR MAKING THIS HAPPEN.
THIS COMPONENTS METHOD HERE WILL KICK OUT A SCRIPT AND A DIV AND
YOU CAN SHOVE THAT INTO YOUR TEMPLATE.
I ACTUALLY LIKE TO DO SLIGHTLY MORE COMPLEX THINGS.
I LIKE TO LOAD MY BOKEH JS ASYNCHRONOUSLY.
AND YOU -- AND SO YOU CAN -- IT'S PRETTY EASY TO ROLL THIS
YOURSELF BECAUSE THE THINGS THAT MAKE THOSE SCRIPT AND DIV AND IN
THE FIRST ARE JUST GINGER TEMPLATES, AND SO YOU CAN GO AND
JUST COPY AND PASTE THEM FROM THE BOKEH GITHUB REPO, AND THEN
TWEAK THEM TO YOUR OWN NEEDS. AND IF YOU LOOK FOR THE CODE IN
THIS TALK, YOU'LL SEE ME DOING THAT, AND I'M HAPPY TO ANSWER
MORE QUESTIONS ABOUT IT. AND I'M GONNA TALK ABOUT THE CSS
A LITTLE BIT LATER. SO FIRST WE'RE GONNA START
SIMPLE, AND WE'RE GONNA -- THERE WAS THE LEGEND ON THE
VISUALIZATION. AND THIS ISN'T ATTACHED TO ANY
DATA. IT'S JUST ADDING SOME BLOBS ONTO
YOUR PAGE. AND SO AT THE CORE OF BOKEH IS
THIS IDEA OF GLYPHS. AND GLYPHS ARE JUST SHAPES.
I'VE FORGOTTEN WHY THEY LIKE TO CALL THEM GLYPHS, BUT BASICALLY
THEY'RE JUST SHAPES. AND SO YOU HAVE YOUR PLOT, AND
YOU JUST START ADDING GLYPHS. AND 100 IS A GLYPH, AND WE JUST
ADD THE 100%. BECAUSE WE ARE USING CANVAS AND
NOT SVG, WE NEED TO ACTUALLY STYLE ALL OF OUR ELEMENTS.
WE PASS IN THE FONT, THE FONT SIZE, JUST AS ARGUMENTS, INTO
THE -- WHEN WE INSTANTIATE THAT CLASS.
SO WE START ADDING OUR GLYPHS. AND WE CAN USE A FOUR LOOP TO
MAKE THIS NICE LAID OUT RECTANGLE.
AND IT'S VERY PYTHONIC AND IT WORKS.
SO THE NEXT THING WE NEED TO DO IS START MAKING OUR MAP.
OUR MAP ACTUALLY HAS SOME DATA BEHIND IT.
EACH COUNTRY HAS A DIFFERENT VALUE ASSOCIATED WITH IT, AND SO
WE NEED TO START PAIRING GLYPHS WITH ACTUAL DATA.
AND SO THIS IS KIND OF TRICKY. SO JUST BEAR WITH ME.
I'M KIDDING. IT'S NOT TRICKY AT ALL.
IT'S REALLY, REALLY EASY. AND SO THE -- SO IT REALLY IS --
IT'S DEVASTATINGLY SIMPLE, AND IT'S ONE OF THE THINGS THAT JUST
MAKES ME HAPPY ABOUT BOKEH EVERY DAY.
EARLIER WE TALKED ABOUT PANDAS DATA FRAMES, WHEN YOU GET INTO
THE REALLY LOW LEVEL OF BOKEH, THEY HAVE A DATA STRUCTURE
CALLED A COLUMN DATA SOURCE. YOU JUST PASS IT YOUR PANDAS
DATE FRAME. IT'S NOT DIFFICULT.
SO WE MAKE YOUR COLUMN DATA SOURCE.
AND THEN WHERE BEFORE WE HAD JUST USED ADD GLYPH WITH JUST
THE GLYPH, NOW WE PASS IT THE SOURCE AS WELL, AND IT'S GONNA
MAGICALLY JOIN THINGS TOGETHER. AND SO HERE WE ARE.
WE USED -- WE USED A GLYPH TO MAKE EACH OF THE COUNTRIES.
AND SO WE PASSED IT SOME XS, WE PASSED IT SOME YS, AND WE PASSED
IT A COLOR, AND THAT CAME OUT. AND WE'VE SORT OF MELDED
TOGETHER OUR KEY AND OUR MAP RIGHT HERE.
SO THE NEXT THING, WE'RE GONNA ADD THE TAP TOOL AND THE HOVER
TOOL. THE TAP TOOL IS THE THING THAT
LETS YOU SELECT THINGS. AND THE HOVER TOOL LETS YOU
HOVER. SO THE TAP TOOL IS REALLY EASY
TO ADD. YOU JUST INSTANTIATE TAP TOOL IN
ADD TOOLS TOOL. FOR THE HOVER TOOL, YOU PASS IN
A STRING, AND YOU USE THIS LITTLE -- YOU USE AN AT SIGN TO
SPECIFY THE COLUMN NAME THAT YOU'D LIKE TO BE DISPLAYING.
AND SO YOU CAN JUST DO THIS VERY SIMPLY AS I'VE SHOWN HERE, OR
YOU CAN WRITE FULL HTML IF YOU WANT TO STYLE IT.
JUST USING THOSE AT SIGNS TO DRIVE THE DATA.
AND SO WHEN WE DO THAT, WE HAVE THIS AGAIN, BUT NOW WHEN WE
HOVER OVER, I'VE ADDED SOME CSS TO MEET UP WITH THAT HOVER,
THOSE HOVER CLASSES, AND WHEN I CLICK, WHEN I CLICK MY THINGS,
THEY'RE NOW RESPONDING TO THE TAP.
SO YOU'RE REALLY SEEING HOW YOU WROTE SOME PYTHON AND GOT OUT
SOME WONDERFUL HTML INTERACTION. OOPS.
UH-OH. OKAY.
SO... THIS IS WHEN THINGS START TO GET EVEN MORE AWESOME.
EVERYTHING WE'RE WORKING WITH A PYTHON OBJECT.
SO WE CAN START SHARING PYTHON OBJECTS BETWEEN DIFFERENT
THINGS. AND SO YOU MAY REMEMBER ON THE
ORIGINAL VISUALIZATION, THERE WAS SOME STUFF ON THE RIGHT THAT
WAS RESPONDING TO WHEN WE CLICKED ON MAP.
AND SO WHAT WE CAN DO IS TAKE OUR SOURCE THAT WE'VE ALREADY
CREATED, AND WE CAN NOT ONLY HAVE THAT ONE SOURCE DRIVE THE
MAP PLOT, BUT WE CAN ALSO HAVE IT DRIVE THE TEXT PLOT.
AND SO WHEN WE DO THAT, HERE'S SOME NEW SORT OF EMPTY TEXT THAT
I'VE ADDED, AND THERE'S SOME SORT OF HOLES HERE, BUT NOW WHEN
I CLICK A BOX, THAT SAME ROW OF DATA IS PAIRING BOTH THE -- BOTH
THE MAP AND THAT TEXT BOX AT THE TOP, AND THESE TWO ARE JUST
LINKED TOGETHER BY VIRTUE OF THEIR SHARING THE SAME OBJECT.
SO THE -- THE NEXT PIECE IS JUST TO GET THAT WATER AND SANITATION
PIECE GOING. SO WE -- WE HAVE OUR WATER, TEXT
BOX. WE HAVE OUR WATER MAP.
WE NOW GO AND REPEAT THE SAME THING TO MAKE THE SANITATION
VERSION OF IT, AND WE USE THE WIDGETS THAT BOKEH PROVIDES TO
STITCH IT ALL TOGETHER INTO TABS.
AND THIS IS WHERE -- WHEN YOU DIG IN A LITTLE BIT, YOU SEE
THAT A LOT OF TIME, WHEN YOU'RE MAKING A PLOT, BOKEH'S USING
CANVAS TO MAKE THAT. BUT WHEN YOU START USING SOME OF
THESE WIDGETS, IT ACTUALLY STARTS TO INJECT SOME LITTLE
BITS OF HTML TO MAKE THAT HAPPEN.
AND SO HERE IT IS. WE'VE USED THE TABS, AND NOW WE
HAVE OUR TWO TABS FOR WATER AND SANITATION.
WE'VE SHARED THE DATA SOURCE ACROSS ALL THESE ELEMENTS.
SO NOW WHEN I CLICK MALI IN SANITATION, IT'S BEING SELECTED
OVER IN WATER. AND IT'S ALL WORKING TOGETHER
REALLY QUITE NICELY. BUT NOW WE WANT TO GET THAT
SLIDER WORKING. AND SO TO GET THAT SLIDER
WORKING, WHAT WE'RE ACTUALLY GONNA DO IS, WE'RE GONNA UPDATE
THE DATA SOURCE. WE'RE GONNA ACTUALLY HAVE THE
DATA CHANGE WHEN WE MOVE THE SLIDER, AND TO DO THIS, WE BRING
IN THE BOKEH SERVER. AND WHAT THE BOKEH SERVER DOES
IS, NOW INSTEAD OF THAT CODE COMING DOWN TO YOUR CLIENT, YOU
PREPARE YOUR CODE, BUT YOU SEND AN INSTRUCTION TO THE SERVER,
HOW DO YOU WANT ME TO RESPOND TO THE DATA?
AND SO WHEN YOUR CLIENT WANTS TO GET THE PLOT, THE JSON COMES
DOWN THE SERVER, BUT A WEB SOCKET CONNECTION ALSO GETS -- PUSHED RIGHT DOWN FOR YOU.
SO TO DO THAT, WE -- WE CREATE WHAT I CALL AS LIKE A SERVER
APP, LIKE A -- LIKE A BOKEH APP. AND IN PARTICULAR, WE WANT TO
SPECIFY THE INSTANCES OF THINGS THAT THE SERVER NEEDS TO CARE
ABOUT. THESE ARE THE THINGS THAT WHEN
THEY CHANGE OR WHEN THEY UPDATE LIKE THE SERVER NEEDS TO KNOW
ABOUT. AND THIS KIND OF BLUEPRINT NEEDS
TO -- IF YOU -- SOMETIMES YOU HOST YOUR BOKEH SERVER AND YOUR
WEB APPLICATION SERVER ON THE SAME PLACE -- AND IT'S TOTALLY
EASY, AND THE BOKEH EXAMPLES SHOW IT REALLY NICELY, BUT
SOMETIMES YOU WANT TO HOST THEM IN DIFFERENT PLACES, AND THEN
YOU NEED TO MAKE SURE THAT BOTH THE SERVER AND YOUR ORIGINAL WEB
APP HAVE SOME KNOWLEDGE ABOUT HOW TO PUT YOUR BOKEH APP
TOGETHER. SO YOU HAVE THESE INSTANCES
SPECIFIED. AND ON YOUR WEB APP, YOU JUST GO
THROUGH THE REGULAR THING OF CREATING THE PLOT.
YOU MAKE THE MAP. YOU MAKE THE TEXT BOX.
YOU PUT THE DATA. YOU PUT IT ALL TOGETHER.
IT'S NICE AND STRAIGHTFORWARD. AND ON THE SERVER SIDE, YOU
START BINDING EVENTS TO THOSE OBJECTS.
SO THE YEAR SLIDER THAT WE'RE GONNA SEE, WHEN THAT VALUE
CHANGES, WE'RE GONNA SAY, PLEASE CALL THE CHANGE YEAR METHOD.
WHAT IT'S GONNA DO, THE REAL MAGIC HERE IS WHEN
SELF.SOURCE.DATA CHANGES, AND ON THE SERVER SIDE, THE SERVER THEN
KNOWS, OH, I'VE UPDATED. SHOOT THAT BACK DOWN TO THE
CLIENT. AND THAT'S THE MAGIC THAT REALLY
LETS BOKEH DO SOME REALLY POWERFUL THINGS.
SO NOW WE'VE DONE THAT. WE'RE ALL DONE.
HERE'S OUR SLIDER. OH, HANG ON.
ACTUALLY, THIS IS MUCH CLEARER ON THIS -- OH.
THAT IS AWKWARD. I THINK I EMBEDDED THE WRONG
THING. OKAY.
IT TOTALLY WORKS. I'M VERY SORRY.
AND I WILL TWEET YOU THE LINK LATER IF I CAN'T GET IT TO WORK
MAGICALLY NOW, BUT I'M GONNA KEEP GOING BECAUSE I'M RUNNING A
BIT SHORT ON TIME. SO... SO SOME OF YOU MAY BE
SITTING THERE THINKING, DO I REALLY NEED TO SET UP AN ENTIRE
SERVER TO HAVE A SLIDER ON MY DATA VISUALIZATION?
AND THAT IS A PRETTY FAIR QUESTION.
THE SHORT ANSWER IS YES, BUT. AND THE YES, BUT IS MULTIFOLD.
SO THE FIRST THING IS, THERE IS REALLY AWESOME THING COMING INTO
BOKEH IN THE NEXT FEW MONTHS CALLED THE JAVASCRIPT ACTIONS
FRAMEWORK, AND THAT IS GONNA LET YOU START WRITING LITTLE PIECES
OF PYTHON CODE THAT ACTUALLY MAKE JAVASCRIPT ACTIONS HAPPEN.
AND THERE'S ALREADY ONE OF THEM IN THE REPO CALLED OPEN URL, BUT
THAT EXACT ACTION FRAMEWORK IS TOTALLY WHAT I WOULD USE TO
POWER THAT SLIDER, AND SO THAT'S COMING REALLY SOON.
THE SECOND THING IS, THAT I -- THIS IS A PRETTY TRIVIAL
EXAMPLE, BUT THE SERVER IS REALLY AWESOME, AND YOU WILL
ALMOST CERTAINLY WANT TO USE IT FOR MUCH MORE COMPLICATED AND
INTERESTING THINGS THAN WHAT WE JUST DID.
DATA MANIPULATION, DOWNPLAYING, LIKE IF YOU HAVE -- LET'S SAY
YOU HAVE A LINE WITH 10 MILLION POINTS IN IT, SO YOU START
REALLY ZOOMED OUT. JUST THE SET OF DATA WE CAN SEE,
YOU CAN HAVE YOUR USER ZOOM IN AND ZOOM IN AND ZOOM IN AND JUST
BE SENDING THE DATA THAT THEY CAN ACTUALLY SEE.
YOU CAN BE STREAMING YOUR DATA. YOU CAN HAVE SOME EXTERNAL
SOURCE LIKE ALWAYS BE UPDATING YOUR PLOT SOURCE, AND THEN THOSE
DATA CHANGES ARE GONNA COME DOWN TO YOUR PLOT.
AND LASTLY THERE'S ALWAYS BOKEH JS.
AND ACTUALLY I DON'T USE IT MUCH, BUT I USE IT TO MAKE MY
PLOTS RESPONSIVE. SO IN WEB DESIGN, PEOPLE HAVE
ALL DIFFERENT KINDS OF BROWSER SIZES, SO I DON'T WANT MY PLOT
TO ONLY LOOK NICE ON ONE SIZE OF BROWSER, SO I USE IT TO RESIZE
MY PLOTS WHENEVER THE WINDOW SIZE CHANGES, AND THE CODE FOR
THAT IS IN THIS REPO TALK AND YOU CAN GO AND CHECK THAT OUT.
SO SOME WRAP-UP THOUGHTS. BACK TO THE HIGH LEVEL SHOTS,
THEY'RE AN AWESOME WAY TO GET STARTED.
I USE THEM ALL THE TIME. I OFTEN USE THEM IN A KIND OF
FRANKENSTEINY KIND OF WAY WHERE I WILL START WITH A CHART, TAKE
A BUNCH OF STUFF OUT, THEN ADD SOME GLYPHS AND MASH SOME STUFF
UP LIKE THAT BECAUSE IT'S A REALLY FAST WAY TO GET SOMETHING
UP. THE SECOND THING IS ABOUT CSS.
IF YOU HAVE SOMETHING THAT'S JUST IN CANVAS, YOU DON'T NEED
ANY CSS. BUT SOME OF THE THINGS LIKE THE
HOVER STYLINGS, THE WIDGETS THAT WE USED, THE SLIDER, THAT NEEDS
SOME CSS. UNFORTUNATELY, BOKEH'S CURRENT
BUILD IN CSS IS ABOUT A MEGABYTE, AND THAT'S TOO BIG FOR
ME. ROLL MY OWN CSS FOR MY WEB
APPLICATION. SOME FINAL THOUGHTS.
IN THE BOKEH REPO, THERE IS AN EXAMPLES FOLDER.
ON THE BOKEH.PY DATA WEBSITE, THERE IS A GALLERY WHICH HAS
MAYBE 20 OR SO EXAMPLES IN IT, BUT IN THE EXAMPLES FOLDER,
THERE'S LIKE WELL OVER 100 EXAMPLES OF HOW YOU COULD DO
EVERYTHING YOU COULD POSSIBLY THINK OF.
AND SO I TOTALLY RECOMMEND USING THAT AS A RESOURCE TO REALLY DIG
IN TO HOW BOKEH WORKS. THE BOKEH TEAM ARE PLANNING TO
HAVE 1.0 UP BY THE END OF YEAR, SO IT'S COME A LONG WAY IN A
YEAR, AND IT'S REALLY STARTING TO KIND OF BED DOWN AND BE NICE
AND STABLE AND REALLY USEABLE. LASTLY, IF YOU WANT TO GET A
SERVER UP AND RUNNING, IT CAN A LITTLE BIT TRICKY, BUT I HAVE A
REPO YOU MIGHT BE INTERESTED IN, WHICH IS HOW GET YOUR SERVER
DEPLOYED ONTO HEROKU. I LOVE BOKEH, AND THERE IS SO
MUCH MORE THAT I WISH I COULD HAVE TALKED ABOUT TODAY.
I'M AROUND DURING THE SPRINTS. COME AND FIND ME, OR THE BOKEH
COMMUNITY IS REALLY, REALLY FRIENDLY.
CHECK OUT THE GOOGLE GROUP, AND AGAIN, THE CODE FOR THIS SLIDE
IS ONLINE. SO THANK YOU VERY MUCH.
[ Applause ] YEAH, THAT'S FINE.
>> WE HAVE TIME FOR JUST ONE OR TWO QUESTIONS, IF YOU WANT TO
COME TO THE MICROPHONE HERE. AS ALWAYS, WE PLAY BY JEOPARDY
RULES. YOUR RESPONSE MUST BE IN THE
FORM OF A QUESTION. >> EXCELLENT TALK.
THANK YOU VERY MUCH. YOU OBVIOUSLY LIKE THE
FRAMEWORK. CAN YOU JUST QUICKLY SAY HOW
FAST IT WAS FOR YOU TO COME UP TO SPEED?
YOU KNOW, HOW GOOD WAS IT TO COME UP TO SPEED?
WHAT WAS YOUR RAMP UP? >> I WOULD SAY THAT'S A HARD
QUESTION TO ASK BECAUSE I STARTED WITH BOKEH ABOUT A
LITTLE OVER A YEAR AGO WHEN IT WAS AT 0.4, AND SO EVERYTHING
WAS CHANGING KIND OF FAST, AND THE DOCUMENTATION WASN'T WHERE
IT SHOULD BE. THERE HAS BEEN HUGE PUSH IN THE
LAST, LIKE, MONTH OR SO ON THE DOCUMENTATION, AND THEY'RE STILL
DOING IT, AND SO IT'S ACTUALLY VERY EASY TO USE WITH THE
COMPONENTS THAT I SHOWED YOU. I THINK IT WOULD BE MUCH EASIER
TO GET STARTED TODAY THAN TOMORROW.
AND IF I FAIL TO LIVE UP TO THAT PROMISE, YOU CAN HUNT ME DOWN ON
THE INTERNET, AND I WILL HELP OUT WITH THAT, SO --
>> WITH THE W.A.S.H. PROJECT, YOU MENTIONED IT WAS IN D3, AND
IT ENDED UP STAYING IN D3. AND YOU HAD MENTIONED THAT YOU
WOULD STILL DO IT IN D3. IS THERE A REASON WHY?
>> YES, FOR TODAY BECAUSE OF THE SLIDER.
SO IF YOU ASK ME, IF I WAS DOING THIS AGAIN IN THREE MONTHS TIME,
WHEN THAT JAVASCRIPT ACTIONS FRAMEWORK IS AVAILABLE, THEN I
THINK IT WOULD BE, YOU KNOW, I WOULD HAVE TO SEARCH FOR A
REASON NOT TO USE BOKEH IN THAT INSTANCE, BUT AS OF TODAY,
TODAY, I WOULD STILL GO WITH D3. >> THANK YOU FOR YOUR TALK.
I WANTED TO ASK IF YOU HAD OPINIONS ABOUT WHAT ARE THE PROS
AND CONS OF USING CANVAS OR WEB GL FOR RENDERING RATHER THAN
SVG. >> THAT IS NOT MY FIELD OF
EXPERTISE. I -- THERE ARE WHOLE THINGS
ABOUT WHICH IS FASTER AND WHICH INSTANCES AND SO ON, AND THERE
ARE BLOG POSTS ON THE INTERNET THAT WILL ANSWER THAT MUCH
BETTER THAN I CAN. BUT AT THE SAME TIME, THERE'S
SOME REALLY OBVIOUS LIMITATIONS WHEN YOU WANT TO THROW ANY KIND
OF DECENT SIZED AMOUNT OF DATA AT IT.
AT SOME LEVEL, I THINK THEY'VE BECOME A BIT OF A TOSS-UP, BUT
PEOPLE MUCH SMARTER THAN ME CAN ANSWER THAT MUCH BETTER, I'M
SURE. >> GREAT.
LET'S THANK SARAH ONE MORE TIME. [ Applause ]
