D3Magic

D3Magic is Broken

Sorry, this package is broken atm. It hasn't been updated in a while, and probably won't be (by me) for a while unfortunately - sorry for any inconvenience. PRs with fixes welcome though.

The rest of this README is thus mostly lies, do not believe what it says!

About

Allows you to run D3 code in IJulia/Jupyter notebooks. Largely a port of https://github.com/ResidentMario/py_d3

Installation

Not registered (yet) so: Pkg.clone("https://github.com/JobJob/D3Magic.jl.git")

Basic Usage

d3"""
<g></g>

<script>
d3.select("g").text("Hello There");
</script>
"""

displays:

Hello There

Syntax Highlighting

If you add this to your custom.js - mine is in ~/.jupyter/custom/custom.js you can get proper html highlighting:

require(["notebook/js/codecell"], function(codecell) {
    codecell.CodeCell.options_default.highlight_modes["text/html"] = {"reg":[/^d3/]}
})

D3 version

This uses D3 version 4.9.1 by default. You can use a different version by calling, e.g., D3Magic.setD3version("3.5.11")

Limitations

Most of the quirks mentioned here and here, and probably a few more to boot, also apply to this package.

How it works

D3Magic does these simple steps when you execute d3"""...""":

1. creates a unique id, e.g. it might set id = 123
2. replaces any instances of d3.select or d3.selectAll to d3.select("#d3-cell-$id").select and d3.select("#d3-cell-$id").selectAll respectively (using find and replace :O)
3. displays as html: <g id="d3-cell-$id">...</g>

Global d3._select and d3_selectAll

If you want to actually select elements outside the <g id="d3-cell-$id">...</g> created by D3Magic, use d3._select and d3_selectAll instead. This would be useful e.g. for appending something to the document body - like so d3._select("body").append(...)

Usage with Interact/InteractNext etc

Some things to note about this example:

• uses the (slightly) lower level display_d3 function
• uses d3update_display so selections select elements created in the previous call to display_d3
• interpolates a julia array into the javascript with var dataset = $(jl_dataset[1:n])

Example: display a graph that you can modify by moving the sliders

display_d3("""
    

    
""")

@manipulate for h in 1:30, i in slider(1:20, value=5, label="i"), n in 1:20
    jl_dataset = [5, 10, 13, 19, 21, 10, 22, 18, 15, 13,
                   11, 12, 15, 20, 18, 17, 16, 18, 23, 25]
    jl_dataset[i] = h

    d3update_display("""
        
    """)
end;

Sliders not shown, but they should appear below the graph. Moving them should update it.