A N A LY S I N G W E B P E R F O R M A N C E D ATA W I T H J U L I A & D 3 OpenSource Bridge 2015 2015-06-24

Philip Tellis @bluesmoon https://github.com/lognormal/boomerang http://www.soasta.com/mpulse/

G E T S E T U P 1. Visit http://bit.ly/osb-julia-d3 and either make a copy or just download the files. 2. Sign in to juliabox.org (This might fail once or twice) 3. In the Sync tab, enter either your copy of the Google Drive folder listed above, or the bit.ly link. 4. This should add an OSBridge folder in your JuliaBox. 5. Also available at github.com/SOASTA/osbridge-julia-d3

J U L I A I S … • High-level, high-performance dynamic programming language • Borrows from R, Python, MatLab, etc. • Performance comparable to C • Designed for Parallelism & Cloud Computing • MIT licensed — http://julialang.org/

D 3 I S … • A JavaScript library that maps Data to DOM Nodes • Extended via layouts & plugins for rich data visualisations • You still need to write code to draw things • Fast on its own, but you can easily make it sluggish • BSD Licensed — http://d3js.org/

I J U L I A

H T T P S : / / W W W. J U L I A B O X . O R G / G E T S TA R T E D W I T H I J U L I A

B A S I C J U L I A T U T O R I A L • JSON & JavaScript • Matrix Operations • Stats & DataFrames • JavaScript to update a DOM Node • Notebooks 01-04 at http://bit.ly/osb-julia-d3

H T T P S : / / G I T H U B . C O M / M B O S T O C K / D 3 / W I K I / G A L L E RY G E T S TA R T E D W I T H D 3

B A S I C D 3 T U T O R I A L • Adding nodes • Mapping data to nodes • Data Driven Documents • Examples 01-06 at https://soasta.github.io/osbridge- julia-d3/d3/

I T W O U L D B E C O O L I F J U L I A C O U L D C A L L O U T T O D 3

T H I S I S A S I M P L E E X T E N S I O N O F W H AT W E A L R E A D Y K N O W • Create an IFRAME instead of a P • Assign to its src instead of innerText • Example notebook 05 - Include an IFrame • Example JavaScript 06-data-driven-bars

B U T R E A L LY, J U L I A N E E D S T O PA S S D ATA T O D 3 F O R T H I S T O B E U S E F U L

W E C A N U S E w i n d o w . p o s t M e s s a g e • JS in IFrame looks for data in query string or listens for “message” event • Julia code sets query string or sends message using postMessage • Example notebook 06 - Pass Data to IFrame • Example JavaScript 07-d3-external-data

A N D O N E M O R E T H I N G …

T H E W E B S O C K E T I T W O U L D B E R E A L LY C O O L T O TA P I N T O T H I S W E B S O C K E T

I N T E R A C T. J L • Interact.jl taps into the WebSocket to let you build dynamic widgets • Imagine being able to interact with your D3 charts and having that data fed back to the Julia Kernel • https://github.com/JuliaLang/Interact.jl • It’s also available in the tutorial section of your JuliaBox • See also: https://jakevdp.github.io/blog/2013/06/01/ipython-notebook-javascript-python-communication/

Thank You