Skip to content

Commit

Permalink
Add connection map section
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtzy
holtzy committed Apr 30, 2019
1 parent 84d017d commit a4a4eb7
Show file tree
Hide file tree
Showing 18 changed files with 1,018 additions and 51 deletions.
75 changes: 27 additions & 48 deletions connectionmap.html → connection-map.html
View file
Expand Up @@ -14,17 +14,17 @@
</script>

<meta charset="utf-8">
<title>Connection map &#124; the D3 Graph Gallery</title>
<title>Connection map &#124; 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 a connection map 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,area chart">
<meta name="description" content="How to build a connection map with R: from the most basic example to highly customized examples.">
<meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript,R,connection,map">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/R_single_small.png">

<meta property="og:title" content="Area Chart &#124; the D3 Graph Gallery">
<meta property="og:title" content="Connection Map &#124; the R Graph Gallery">
<meta property="og:image" content="img/overview_RGG.png">
<meta property="og:description" content="How to build a connection map with Javascript and D3.js: from the most basic example to highly customized examples.">
<meta property="og:description" content="How to build a connection map with R: from the most basic example to highly customized examples.">

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Expand Down Expand Up @@ -94,7 +94,7 @@ <h1>Connection map</h1>
</li>
</ul>
<br><br>
<p style="max-width: 700px; margin: auto">A <a href="https://www.data-to-viz.com/story/MapConnection.html">connection map</a> shows the connections between several positions on a map. The link between 2 locations is usually drawn using <u><a href="https://en.wikipedia.org/wiki/Great_circle">great circle</a></u>: the shortest route between them. It results in a rounded line that gives a really pleasant look to the map.</p>
<p style="max-width: 700px; margin: auto">A <a href="https://www.data-to-viz.com/story/MapConnection.html">connection map</a> shows the connections between several positions on a map. The link between 2 locations is usually drawn using <u><a href="https://en.wikipedia.org/wiki/Great_circle">great circle</a></u>: the shortest route between them. It results in a rounded line that gives a really pleasant look to the map. In R, this is made possible thanks to libraries like <code>geosphere</code>.</p>
</div>
</header>

Expand Down Expand Up @@ -125,77 +125,56 @@ <h1>Connection map</h1>

<div class="mySeryTitle">Step by step</div>
<hr>
<p>Linking two locations on a map using a straight line would be pretty easy using a classic <code>d3.line()</code> approach. However, <a href="https://en.wikipedia.org/wiki/Great_circle">great circle</a> are more appreciated when it comes to connection map. Fortunately, the function <code>d3.geoPath()</code> makes it a breeze to compute the coordinate of the great circle path. Here are a few examples showing how to use it.</p>
<p>The following example is a step by step approach to great circles in <code>R</code>. It will guides you through the use of the <code>gcintermediate()</code> function of the <code>geosphere</code> package. It notably tackles the issue that arises when 2 cities have their shortest distance passing behind the globe. Explore it <a href="how-to-draw-connecting-routes-on-map-with-r-and-great-circles.html">here</a>.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/connectionmap_basic.html">
<a class="portfolio-link" href="how-to-draw-connecting-routes-on-map-with-r-and-great-circles.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>One unique connection</p>
<p>Background map and circle</p>
<hr>
<p class="explanation_portfolio">How to display one unique connection on the map. Just to illustrate how to use d3.geoPath()</p>
<p class="explanation_portfolio">Start by remembering how to plot a absic background map with circles to show 3 cities</p>
</div>
</div>
<img class="img-fluid" src="img/graph/connectionmap_basic.png" alt="">
<img class="img-fluid imgOfPortfolio" src="img/graph/how-to-draw-connecting-routes-on-map-with-r-and-great-circles1.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/connectionmap_multi.html">
<a class="portfolio-link" href="how-to-draw-connecting-routes-on-map-with-r-and-great-circles.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Multi connections</p>
<p>Add a few connections</p>
<hr>
<p class="explanation_portfolio">Same idea but applied on several connection. Just shows how to enter in the data to add all connections.</p>
<p class="explanation_portfolio">Add a few connections using great circles and the lines() function.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/connectionmap_multi.png" alt="">
<img class="img-fluid imgOfPortfolio" src="img/graph/how-to-draw-connecting-routes-on-map-with-r-and-great-circles2.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/connectionmap_csv.html">
<a class="portfolio-link" href="how-to-draw-connecting-routes-on-map-with-r-and-great-circles.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Input = csv file</p>
<p>Loop the process</p>
<hr>
<p class="explanation_portfolio">Plot a connection map from a list of connection stored in a .csv format. It requires a reformatting step.</p>
<p class="explanation_portfolio">Build a loop to display many connections. Add city names. Gert fancy.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/connectionmap_csv.png" alt="">
<img class="img-fluid imgOfPortfolio" src="img/graph/how-to-draw-connecting-routes-on-map-with-r-and-great-circles3.png" alt="">
</a>
</div>
</div>


<br><br><br><br>
<div class="mySeryTitle">Selection of blocks</div>
<div class="mySeryTitle">Application to real data</div>
<hr>
<p>A few blocks with more complicated codes to showcase what's possible to do with connection maps. First show how to display connections on hover. Second show how to apply <a href="bundle.html">edge bundling</a> to the connection to declutter the chart.</a>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://bl.ocks.org/mbostock/7608400">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Voronoi Arc Map</p>
<hr>
<p class="explanation_portfolio">Highlight flight routes when an airport is hovered.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_connectionmapVoronoi.png" alt="Hierarchical edge bundling">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://bl.ocks.org/sjengle/2e58e83685f6d854aa40c7bc546aeb24">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Flight Paths Edge Bundling</p>
<hr>
<p class="explanation_portfolio">Apply edge bundling technique on a connection map.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_connectionmapBundle.png" alt="Hierarchical edge bundling">
</a>
</div>
</div>
<p>The following map shows where surfers travel based on their twitter activity. Thousands of tweets containing <code>#surf</code> have been recovered and geocoded. Home and current locations are represented using great circles following the method described above.</p>
<p><u>Note</u>: This project is extensively described in <a href="https://www.data-to-viz.com/story/MapConnection.html">data-to-viz.com</a></p>
<a class="btn btn-secondary btn-md text-uppercase" href="https://www.data-to-viz.com/story/MapConnection.html">About the project</a>
<a class="btn btn-secondary btn-md text-uppercase" href="https://www.data-to-viz.com/story/MapConnection.html">Code</a>
<br><br>
<center><img src="img/graph/Surfer_travel.png" width="100%"></img></center>


</div>
</section>
Expand Down

0 comments on commit a4a4eb7

Please sign in to comment.