d3Tree: Creates a D3 JavaScript Reingold-Tilford Tree network graph.

In d3Network: Tools for creating D3 JavaScript network, tree, dendrogram, and Sankey graphs from R

Description

Creates a D3 JavaScript Reingold-Tilford Tree network graph.

Usage

d3Tree(List, height = 600, width = 900, fontsize = 10,
  linkColour = "#ccc", nodeColour = "#3182bd", textColour = "#3182bd",
  opacity = 0.9, diameter = 980, zoom = FALSE, parentElement = "body",
  standAlone = TRUE, file = NULL, iframe = FALSE,
  d3Script = "http://d3js.org/d3.v3.min.js")

Arguments

List	a hierarchical list object with a root node and children.
height	numeric height for the network graph's frame area in pixels.
width	numeric width for the network graph's frame area in pixels.
fontsize	numeric font size in pixels for the node text labels.
linkColour	character string specifying the colour you want the link lines to be. Multiple formats supported (e.g. hexadecimal).
nodeColour	character string specifying the colour you want the node circles to be. Multiple formats supported (e.g. hexadecimal).
textColour	character string specifying the colour you want the text to be before they are clicked. Multiple formats supported (e.g. hexadecimal).
opacity	numeric value of the proportion opaque you would like the graph elements to be.
diameter	numeric diameter for the network in pixels.
zoom	logical, whether or not to enable the ability to use the mouse scroll-wheel to zoom in and out of the graph.
parentElement	character string specifying the parent element for the resulting svg network graph. This effectively allows the user to specify where on the html page the graph will be placed. By default the parent element is body.
standAlone	logical, whether or not to return a complete HTML document (with head and foot) or just the script.
file	a character string of the file name to save the resulting graph. If a file name is given a standalone webpage is created, i.e. with a header and footer. If file = NULL then result is returned to the console.
iframe	logical. If iframe = TRUE then the graph is saved to an external file in the working directory and an HTML iframe linking to the file is printed to the console. This is useful if you are using Slidify and many other HTML slideshow framworks and want to include the graph in the resulting page. If you set the knitr code chunk results='asis' then the graph will be rendered in the output. Usually, you can use iframe = FALSE if you are creating simple knitr Markdown or HTML pages. Note: you do not need to specify the file name if iframe = TRUE, however if you do, do not include the file path.
d3Script	a character string that allows you to specify the location of the d3.js script you would like to use. The default is http://d3js.org/d3.v3.min.js.

Source

Reingold. E. M., and Tilford, J. S. (1981). Tidier Drawings of Trees. IEEE Transactions on Software Engineering, SE-7(2), 223-228.

Mike Bostock: http://bl.ocks.org/mbostock/4063550.

Examples

## Create tree from R list
# Create hierarchical list
CanadaPC <- list(name = "Canada", children = list(list(name = "Newfoundland",
                    children = list(list(name = "St. John's"))),
               list(name = "PEI",
                    children = list(list(name = "Charlottetown"))),
               list(name = "Nova Scotia",
                    children = list(list(name = "Halifax"))),
               list(name = "New Brunswick",
                    children = list(list(name = "Fredericton"))),
               list(name = "Quebec",
                    children = list(list(name = "Montreal"),
                                    list(name = "Quebec City"))),
               list(name = "Ontario",
                    children = list(list(name = "Toronto"),
                                    list(name = "Ottawa"))),
               list(name = "Manitoba",
                    children = list(list(name = "Winnipeg"))),
               list(name = "Saskatchewan",
                    children = list(list(name = "Regina"))),
               list(name = "Nunavuet",
                    children = list(list(name = "Iqaluit"))),
               list(name = "NWT",
                    children = list(list(name = "Yellowknife"))),
               list(name = "Alberta",
                    children = list(list(name = "Edmonton"))),
               list(name = "British Columbia",
                    children = list(list(name = "Victoria"),
                                    list(name = "Vancouver"))),
               list(name = "Yukon",
                    children = list(list(name = "Whitehorse")))
))

# Create tree
d3Tree(List = CanadaPC, fontsize = 10, diameter = 500)

## Create tree from JSON formatted data
## dontrun
## Download JSON data
# library(RCurl)
# URL <- "https://raw.github.com/christophergandrud/d3Network/master/JSONdata/flare.json"
# Flare <- getURL(URL)

## Convert to list format
# Flare <- rjson::fromJSON(Flare)

## Recreate Bostock example from http://bl.ocks.org/mbostock/4063550
# d3Tree(List = Flare, file = "Flare.html",
#        fontsize = 10, opacity = 0.9, diameter = 1000)

Example output

<!DOCTYPE html>
<meta charset="utf-8">
<body> 
 <style>
.link {
fill: none;
stroke: #ccc;
opacity: 0.45;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.9;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 10px serif;
opacity: 0.9;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var width = 900
height = 600;

var diameter = 500;

var tree = d3.layout.tree()
.size([360, diameter / 2 - 120])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); 
 var root = {"name":"Canada","children":[{"name":"Newfoundland","children":[{"name":"St. John's"}]},{"name":"PEI","children":[{"name":"Charlottetown"}]},{"name":"Nova Scotia","children":[{"name":"Halifax"}]},{"name":"New Brunswick","children":[{"name":"Fredericton"}]},{"name":"Quebec","children":[{"name":"Montreal"},{"name":"Quebec City"}]},{"name":"Ontario","children":[{"name":"Toronto"},{"name":"Ottawa"}]},{"name":"Manitoba","children":[{"name":"Winnipeg"}]},{"name":"Saskatchewan","children":[{"name":"Regina"}]},{"name":"Nunavuet","children":[{"name":"Iqaluit"}]},{"name":"NWT","children":[{"name":"Yellowknife"}]},{"name":"Alberta","children":[{"name":"Edmonton"}]},{"name":"British Columbia","children":[{"name":"Victoria"},{"name":"Vancouver"}]},{"name":"Yukon","children":[{"name":"Whitehorse"}]}]} ; 
 var nodes = tree.nodes(root),
links = tree.links(nodes);

var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);

var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);

node.append("circle")
.attr("r", 4.5)
.style("fill", "#3182bd");

node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.style("fill", "#3182bd")
.text(function(d) { return d.name; });

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 9)
d3.select(this).select("text").transition()
.duration(750)
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.style("stroke-width", ".5px")
.style("font", "19px serif")
.style("opacity", 1);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 4.5)
d3.select(this).select("text").transition()
.duration(750)
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.style("font", "10px serif")
.style("opacity", 0.9);
}

d3.select(self.frameElement).style("height", diameter - 150 + "px");

</script>
 </body>

d3Network documentation built on May 2, 2019, 2:45 p.m.