<!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>Bubble map | 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 map with markers on top with R: a set of examples with explanation and reproducible code.">
<meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,area chart">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/R_single_small.png">
<meta property="og:title" content="Bubble map | the R Graph Gallery">
<meta property="og:image" content="img/overview_RGG.png">
<meta property="og:description" content="How to build a map with markers on top with R: a set of 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>
<!-- D3.JS v4 -->
<script src="js/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- JQUERY -->
</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>Bubble map</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 section is dedicated to map with <u>markers</u> displayed on top of it. These markers can be circles with size proportional to a numeric value, resulting in a <a href="https://www.data-to-viz.com/graph/bubblemap.html">bubble map</a>. Before exploring this section, learn how to build the <a href="map.html">map background</a> with 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">Interactive bubble maps with <code>leaflet</code></div>
<hr>
<p>The <a href="https://rstudio.github.io/leaflet/">leaflet</a> R package is a wrapper of the Javascript <a href="https://leafletjs.com">leaflet.js</a> library. It allows to build stunning interactive maps in minutes with R. Maps can be exported and standalong html files, or be embeded in a R markdown file or a shiny application. Check the 3 examples below to get the basics of interactive bubble maps with R.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="182-add-circles-rectangles-on-leaflet-map.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Add Markers</p>
<hr>
<p class="explanation_portfolio">Learn how to add a marker on a map with leaflet. Circle, rectangle, pointer and more. Link it to tooltip.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/182-add-circles-rectangles-on-leaflet-map1.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="182-add-circles-rectangles-on-leaflet-map.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Bubble map</p>
<hr>
<p class="explanation_portfolio">Lear to map the marker size to a numeric value, resulting in a bubble map.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/182-add-circles-rectangles-on-leaflet-map2.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="242-use-leaflet-control-widget.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Interactive legend</p>
<hr>
<p class="explanation_portfolio">You can add tags to marker and build an interactive legend that allows to toggle their visibility.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/242-use-leaflet-control-widget.png" alt="">
</a>
</div>
</div>
<p style="padding-top: 10px">Leaflet maps are interactive. Try to zoom and drag the map below. Hover a circle to get more information about it. <a href="19-map-leafletr.html">See Code</a></p>
<center><iframe src="HtmlWidget/bubblemapQuakes.html" height="400px" width="100%" style="border:none;"></iframe></center>
<a class="btn btn-secondary" href="19-map-leafletr.html">See Code</a>
<br><br><br><br>
<div class="mySeryTitle">Static bubble maps with <code>ggplot2</code></div>
<hr>
<p><code>ggplot2</code> is probably the best option if you're looking to build a static bubble map. It offers all the flexibility of the grammar of graphic, and allow to re-use all the knowledge you learned building other types of chart with it. If you don't know about ggplot2, read this <a href="ggplot2-package.html">introduction</a>.</p>
<div id="portfolio-items" class="row">
<div class="col-md-1 col-sm-0 portfolio-item">
</div>
<div class="col-md-6 col-sm-6 portfolio-item">
<a class="portfolio-link" href="330-bubble-map-with-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Customization</p>
<hr>
<p class="explanation_portfolio">Make your bubble map pretty: legend, backgroud, color palette and more.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" width="100%" src="img/graph/330-bubble-map-with-ggplot2.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item align-self-center">
<a class="portfolio-link" href="330-bubble-map-with-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Most basic</p>
<hr>
<p class="explanation_portfolio">Build a scatterplot on top of a map with the usual geom_point() function.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" width="100%" src="img/graph/330-bubble-map-with-ggplot21.png" alt="">
</a>
<br>
<a class="portfolio-link" href="330-bubble-map-with-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Annotate</p>
<hr>
<p class="explanation_portfolio">Annotate points as you would do on a usual scatterplot.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" width="100%" src="img/graph/330-bubble-map-with-ggplot22.png" alt="">
</a>
<br>
<a class="portfolio-link" href="330-bubble-map-with-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>First bubble</p>
<hr>
<p class="explanation_portfolio">Map a numeric variable to circle size and color to get your first bubble map with ggplot2 and R.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" width="100%" src="img/graph/330-bubble-map-with-ggplot23.png" alt="">
</a>
</div>
</div>
<br><br><br><br>
<div class="mySeryTitle">Interactive bubble map with <code>ggplot2</code> and <code>plotly</code> </div>
<hr>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-3 portfolio-item align-self-center">
<p>The <code>plotly</code> package provides the magic <code>ggplotly()</code> function. This function will turn any of your static bubble map made with ggplot2 interactive. With only one more line of code:</p>
<a class="btn btn-secondary" href="180-change-background-in-leaflet-map.html">See Code</a>
<br><br>
<u>Note</u>: try to zoom, drag, hover circle, select area and <a href="180-change-background-in-leaflet-map.html">more</a>.
</div>
<div class="col-md-8 col-sm-9 portfolio-item">
<center><iframe src="HtmlWidget/bubblemapUK.html" width="100%" height="600px" style="border:none;"></iframe></center>
</div>
</div>
<br><br><br><br>
<div class="mySeryTitle">Bubble map with the <code>cartography</code> package.</div>
<hr>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="177-map-with-proportional-symbols.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Cartography pkg</p>
<hr>
<p class="explanation_portfolio">Check the cartography package to build great maps in minutes with R.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/177-map-with-proportional-symbols.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 align-self-center">
<p>The <code>cartography</code> package is a great alternative to the tidyverse to build maps with R. It provides many helpers specially made for maps.</p>
</div>
</div>
</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="map.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/Map150.png" alt="">
</a>
<div class="captionPortfolio">Map</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="choropleth-map.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/Choropleth150.png" alt="">
</a>
<div class="captionPortfolio">Choropleth</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="hexbin-map.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/MapHexbin150.png" alt="">
</a>
<div class="captionPortfolio">Hexbin map</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="cartogram.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/Cartogram150.png" alt="">
</a>
<div class="captionPortfolio">Cartogram</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="connection-map.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/ConnectedMap150.png" alt="">
</a>
<div class="captionPortfolio">Connection</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="bubble-map.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/BubbleMap150.png" alt="">
</a>
<div class="captionPortfolio">Bubble map</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>