d3SimpleNetwork: Function for creating simple D3 JavaScript force directed...
In d3Network: Tools for creating D3 JavaScript network, tree, dendrogram, and Sankey graphs from R
Description
Usage
Arguments
Source
Examples
View source: R/d3SimpleNetwork.R
Description
d3SimpleNetwork creates simple D3 JavaScript force directed network
graphs.
Usage
1
2
3
4
5
6
d3SimpleNetwork(Data, Source = NULL, Target = NULL, height = 600,
width = 900, fontsize = 7, linkDistance = 50, charge = -200,
linkColour = "#666", nodeColour = "#3182bd",
nodeClickColour = "#E34A33", textColour = "#3182bd", opacity = 0.6,
parentElement = "body", standAlone = TRUE, file = NULL,
iframe = FALSE, d3Script = "http://d3js.org/d3.v3.min.js")
Arguments
Data
a data frame object with three columns. The first two are the
names of the linked units. The third records an edge value. (Currently the
third column doesn't affect the graph.)
Source
character string naming the network source variable in the data
frame. If Source = NULL then the first column of the data frame is
treated as the source.
Target
character string naming the network target variable in the data
frame. If Target = NULL then the second column of the data frame is
treated as the target.
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.
linkDistance
numeric distance between the links in pixels (actually
arbitrary relative to the diagram's size).
charge
numeric value indicating either the strength of the node
repulsion (negative value) or attraction (positive value).
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).
nodeClickColour
character string specifying the colour you want the
node circles to be when they are clicked. Also changes the colour of the
text. 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.
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
D3.js was created by Michael Bostock. See http://d3js.org/ and, more
specifically for directed networks
https://github.com/mbostock/d3/wiki/Force-Layout
Examples
1
2
3
4
5
6
7
8
# Fake data
Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D")
Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I")
NetworkData <- data.frame(Source, Target)
# Create graph
d3SimpleNetwork(NetworkData, height = 300, width = 700,
fontsize = 15)
Example output
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.link {
stroke: #666;
opacity: 0.6;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.6;
stroke-width: 1.5px;
}
text {
font: 15px serif;
opacity: 0.6;
pointer-events: none;
}
</style>
<script src=http://d3js.org/d3.v3.min.js></script>
<script>
var links = [ { "source" : "A", "target" : "B" }, { "source" : "A", "target" : "C" }, { "source" : "A", "target" : "D" }, { "source" : "A", "target" : "J" }, { "source" : "B", "target" : "E" }, { "source" : "B", "target" : "F" }, { "source" : "C", "target" : "G" }, { "source" : "C", "target" : "H" }, { "source" : "D", "target" : "I" } ] ;
var nodes = {}
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
link.value = +link.value;
});
var width = 700
height = 300;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag);
node.append("circle")
.attr("r", 8)
.style("fill", "#3182bd");
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.style("fill", "#3182bd")
.text(function(d) { return d.name; });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// action to take on mouse click
function click() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 22)
.style("stroke-width", ".5px")
.style("opacity", 1)
.style("fill", "#E34A33")
.style("font", "37.5px serif");
d3.select(this).select("circle").transition()
.duration(750)
.style("fill", "#E34A33")
.attr("r", 16)
}
// action to take on mouse double click
function dblclick() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 6)
.style("fill", "#E34A33");
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 12)
.style("stroke", "none")
.style("fill", "#E34A33")
.style("stroke", "none")
.style("opacity", 0.6)
.style("font", "15px serif");
}
</script>
</body>
d3Network documentation built on May 2, 2019, 2:45 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Description Usage Arguments Source Examples
View source: R/d3SimpleNetwork.R
Description
d3SimpleNetwork creates simple D3 JavaScript force directed network
graphs.
Usage
1 2 3 4 5 6 | d3SimpleNetwork(Data, Source = NULL, Target = NULL, height = 600,
width = 900, fontsize = 7, linkDistance = 50, charge = -200,
linkColour = "#666", nodeColour = "#3182bd",
nodeClickColour = "#E34A33", textColour = "#3182bd", opacity = 0.6,
parentElement = "body", standAlone = TRUE, file = NULL,
iframe = FALSE, d3Script = "http://d3js.org/d3.v3.min.js")
|
Arguments
Data |
a data frame object with three columns. The first two are the names of the linked units. The third records an edge value. (Currently the third column doesn't affect the graph.) |
Source |
character string naming the network source variable in the data
frame. If |
Target |
character string naming the network target variable in the data
frame. If |
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. |
linkDistance |
numeric distance between the links in pixels (actually arbitrary relative to the diagram's size). |
charge |
numeric value indicating either the strength of the node repulsion (negative value) or attraction (positive value). |
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). |
nodeClickColour |
character string specifying the colour you want the node circles to be when they are clicked. Also changes the colour of the text. 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. |
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 |
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 |
iframe |
logical. If |
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
D3.js was created by Michael Bostock. See http://d3js.org/ and, more specifically for directed networks https://github.com/mbostock/d3/wiki/Force-Layout
Examples
1 2 3 4 5 6 7 8 | # Fake data
Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D")
Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I")
NetworkData <- data.frame(Source, Target)
# Create graph
d3SimpleNetwork(NetworkData, height = 300, width = 700,
fontsize = 15)
|
Example output
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.link {
stroke: #666;
opacity: 0.6;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.6;
stroke-width: 1.5px;
}
text {
font: 15px serif;
opacity: 0.6;
pointer-events: none;
}
</style>
<script src=http://d3js.org/d3.v3.min.js></script>
<script>
var links = [ { "source" : "A", "target" : "B" }, { "source" : "A", "target" : "C" }, { "source" : "A", "target" : "D" }, { "source" : "A", "target" : "J" }, { "source" : "B", "target" : "E" }, { "source" : "B", "target" : "F" }, { "source" : "C", "target" : "G" }, { "source" : "C", "target" : "H" }, { "source" : "D", "target" : "I" } ] ;
var nodes = {}
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
link.value = +link.value;
});
var width = 700
height = 300;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag);
node.append("circle")
.attr("r", 8)
.style("fill", "#3182bd");
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.style("fill", "#3182bd")
.text(function(d) { return d.name; });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// action to take on mouse click
function click() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 22)
.style("stroke-width", ".5px")
.style("opacity", 1)
.style("fill", "#E34A33")
.style("font", "37.5px serif");
d3.select(this).select("circle").transition()
.duration(750)
.style("fill", "#E34A33")
.attr("r", 16)
}
// action to take on mouse double click
function dblclick() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 6)
.style("fill", "#E34A33");
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 12)
.style("stroke", "none")
.style("fill", "#E34A33")
.style("stroke", "none")
.style("opacity", 0.6)
.style("font", "15px serif");
}
</script>
</body>
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.