Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D3 and Julia at OpenSourceBridge 2015

D3 and Julia at OpenSourceBridge 2015

Philip Tellis

June 24, 2015
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. 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

    View full-size slide

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

    View full-size slide

  3. 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

    View full-size slide

  4. 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/

    View full-size slide

  5. 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/

    View full-size slide

  6. 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

    View full-size slide

  7. 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

    View full-size slide

  8. 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

    View full-size slide

  9. 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/

    View full-size slide

  10. 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

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

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

    View full-size slide

  15. 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

    View full-size slide

  16. 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/

    View full-size slide