<!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> <meta charset="utf-8"> <title>Density 2d | 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 2d density plot 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,2d density"> <meta name="author" content="Yan Holtz"> <link rel="icon" href="img/logo/D3_single_small.png"> <meta property="og:title" content="2d density plot | the D3 Graph Gallery"> <meta property="og:image" content="img/overview_RGG.png"> <meta property="og:description" content="How to build 2d density plot 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> </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>Density 2d</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/density2d.html">density 2d</a> section of the gallery. A 2d density represents the combined distribution of <u>two quantitative variables</u>. If you want to know more about this kind of chart, visit <a href="https://www.data-to-viz.com/graph/density2d.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> <!-- ======================== 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">main density 2d types</div> <hr> <p>A 2d density chart allows to visualize the <u>combined distribution</u> of two quantitative variables. The concept is always the same: one variable is represented on the X axis, the other on the Y axis. Then, the number of observations within a particular area of the 2D space is counted and represented by a color gradient.</p> <div id="portfolio-items" class="row"> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" href="graph/density2d_hexbin.html"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <p>Hexbin chart</p> <hr> <p class="explanation_portfolio">Group two-dimensional points into hexagonal bins. Possible thanks to the <code>d3-hexbin</code> plugin.</p> </div> </div> <img class="img-fluid" src="img/graph/density2d_hexbin.png" alt=""> </a> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" href="graph/density2d_shading.html"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <p>2d density with shading</p> <hr> <p class="explanation_portfolio">Very close from the contour plot, but shading is used to make the link between layers.</p> </div> </div> <img class="img-fluid" src="img/graph/density2d_shading.png" alt=""> </a> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" href="graph/density2d_histogram2d.html"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <p>2d histogram</p> <hr> <p class="explanation_portfolio">Group two-dimensional points into rectangular bins. Possible thanks to the <code>d3-rectbin</code> plugin.</p> </div> </div> <img class="img-fluid" src="img/graph/density2d_histogram2d.png" alt=""> </a> </div> <div class="col-md-4 col-sm-6 portfolio-item"> <a class="portfolio-link" href="graph/density2d_contour.html"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <p>Contour plot</p> <hr> <p class="explanation_portfolio">Representation of contour polygons computed using marching squares</p> </div> </div> <img class="img-fluid" src="img/graph/density2d_contour.png" alt=""> </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="scatter.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/ScatterPlot150.png" alt=""> </a> <div class="captionPortfolio">Scatter</div> </div> <div class="col-md-2 col-sm-4 portfolio-item"> <a class="portfolio-link" href="heatmap.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/Heatmap150.png" alt=""> </a> <div class="captionPortfolio">Heatmap</div> </div> <div class="col-md-2 col-sm-4 portfolio-item"> <a class="portfolio-link" href="correlogram.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/Correlogram150.png" alt=""> </a> <div class="captionPortfolio">Correlogram</div> </div> <div class="col-md-2 col-sm-4 portfolio-item"> <a class="portfolio-link" href="bubble.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/BubblePlot150.png" alt=""> </a> <div class="captionPortfolio">Bubble</div> </div> <div class="col-md-2 col-sm-4 portfolio-item "> <a class="portfolio-link" href="connectedscatter.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/ScatterConnected150.png" alt=""> </a> <div class="captionPortfolio">Connected scatter</div> </div> <div class="col-md-2 col-sm-4 portfolio-item show column correlation numonly bigdata"> <a class="portfolio-link" href="density2d.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/2dDensity150.png" alt=""> </a> <div class="captionPortfolio">Density 2d</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>