代码拉取完成，页面将自动刷新
同步操作将从 程序员维C社区/graph 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Analytics + OutboundLink + Google Adsense -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-79254642-1');
</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>
<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>
<!-- Google Analytics + OutboundLink + Google Adsense -->
<meta charset="utf-8">
<title>Hierarchical edge bundling | the R Graph Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="How to build hierarchical edge bundling with R and the ggraph package: a set of basic examples with explanation and reproducible code.">
<meta name="keywords" content="Data,Dataviz,Datavisualization,R,Hierarchical,Edge,bundling">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/R_single_small.png">
<meta property="og:title" content="Hierarchical edge bundling | the R Graph Gallery">
<meta property="og:image" content="img/overview_RGG.png">
<meta property="og:description" content="How to build hierarchical edge bundling with R and the ggraph package: a set of basic examples with explanation and reproducible code.">
<!-- 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">
<!-- Custom styles for this template -->
<link href="css/agency.css" rel="stylesheet">
<!-- JQUERY -->
<script src="vendor/jquery/jquery.min.js"></script>
</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>Hierarchical edge bundling</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"><a href="https://www.data-to-viz.com/graph/edge_bundling.html">Hierarchical edge bundling</a> allows to visualize <u>adjacency relations</u> between entities organized in a <u>hierarchy</u>. The idea is to <u>bundle</u> the adjacency edges together to <u>decrease the clutter</u> usually observed in complex networks. The <code>ggraph</code> package is the best tool to build this kind of chart in R.</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>
<!-- ======================== PORTFOLIO SECTION ============================ -->
<!-- Images must be 480 x 480, resize them with ./script_reformat_img.sh output_name.png -->
<section class="bg" id="portfolio" style="padding-top: 10px">
<div class="container">
<div class="mySeryTitle">What is hierarchical edge bundling?</div>
<hr>
<p>The following post will guide you through the basics of hierarchical edge bundling. It explains what this kind of chart really is, describing step by step how to build it in <code>R</code> with the <code>graph</code> package.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="309-intro-to-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Start with a hierarchical network</p>
<hr>
<p class="explanation_portfolio">Hierarchical Edge Bundling is based on a hierarchy. An original node gives underlying nodes and so on. Final nodes are called leaves, displayed around the circle. </p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/309-intro-to-hierarchical-edge-bundling.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="309-intro-to-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Draw a connection</p>
<hr>
<p class="explanation_portfolio">The second required level is connection, stored in another dataset. Leaves are connected with curves instead of straight lines.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/309-intro-to-hierarchical-edge-bundling2.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="309-intro-to-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Most Basic Edge Bundling</p>
<hr>
<p class="explanation_portfolio">This is the most basic hierarchical edge bundling you can build. It displays many connection between leaves.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/309-intro-to-hierarchical-edge-bundling3.png" alt="">
</a>
</div>
</div>
<br><br><br>
<div class="mySeryTitle">Input data</div>
<hr>
<div class = "row">
<div class = "col-md-4 col-sm-12"><p>You need at least 2 inputs for hierarchical edge bundling: </p>
<ul>
<li>A hierarchical network structure, also called tree</li>
<li>An adjacency matrix that describes connections between some nodes of the tree</li>
</ul>
</div>
<div class = "col-md-4 col-sm-12">
<p>Connections data frame:</p>
<img src="img/other/Adjacency_Connection_2col.png"></img>
</div>
<div class = "col-md-4 col-sm-12 align-self-center">
<p>Hierarchical network data frame:</p>
<img src="img/other/Hierarchical_network_2col.png"></img>
</div>
</div>
<br><br><br>
<div class="mySeryTitle">Node and Connection color</div>
<hr>
<p>You can customize node and connection features to add more insight to the chart. For instance, you can change node color to highlight their belonging to a group, or connection color to represent its intensity</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="310-custom-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Uniform color</p>
<hr>
<p class="explanation_portfolio">You can use one unique color for all connections</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/310-custom-hierarchical-edge-bundling1.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="310-custom-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Color depending on value or index</p>
<hr>
<p class="explanation_portfolio">Color can also depends on value to represent the strength of the connection, or on the the node index.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/310-custom-hierarchical-edge-bundling2.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="310-custom-hierarchical-edge-bundling.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Custom nodes</p>
<hr>
<p class="explanation_portfolio">Change node features to display one more level of information on the chart</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/310-custom-hierarchical-edge-bundling3.png" alt="">
</a>
</div>
</div>
<br><br><br>
<div class="mySeryTitle">Add node labels</div>
<hr>
<p>Last but not least, it is crucial to add labels to chart nodes. This is a bit tricky since label alignment and orientation must be computed by hand. This last example will teach you how to proceed, resulting in the figure below.</p>
<a class="btn btn-secondary btn-md text-uppercase" href="311-add-labels-to-hierarchical-edge-bundling.html">Code</a>
<center><img src="img/graph/311-add-labels-to-hierarchical-edge-bundling.png" width="80%"></img></center>
</div>
</section>
<!-- ======================================================================= -->
<!-- ============================ RELATED SECTION ============================ -->
<section class="bg-light" id="portfolio_landing" style="padding-top: 30px; padding-bottom: 30px; margin-top: 100px;">
<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-diagram.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-diagram.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="https://www.data-to-viz.com/graph/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="hierarchical-edge-bundling.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>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
<!--============================== -->
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手