<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<title>htmlwidgets: networkD3</title>
<script src="libs/jquery/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/bootstrap/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap/shim/respond.min.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/d3/d3.min.js"></script>
<script src="libs/forceNetwork-binding/forceNetwork.js"></script>
<!-- Styles for this site -->
<link href="css/styles.css" rel="stylesheet">
<!-- Polyfill JS -->
<script src="js/polyfill.js"></script>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet"
href="libs/highlight/textmate.css"
type="text/css" />
<script src="libs/highlight/highlight.js"></script>
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
window.setTimeout(function() {
hljs.initHighlighting();
}, 0);
}
</script>
</head>
<body>
<style type = "text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
</style>
<div class="container-fluid main-container">
<!--html_preserve-->
<div class="header">
<nav class="navbar">
<h3 class="navbar-left"><strong>htmlwidgets</strong> for R</h3>
<ul class="nav nav-pills navbar-right">
<li role="presentation" id="nav-home"><a href="index.html">Home</a></li>
<li role="presentation" id="nav-showcase"><a href="showcase_leaflet.html">Showcase</a></li>
<li role="presentation" id="nav-develop" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Develop <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="develop_intro.html">Creating a widget</a></li>
<li role="presentation"><a href="develop_sizing.html">Widget sizing</a></li>
<li role="presentation"><a href="develop_advanced.html">Advanced topics</a></li>
</ul>
</li>
<li role="presentation" id="nav-github"><a href="https://github.com/ramnathv/htmlwidgets">GitHub</a></li>
</ul>
</nav>
</div>
<div class="showcase-header hidden">
<div id = "showcase-intro">
HTML widgets work just like R plots except they produce interactive web visualizations. A line or two of R code is all it takes to produce a D3 graphic or Leaflet map. HTML widgets can be used at the R console as well as embedded in R Markdown reports and Shiny web applications.
</div>
<div class="row">
<div class="col-sm-4">
<div class="list-group">
<a href="showcase_leaflet.html" class="list-group-item">
<h5 class="list-group-item-heading">Leaflet</h5>
<p class="list-group-item-text">Geo-spatial mapping</p>
</a>
<a href="showcase_dygraphs.html" class="list-group-item">
<h5 class="list-group-item-heading">dygraphs</h5>
<p class="list-group-item-text">Time series charting</p>
</a>
<a href="showcase_plotly.html" class="list-group-item">
<h5 class="list-group-item-heading">Plotly</h5>
<p class="list-group-item-text">Interactive graphics with D3</p>
</a>
<a href="showcase_networkD3.html" class="list-group-item">
<h5 class="list-group-item-heading">networkD3</h5>
<p class="list-group-item-text">Graph data visualization with D3</p>
</a>
<a href="showcase_d3heatmap.html" class="list-group-item">
<h5 class="list-group-item-heading">d3heatmap</h5>
<p class="list-group-item-text">Interactive heatmaps with D3</p>
</a>
<a href="showcase_datatables.html" class="list-group-item">
<h5 class="list-group-item-heading">DataTables</h5>
<p class="list-group-item-text">Tabular data display</p>
</a>
<a href="showcase_threejs.html" class="list-group-item">
<h5 class="list-group-item-heading">threejs</h5>
<p class="list-group-item-text">3D scatterplots and globes</p>
</a>
<a href="showcase_diagrammer.html" class="list-group-item">
<h5 class="list-group-item-heading">DiagrammeR</h5>
<p class="list-group-item-text">Diagrams and flowcharts</p>
</a>
<a href="showcase_metricsgraphics.html" class="list-group-item">
<h5 class="list-group-item-heading">MetricsGraphics</h5>
<p class="list-group-item-text">Scatterplots and line charts with D3</p>
</a>
</div> <!-- list-group -->
</div> <!-- col-sm-4 -->
<div class="col-sm-8" id="showcase-body">
</div> <!-- col-sm-8 -->
</div> <!-- row -->
</div> <!-- showcase-header -->
<div id="page-body">
<!--/html_preserve-->
<div id="header">
<h1 class="title">htmlwidgets: networkD3</h1>
</div>
<div id="networkd3" class="section level3">
<h3>networkD3</h3>
<p><a href="http://christophergandrud.github.io/networkD3/" class="uri">http://christophergandrud.github.io/networkD3/</a></p>
<p>networkD3 provides tools for creating D3 JavaScript network graphs from R.</p>
<pre class="r"><code>library(networkD3)
data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
Group = "group", opacity = 0.4)</code></pre>
<p><div id="htmlwidget-3078" style="width:576px;height:480px;" class="forceNetwork"></div>
<script type="application/json" data-for="htmlwidget-3078">{
"x": {
"links": {
"source": [1, 2, 3, 3, 4, 5, 6, 7, 8, 9, 11, 11, 11, 11, 12, 13, 14, 15, 17, 18, 18, 19, 19, 19, 20, 20, 20, 20, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 25, 25, 25, 26, 26, 26, 26, 27, 27, 27, 27, 27, 28, 28, 29, 29, 29, 30, 31, 31, 31, 31, 32, 33, 33, 34, 34, 35, 35, 35, 36, 36, 36, 36, 37, 37, 37, 37, 37, 38, 38, 38, 38, 38, 38, 39, 40, 41, 41, 42, 42, 42, 43, 43, 43, 44, 44, 45, 47, 48, 48, 48, 48, 49, 49, 50, 50, 51, 51, 51, 52, 52, 53, 54, 54, 54, 55, 55, 55, 55, 55, 55, 55, 55, 55, 55, 56, 56, 57, 57, 57, 58, 58, 58, 58, 58, 59, 59, 59, 59, 60, 60, 60, 61, 61, 61, 61, 61, 61, 62, 62, 62, 62, 62, 62, 62, 62, 63, 63, 63, 63, 63, 63, 63, 63, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 66, 66, 66, 66, 66, 67, 68, 68, 68, 68, 68, 68, 69, 69, 69, 69, 69, 69, 69, 70, 70, 70, 70, 70, 70, 70, 70, 71, 71, 71, 71, 71, 71, 71, 71, 72, 72, 72, 73, 74, 74, 75, 75, 75, 75, 75, 75, 75, 76, 76, 76, 76, 76, 76, 76],
"target": [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 10, 3, 2, 0, 11, 11, 11, 11, 16, 16, 17, 16, 17, 18, 16, 17, 18, 19, 16, 17, 18, 19, 20, 16, 17, 18, 19, 20, 21, 16, 17, 18, 19, 20, 21, 22, 12, 11, 23, 11, 24, 23, 11, 24, 11, 16, 25, 11, 23, 25, 24, 26, 11, 27, 23, 27, 11, 23, 30, 11, 23, 27, 11, 11, 27, 11, 29, 11, 34, 29, 34, 35, 11, 29, 34, 35, 36, 11, 29, 34, 35, 36, 37, 11, 29, 25, 25, 24, 25, 41, 25, 24, 11, 26, 27, 28, 11, 28, 46, 47, 25, 27, 11, 26, 11, 49, 24, 49, 26, 11, 51, 39, 51, 51, 49, 26, 51, 49, 39, 54, 26, 11, 16, 25, 41, 48, 49, 55, 55, 41, 48, 55, 48, 27, 57, 11, 58, 55, 48, 57, 48, 58, 59, 48, 58, 60, 59, 57, 55, 55, 58, 59, 48, 57, 41, 61, 60, 59, 48, 62, 57, 58, 61, 60, 55, 55, 62, 48, 63, 58, 61, 60, 59, 57, 11, 63, 64, 48, 62, 58, 61, 60, 59, 57, 55, 64, 58, 59, 62, 65, 48, 63, 61, 60, 57, 25, 11, 24, 27, 48, 41, 25, 68, 11, 24, 27, 48, 41, 25, 69, 68, 11, 24, 27, 41, 58, 27, 69, 68, 70, 11, 48, 41, 25, 26, 27, 11, 48, 48, 73, 69, 68, 25, 48, 41, 70, 71, 64, 65, 66, 63, 62, 48, 58],
"value": [1, 8, 10, 6, 1, 1, 1, 1, 2, 1, 1, 3, 3, 5, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 3, 3, 3, 4, 3, 3, 3, 3, 5, 3, 3, 3, 3, 4, 4, 3, 3, 3, 3, 4, 4, 4, 2, 9, 2, 7, 13, 1, 12, 4, 31, 1, 1, 17, 5, 5, 1, 1, 8, 1, 1, 1, 2, 1, 2, 3, 2, 1, 1, 2, 1, 3, 2, 3, 3, 2, 2, 2, 2, 1, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 1, 1, 1, 2, 3, 2, 2, 1, 3, 1, 1, 3, 1, 2, 1, 2, 1, 1, 1, 3, 2, 1, 1, 9, 2, 2, 1, 1, 1, 2, 1, 1, 6, 12, 1, 1, 21, 19, 1, 2, 5, 4, 1, 1, 1, 1, 1, 7, 7, 6, 1, 4, 15, 5, 6, 2, 1, 4, 2, 2, 6, 2, 5, 1, 1, 9, 17, 13, 7, 2, 1, 6, 3, 5, 5, 6, 2, 4, 3, 2, 1, 5, 12, 5, 4, 10, 6, 2, 9, 1, 1, 5, 7, 3, 5, 5, 5, 2, 5, 1, 2, 3, 3, 1, 2, 2, 1, 1, 1, 1, 3, 5, 1, 1, 1, 1, 1, 6, 6, 1, 1, 2, 1, 1, 4, 4, 4, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 2, 2, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
},
"nodes": {
"name": ["Myriel", "Napoleon", "Mlle.Baptistine", "Mme.Magloire", "CountessdeLo", "Geborand", "Champtercier", "Cravatte", "Count", "OldMan", "Labarre", "Valjean", "Marguerite", "Mme.deR", "Isabeau", "Gervais", "Tholomyes", "Listolier", "Fameuil", "Blacheville", "Favourite", "Dahlia", "Zephine", "Fantine", "Mme.Thenardier", "Thenardier", "Cosette", "Javert", "Fauchelevent", "Bamatabois", "Perpetue", "Simplice", "Scaufflaire", "Woman1", "Judge", "Champmathieu", "Brevet", "Chenildieu", "Cochepaille", "Pontmercy", "Boulatruelle", "Eponine", "Anzelma", "Woman2", "MotherInnocent", "Gribier", "Jondrette", "Mme.Burgon", "Gavroche", "Gillenormand", "Magnon", "Mlle.Gillenormand", "Mme.Pontmercy", "Mlle.Vaubois", "Lt.Gillenormand", "Marius", "BaronessT", "Mabeuf", "Enjolras", "Combeferre", "Prouvaire", "Feuilly", "Courfeyrac", "Bahorel", "Bossuet", "Joly", "Grantaire", "MotherPlutarch", "Gueulemer", "Babet", "Claquesous", "Montparnasse", "Toussaint", "Child1", "Child2", "Brujon", "Mme.Hucheloup"],
"group": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 3, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 5, 4, 0, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 4, 6, 4, 4, 5, 0, 0, 7, 7, 8, 5, 5, 5, 5, 5, 5, 8, 5, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 4, 4, 4, 4, 5, 10, 10, 4, 8]
},
"options": {
"NodeID": "name",
"Group": "group",
"colourScale": "d3.scale.category20()",
"fontSize": 7,
"clickTextSize": 17.5,
"linkDistance": 50,
"linkWidth": "function(d) { return Math.sqrt(d.value); }",
"charge": -120,
"linkColour": "#666",
"opacity": 0.4,
"zoom": false,
"legend": false,
"nodesize": "false",
"radiusCalculation": " Math.sqrt(d.nodesize)+6"
}
},
"evals": []
}</script></p>
</div>
</div> <!-- page-body -->
<footer>
<div> </div>
<div> </div>
<div class="text-muted">
Copyright © 2014 - 2015 Ramnath Vaidyanathan, Kenton Russell, and RStudio, Inc.
</div>
</footer>
<script>
// manage active state of headres and navigation based on current page
$(document).ready(function () {
// compute name of page
href = window.location.pathname;
href = href.substr(href.lastIndexOf('/') + 1);
if (href == "")
href = "index.html";
// main navigation and headers
if (href.startsWith("index")) {
$('#nav-home').addClass('active');
$('.title').addClass('hidden');
} else if (href.startsWith("showcase")) {
$('#nav-showcase').addClass('active');
$("#page-body").detach().appendTo('#showcase-body');
$('.showcase-header').removeClass('hidden');
$('.title').addClass('hidden');
} else if (href.startsWith("develop")) {
$('#nav-develop').addClass('active');
}
// submenu navigation (used by showcase and develop)
$('.list-group a[href="' + href + '"]').addClass('active');
});
</script>
</div>
<script>
// add bootstrap table styles to pandoc tables
$(document).ready(function () {
$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
});
</script>
</body>
</html>