master

分支 (3)

管理

管理

master

dependabot/npm_and_yarn/HtmlWidget/backgroundMapTile_files/leaflet-providers-1.1.17/mversion-2.0.0

dependabot/npm_and_yarn/HtmlWidget/backgroundMapTile_files/leaflet-providers-1.1.17/eslint-6.5.1

R-graph-gallery
/
321-introduction-to-interactive-sanke...

<!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>Most basic Sankey Diagram &#8211; the R Graph Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Sankey Diagram can be built in R using the networkD3 package. This posts displays basic example, focusing on the different input formats that can be used.">
<meta name="keywords" content="R,ggplot2,tidyverse,Example,Data,Dataviz,Datavisualization,Plot,Chart,Graph,Learning,Caveat,Pitfall,Mistake">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/R_single_small.png">

<!-- Control appearance when shared by social media -->
<meta property="og:title" content="Most basic Sankey Diagram" />
<meta property="og:image" content="img/overview_RGG.png" />
<meta property="og:description" content="Sankey Diagram can be built in R using the networkD3 package. This posts displays basic example, focusing on the different input formats that can be used." />
<meta property='og:url' content="https://www.r-graph-gallery.com/321-introduction-to-interactive-sankey-diagram-2.html" />
<meta property="og:type" content="website" />

<!-- 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 data-spy="scroll" data-target="#myScrollspy" data-offset="1">


<!-- 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 = Title in big + social media Icon + quick description -->
<header class="masthead" style="padding-bottom: 30px;">
  <div class="textlanding">
      <center><h1>Most basic Sankey Diagram</h1></center>
      <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>
      <center><p style="max-width: 600px; margin-top: 40px"><a href="sankey-diagram.html">Sankey Diagram</a> can be built in <code>R</code> using the <code>networkD3</code> package. This posts displays basic example, focusing on the different input formats that can be used.</p></center>
      <div style="text-align:center">
         <a class="btn btn-secondary btn-xl text-uppercase js-scroll-trigger" href='sankey-diagram.html'>Sankey section</a>
         <a class="btn btn-secondary btn-xl text-uppercase js-scroll-trigger" href='https://www.data-to-viz.com/graph/sankey.html'>About Sankey</a>
      </div>
  </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>


<!-- STYLE for chart pages but not the rest of tthe website -->
<style>
  img {
    margin-top: 20px;
  }
</style>


<div class="container" style="padding-top: 80px">
<p>A <a href="sankey-diagram.html">Sankey diagram</a> represents flows, i.e. weigthed connections going from one node to another. Input data can be stored in 2 different formats:</p>
<ul>
<li>connection data frame (3 columns)</li>
<li>incidence matrix (square matrix)</li>
</ul>
<p>This post describes how to build a basic Sankey diagram from these 2 types of input.</p>
<h1 id="from-connection-data-frame">From connection data frame</h1>
<hr />
<div class="row">
<div class="col-md-5 col-sm-12 align-self-center">
<p>A connection data frame lists all the connections one by one in a data frame.</p>
<p>Usually you have a <code>source</code> and a <code>target</code> column. You can add a third column that gives further information for each connection, like the value of the flow.</p>
<p>This is the format you need to use the <code>networkD3</code> library. Let’s build a connection data frame and represent it as a Sankey diagram:</p>
</div>
<div class="col-md-7 col-sm-12">
<center>
<iframe src="HtmlWidget/sankeyBasic1.html" height="440" width="100%" style="border:none;">
</iframe>
</center>
</div>
</div>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co"># Library</span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="kw">library</span>(networkD3)</a>
<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="kw">library</span>(dplyr)</a>
<a class="sourceLine" id="cb1-4" data-line-number="4"> </a>
<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co"># A connection data frame is a list of flows with intensity for each flow</span></a>
<a class="sourceLine" id="cb1-6" data-line-number="6">links &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</a>
<a class="sourceLine" id="cb1-7" data-line-number="7">  <span class="dt">source=</span><span class="kw">c</span>(<span class="st">&quot;group_A&quot;</span>,<span class="st">&quot;group_A&quot;</span>, <span class="st">&quot;group_B&quot;</span>, <span class="st">&quot;group_C&quot;</span>, <span class="st">&quot;group_C&quot;</span>, <span class="st">&quot;group_E&quot;</span>), </a>
<a class="sourceLine" id="cb1-8" data-line-number="8">  <span class="dt">target=</span><span class="kw">c</span>(<span class="st">&quot;group_C&quot;</span>,<span class="st">&quot;group_D&quot;</span>, <span class="st">&quot;group_E&quot;</span>, <span class="st">&quot;group_F&quot;</span>, <span class="st">&quot;group_G&quot;</span>, <span class="st">&quot;group_H&quot;</span>), </a>
<a class="sourceLine" id="cb1-9" data-line-number="9">  <span class="dt">value=</span><span class="kw">c</span>(<span class="dv">2</span>,<span class="dv">3</span>, <span class="dv">2</span>, <span class="dv">3</span>, <span class="dv">1</span>, <span class="dv">3</span>)</a>
<a class="sourceLine" id="cb1-10" data-line-number="10">  )</a>
<a class="sourceLine" id="cb1-11" data-line-number="11"> </a>
<a class="sourceLine" id="cb1-12" data-line-number="12"><span class="co"># From these flows we need to create a node data frame: it lists every entities involved in the flow</span></a>
<a class="sourceLine" id="cb1-13" data-line-number="13">nodes &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</a>
<a class="sourceLine" id="cb1-14" data-line-number="14">  <span class="dt">name=</span><span class="kw">c</span>(<span class="kw">as.character</span>(links<span class="op">$</span>source), </a>
<a class="sourceLine" id="cb1-15" data-line-number="15">  <span class="kw">as.character</span>(links<span class="op">$</span>target)) <span class="op">%&gt;%</span><span class="st"> </span><span class="kw">unique</span>()</a>
<a class="sourceLine" id="cb1-16" data-line-number="16">)</a>
<a class="sourceLine" id="cb1-17" data-line-number="17"> </a>
<a class="sourceLine" id="cb1-18" data-line-number="18"><span class="co"># With networkD3, connection must be provided using id, not using real name like in the links dataframe.. So we need to reformat it.</span></a>
<a class="sourceLine" id="cb1-19" data-line-number="19">links<span class="op">$</span>IDsource &lt;-<span class="st"> </span><span class="kw">match</span>(links<span class="op">$</span>source, nodes<span class="op">$</span>name)<span class="op">-</span><span class="dv">1</span> </a>
<a class="sourceLine" id="cb1-20" data-line-number="20">links<span class="op">$</span>IDtarget &lt;-<span class="st"> </span><span class="kw">match</span>(links<span class="op">$</span>target, nodes<span class="op">$</span>name)<span class="op">-</span><span class="dv">1</span></a>
<a class="sourceLine" id="cb1-21" data-line-number="21"> </a>
<a class="sourceLine" id="cb1-22" data-line-number="22"><span class="co"># Make the Network</span></a>
<a class="sourceLine" id="cb1-23" data-line-number="23">p &lt;-<span class="st"> </span><span class="kw">sankeyNetwork</span>(<span class="dt">Links =</span> links, <span class="dt">Nodes =</span> nodes,</a>
<a class="sourceLine" id="cb1-24" data-line-number="24">              <span class="dt">Source =</span> <span class="st">&quot;IDsource&quot;</span>, <span class="dt">Target =</span> <span class="st">&quot;IDtarget&quot;</span>,</a>
<a class="sourceLine" id="cb1-25" data-line-number="25">              <span class="dt">Value =</span> <span class="st">&quot;value&quot;</span>, <span class="dt">NodeID =</span> <span class="st">&quot;name&quot;</span>, </a>
<a class="sourceLine" id="cb1-26" data-line-number="26">              <span class="dt">sinksRight=</span><span class="ot">FALSE</span>)</a>
<a class="sourceLine" id="cb1-27" data-line-number="27">p</a>
<a class="sourceLine" id="cb1-28" data-line-number="28"></a>
<a class="sourceLine" id="cb1-29" data-line-number="29"><span class="co"># save the widget</span></a>
<a class="sourceLine" id="cb1-30" data-line-number="30"><span class="co"># library(htmlwidgets)</span></a>
<a class="sourceLine" id="cb1-31" data-line-number="31"><span class="co"># saveWidget(p, file=paste0( getwd(), &quot;/HtmlWidget/sankeyBasic1.html&quot;))</span></a></code></pre></div>
<h1 id="from-incidence-matrix">From incidence matrix</h1>
<hr />
<div class="row">
<div class="col-md-5 col-sm-12 align-self-center">
<p>An incidence matrix is square or rectangle.</p>
<p>Row and column names are node names. The item in row x and column y represents the flow between x and y. In the Sankey diagram we represent all flows that are over 0.</p>
<p>Since the <code>networkD3</code> library expects a connection data frame, we will fist convert the dataset, and then re-use the code from above.</p>
</div>
<div class="col-md-7 col-sm-12">
<center>
<iframe src="HtmlWidget/sankeyBasic2.html" height="440" width="100%" style="border:none;">
</iframe>
</center>
</div>
</div>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="co"># Library</span></a>
<a class="sourceLine" id="cb2-2" data-line-number="2"><span class="kw">library</span>(networkD3)</a>
<a class="sourceLine" id="cb2-3" data-line-number="3"><span class="kw">library</span>(dplyr)</a>
<a class="sourceLine" id="cb2-4" data-line-number="4"> </a>
<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="co"># Create an incidence matrix. Usually the flow goes from the row names to the column names.</span></a>
<a class="sourceLine" id="cb2-6" data-line-number="6"><span class="co"># Remember that our connection are directed since we are working with a flow.</span></a>
<a class="sourceLine" id="cb2-7" data-line-number="7"><span class="kw">set.seed</span>(<span class="dv">1</span>)</a>
<a class="sourceLine" id="cb2-8" data-line-number="8">data &lt;-<span class="st"> </span><span class="kw">matrix</span>(<span class="kw">sample</span>( <span class="kw">seq</span>(<span class="dv">0</span>,<span class="dv">40</span>), <span class="dv">49</span>, <span class="dt">replace=</span>T ), <span class="dv">7</span>, <span class="dv">7</span>)</a>
<a class="sourceLine" id="cb2-9" data-line-number="9">data[data <span class="op">&lt;</span><span class="st"> </span><span class="dv">35</span>] &lt;-<span class="st"> </span><span class="dv">0</span></a>
<a class="sourceLine" id="cb2-10" data-line-number="10"><span class="kw">colnames</span>(data) =<span class="st"> </span><span class="kw">rownames</span>(data) =<span class="st"> </span><span class="kw">c</span>(<span class="st">&quot;group_A&quot;</span>, <span class="st">&quot;group_B&quot;</span>, <span class="st">&quot;group_C&quot;</span>, <span class="st">&quot;group_D&quot;</span>, <span class="st">&quot;group_E&quot;</span>, <span class="st">&quot;group_F&quot;</span>, <span class="st">&quot;group_G&quot;</span>)</a>
<a class="sourceLine" id="cb2-11" data-line-number="11"></a>
<a class="sourceLine" id="cb2-12" data-line-number="12"><span class="co"># Transform it to connection data frame with tidyr from the tidyverse:</span></a>
<a class="sourceLine" id="cb2-13" data-line-number="13">links &lt;-<span class="st"> </span>data <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb2-14" data-line-number="14"><span class="st">  </span><span class="kw">as.data.frame</span>() <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb2-15" data-line-number="15"><span class="st">  </span><span class="kw">rownames_to_column</span>(<span class="dt">var=</span><span class="st">&quot;source&quot;</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb2-16" data-line-number="16"><span class="st">  </span><span class="kw">gather</span>(<span class="dt">key=</span><span class="st">&quot;target&quot;</span>, <span class="dt">value=</span><span class="st">&quot;value&quot;</span>, <span class="dv">-1</span>) <span class="op">%&gt;%</span></a>
<a class="sourceLine" id="cb2-17" data-line-number="17"><span class="st">  </span><span class="kw">filter</span>(value <span class="op">!=</span><span class="st"> </span><span class="dv">0</span>)</a>
<a class="sourceLine" id="cb2-18" data-line-number="18"> </a>
<a class="sourceLine" id="cb2-19" data-line-number="19"><span class="co"># From these flows we need to create a node data frame: it lists every entities involved in the flow</span></a>
<a class="sourceLine" id="cb2-20" data-line-number="20">nodes &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</a>
<a class="sourceLine" id="cb2-21" data-line-number="21">  <span class="dt">name=</span><span class="kw">c</span>(<span class="kw">as.character</span>(links<span class="op">$</span>source), <span class="kw">as.character</span>(links<span class="op">$</span>target)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb2-22" data-line-number="22"><span class="st">    </span><span class="kw">unique</span>()</a>
<a class="sourceLine" id="cb2-23" data-line-number="23">  )</a>
<a class="sourceLine" id="cb2-24" data-line-number="24"> </a>
<a class="sourceLine" id="cb2-25" data-line-number="25"><span class="co"># With networkD3, connection must be provided using id, not using real name like in the links dataframe.. So we need to reformat it.</span></a>
<a class="sourceLine" id="cb2-26" data-line-number="26">links<span class="op">$</span>IDsource &lt;-<span class="st"> </span><span class="kw">match</span>(links<span class="op">$</span>source, nodes<span class="op">$</span>name)<span class="op">-</span><span class="dv">1</span> </a>
<a class="sourceLine" id="cb2-27" data-line-number="27">links<span class="op">$</span>IDtarget &lt;-<span class="st"> </span><span class="kw">match</span>(links<span class="op">$</span>target, nodes<span class="op">$</span>name)<span class="op">-</span><span class="dv">1</span></a>
<a class="sourceLine" id="cb2-28" data-line-number="28"> </a>
<a class="sourceLine" id="cb2-29" data-line-number="29"><span class="co"># Make the Network</span></a>
<a class="sourceLine" id="cb2-30" data-line-number="30">p &lt;-<span class="st"> </span><span class="kw">sankeyNetwork</span>(<span class="dt">Links =</span> links, <span class="dt">Nodes =</span> nodes,</a>
<a class="sourceLine" id="cb2-31" data-line-number="31">                     <span class="dt">Source =</span> <span class="st">&quot;IDsource&quot;</span>, <span class="dt">Target =</span> <span class="st">&quot;IDtarget&quot;</span>,</a>
<a class="sourceLine" id="cb2-32" data-line-number="32">                     <span class="dt">Value =</span> <span class="st">&quot;value&quot;</span>, <span class="dt">NodeID =</span> <span class="st">&quot;name&quot;</span>, </a>
<a class="sourceLine" id="cb2-33" data-line-number="33">                     <span class="dt">sinksRight=</span><span class="ot">FALSE</span>)</a>
<a class="sourceLine" id="cb2-34" data-line-number="34"></a>
<a class="sourceLine" id="cb2-35" data-line-number="35">p</a>
<a class="sourceLine" id="cb2-36" data-line-number="36"></a>
<a class="sourceLine" id="cb2-37" data-line-number="37"><span class="co"># save the widget</span></a>
<a class="sourceLine" id="cb2-38" data-line-number="38"><span class="co"># library(htmlwidgets)</span></a>
<a class="sourceLine" id="cb2-39" data-line-number="39"><span class="co"># saveWidget(p, file=paste0( getwd(), &quot;/HtmlWidget/sankeyBasic2.html&quot;))</span></a></code></pre></div>
</div>
<!-- ============================ 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 ============================ -->
<section id="contact" class="bg" style="background-color: white; padding-top: 60px">
  <div class="container">
    <div class="row">
      <div class="col-lg-2 text-center"></div>
      <div class="col-lg-8 text-center">
        <br><br><br>
        <h2 class="section-heading text-uppercase" style="color: black">Contact</h2>
        <p>This document is a work by <a href="https://www.yan-holtz.com">Yan Holtz</a>. Any feedback is highly encouraged. You can fill an issue on <a href="https://github.com/holtzy/D3-graph-gallery/issues">Github</a>, drop me a message on <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send an email pasting <a href="">yan.holtz.data</a> with <a href="">gmail.com</a>.</p>
        <div style="text-align:center">
           <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://github.com/holtzy">Github</a>
           <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://twitter.com/R_Graph_Gallery">Twitter</a>
         </div>
      </div>
    </div>
  </div>
</section>


<!-- ============================ FOOTER SECTION ============================ -->
<footer class="bg-light" id="myFooter">
  <div class="container" >
    <div class="row">
      <div class="col-md-4">
        <span class="copyright">Copyright &copy; the R graph gallery 2018</span>
      </div>
      <div class="col-md-4">
        <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">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-4">
        <ul class="list-inline quicklinks">
          <li class="list-inline-item">
            <a href="#">Privacy Policy</a>
          </li>
          <li class="list-inline-item">
            <a href="#">Terms of Use</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>


<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>


<!-- ============================ JAVASCRIPT SECTION ============================ -->

<!-- Bootstrap core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>

</body>
</html>