Flexible interactive visualization for large trees using D3.js.
Pkg.add("D3Trees")There are two ways to create a D3Tree object described below:
Any object that implements the interface from AbstractTrees can be given to the constructor: D3Tree(object).
See the docstring (julia> ?D3Tree) for information on how to control the style.
The structure of a D3Tree is specified with lists of children for each node stored in a Vector of Int Vectors. For example,
D3Tree([[2,3], [], [4], []])creates a tree with four nodes. Nodes 2 and 3 are children of node 1, and node 4 is the only child of node 3. Nodes 2 and 4 are childless.
In an IJulia notebook, the tree will automatically be displayed using D3.js. To get an interactive display in a chrome browser from the repl or a script, you can use the inchrome function. The blink function can also open it in a standalone window using the Blink.jl package.
children = [[2,3], [4,5], [6,7], [8,9], [1], [], [], [], []]
t = D3Tree(children)
inchrome(t)
inbrowser(t, "firefox")By clicking on the nodes, you can expand it to look like the image at the top of the page.
Optional arguments control other aspects of the style (use julia> ?D3Tree for a complete list), for example,
children = [[2,3], [], [4], []]
text = ["one\n(second line)", "2", "III", "four"]
style = ["", "fill:red", "r:14px", "opacity:0.7"]
link_style = ["", "stroke:blue", "", "stroke-width:10px"]
tooltip = ["pops", "up", "on", "hover"]
t = D3Tree(children,
text=text,
style=style,
tooltip=tooltip,
link_style=link_style,
title="My Tree",
init_expand=10)
inchrome(t)will yield
or, see examples/hello.ipynb
Deep trees can be expanded on demand from the visualization by clicking on unexpanded nodes. For example, see examples/LazyLoadDeepTrees.ipynb
The lazy loading can be controlled through two main keyword arguments:
lazy_expand_after_depthwhich controls the initial expansion depth of the tree, before being sent as json to the visualization,lazy_subtree_depthwhich determines the depth of on-demand expanded subtrees.
# very deep tree
ldroot = LimitedDepthTree()
# launches visualization and click some nodes
D3Tree(ldroot, lazy_expand_after_depth=0, lazy_subtree_depth=1)returns
D3Trees also supports basic text output. This can be achieved by writing to an io object with the text/plain mime. This format is the automatic output if a D3Tree is created in the REPL:
julia> children = [[2,3], [4,5], [6,7], [8,9], [1], [], [], [], []];
julia> t = D3Tree(children)
1
├──2
│ ├──4
│ │ ├──8 (0 children)
│ │ └──9 (0 children)
│ └──5
│ └──1 (2 children)
└──3
├──6
└──7This package works best in the Google chrome or chromium browser.
- This will not work offline because it downloads the D3 library on the fly (#10)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent