<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3523953066677938",
enable_page_level_ads: true
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-79254642-6');
</script>
<script>
var getOutboundLink = function(url) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': url,
'transport_type': 'beacon',
'event_callback': function(){document.location = url;}
});
}
</script>
<meta charset="utf-8">
<title>Network Graph | the D3 Graph Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="How to build a network chart with Javascript and D3.js: from the most basic example to highly customized examples.">
<meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,network graph">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/D3_single_small.png">
<meta property="og:title" content="Network Graph | the D3 Graph Gallery">
<meta property="og:image" content="img/overview_RGG.png">
<meta property="og:description" content="How to build a network graph with Javascript and D3.js: from the most basic example to highly customized examples.">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency.css" rel="stylesheet">
<!-- JQUERY -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- PRISM -->
<script src="LIB/prism.js"></script>
<link href="LIB/prism.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
<script>
$(function(){
$("#mainNav").load("html_chunk/menu.html");
});
</script>
<!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
<div id="modal_menu_insertion"> </div>
<script>
$(function(){
$("#modal_menu_insertion").load("html_chunk/menu_modal.html");
});
</script>
<!-- Header -->
<header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
<div class="textlanding">
<h1>Network graph</h1>
<hr class="short_hr">
<br>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://twitter.com/R_Graph_Gallery">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://github.com/holtzy">
<i class="fa fa-github" style="color: white"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://www.yan-holtz.com">
<i class="fa fa-home"></i>
</a>
</li>
</ul>
<br><br>
<p style="max-width: 700px; margin: auto">This is the <a href="https://www.data-to-viz.com/graph/network.html">network graph</a> section of the gallery. If you want to know more about this kind of chart, visit <a href="https://www.data-to-viz.com/graph/network.html">data-to-viz.com</a>. If you're looking for a simple way to implement it in d3.js, pick an example below.</p>
</div>
</header>
<!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
<div id="position_for_images"> </div>
<script>
$(function(){
$("#position_for_images").load("html_chunk/images.html");
});
</script>
<section class="bg" id="portfolio" style="padding-top: 10px">
<div class="container">
<div class="row">
<div class="col-lg-6">
<p class="mySeryTitle">A note on input data format</p>
<hr>
<p>
Building a network chart requires information on <u>nodes</u> and <u>links</u>. This information can be stored in many different format as described <a href="https://www.data-to-viz.com/graph/network.html">here</a>.
<code>Json</code> format is the most convenient way to work with <code>d3.js</code> and looks basically like that:
</p>
<div id="summary">
<div class="collapse" id="collapseSummary">
<pre class="language-js"><code id="codejs" contenteditable="false"><xmp>{ "nodes": [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" }
],
"links": [
{ "source": 1, "target": 2 }
]}</xmp></code></pre>
<p>It is unlikely that your data are currently at this format. You probably need to <u>reformat</u> your data first using another tool like <code>R</code>. The <a href="graph/network_data_format.html">following document</a> gives a few example on how to reformat the most common types of input to get a <code>json</code> file.</p>
<a class="btn btn-secondary btn-md text-uppercase" href="graph/network_data_format.html">Reformat your data to Json</a>
</div>
<a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>
</div>
</div>
<div class="col-lg-6">
<p class="mySeryTitle">A note about force</p>
<hr>
<p>The challenge in network diagram is to find out smart X and Y coordinates for each node.<br><br>In d3, it is done using force and simulation. Different forces?</p>
<div id="summary">
<div class="collapse" id="collapseSummary2">
<ul>
<li><u>Centering</u> (attracts every node to a specific position)</li>
<li><u>Collision</u> (consider nodes as circles with radius and try to avoid overlapping)</li>
<li><u>Links</u> (pushes linked nodes together, according to a link distance)</li>
<li><u>Many-Body</u> (apply general attraction (if positive) or repulsion (if negative) between nodes)</li>
<li><u>Positioning</u> (push each node towards a desired position).</li>
</ul>
<a class="btn btn-secondary btn-md text-uppercase" target="_blank" href="https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03">Understand force parameters</a>
</div>
<a class="collapsed" data-toggle="collapse" href="#collapseSummary2" aria-expanded="false" aria-controls="collapseSummary"></a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-light" id="portfolio" style="padding-top: 20px; padding-bottom: 20px;">
<div class="container">
<div class = "row">
<div class = "col-md-2 col-sm-2 align-self-center">
<img src="img/other/workinprogress2.png" width="120px"></img>
</div>
<div class = "col-md-10 col-sm-10 align-self-center">
<p>This section is a work in progress. Please have a look to this <a href="https://click.linksynergy.com/deeplink?id=G7VKNifkCIY&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Flearn-d3js-for-data-visualization%2F">ressource</a> for an introduction to force layout to build network charts with d3.js</p>
</div>
</div>
</div>
</section>
<section class="bg" id="portfolio" style="padding-top: 10px">
<div class="container">
<br><br><br><br>
<div class="mySeryTitle">Step by step</div>
<hr>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/network_basic.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Most basic</p>
<hr>
<p class="explanation_portfolio">The most basic network graph you can do in d3.js. Keeping only the core code.<br><br>Input format: Json</p>
</div>
</div>
<img class="img-fluid" src="img/graph/network_basic.png" alt="">
</a>
</div>
</div>
<br><br><br><br>
<div class="mySeryTitle">Interactivity</div>
<hr>
<p>Interactivity can be used for several reasons. First of all, adding a tooltip to each node is very useful when many nodes are drawn and annotation is impossible. Then dragging. Then highlighting relationships of a node.</p>
<br><br><br><br>
<div class="mySeryTitle">Template</div>
<hr>
<p>A template based on the co-authors network of a researcher.</p>
<br><br><br><br>
<div class="mySeryTitle">Selection of blocks</div>
<hr>
<p>A selection of examples showing the application of the basic concept to real life dataset.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://beta.observablehq.com/@mbostock/d3-force-directed-graph">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Network of character co-occurrence in <i>Les Misérables</i></p>
<hr>
<p class="explanation_portfolio">A famous network graph by Mike Bostock showing character co-occurrence in a book.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_networkMiserable.png" alt="network graph les miserables">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://github.com/d3/d3-force">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>D3-force documentation</p>
<hr>
<p class="explanation_portfolio">The d3-force documentation on github is invaluable. A must read before diving into networks in d3.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_networkDoc.png" alt="circular barchart">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>D3-force testing ground</p>
<hr>
<p class="explanation_portfolio">This example allows you to play with force parameters and see their effect in real time.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_networkTesting.png" alt="network diagram testing ground">
</a>
</div>
</div>
</div>
</section>
<!-- ======================================================================= -->
<!-- ============================ RELATED SECTION ============================ -->
<section class="bg-light" id="portfolio_landing" style="padding-top: 30px; padding-bottom: 30px">
<div class="container">
<p class="mySeryTitle">Related chart types</p>
<hr>
<div class="row">
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="chord.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Chord150.png" alt="">
</a>
<div class="captionPortfolio">Chord diagram</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="network.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Network150.png" alt="">
</a>
<div class="captionPortfolio">Network</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="sankey.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Sankey150.png" alt="">
</a>
<div class="captionPortfolio">Sankey</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="arc.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Arc150.png" alt="">
</a>
<div class="captionPortfolio">Arc diagram</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="bundle.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Bundle150.png" alt="">
</a>
<div class="captionPortfolio">Edge bundling</div>
</div>
</div>
</div>
</section>
<!-- ============================ CONTACT SECTION ============================ -->
<!-- ANCHOR -->
<a name="contactanchor"></a>
<section id="contact" class="bg" style="background-color: white"></section>
<!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
<script>
$(function(){
$("#contact").load("html_chunk/contact.html");
});
</script>
<!-- ============================ FOOTER SECTION ============================ -->
<footer class="bg-light" id="myFooter"></footer>
<!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
<script>
$(function(){
$("#myFooter").load("html_chunk/footer.html");
});
</script>
<!-- ============================ -->
<!-- =============== JAVASCRIPT SECTION =============== -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
<!-- Activate the bootstrap tooltip, must be after jQuery load -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!--============================== -->
</body>
</html>