<!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>Basic stacked barplot in d3.js</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Using d3.js to create a very basic stacked barplot">
  <meta name="keywords" content="Data, Dataviz, Datavisualization, Javascript, JS, d3.js, stacked barplot">
  <meta name="author" content="Yan Holtz">
  <link rel="icon" href="../img/logo/D3_single_small.png">

  <meta property="og:title" content="Basic stacked barplot in d3.js">
  <meta property="og:image" content="https://www.d3-graph-gallery.com/img/logo/D3_full_medium.png">
  <meta property="og:description" content="Using d3.js to create a very basic stacked barplot">

  <!-- 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">

  <!-- PRISM -->
  <script src="../LIB/prism.js"></script>
  <link href="../LIB/prism.css" rel="stylesheet" />

  <!-- D3.JS v4 -->
  <script src="../js/d3.v4.js"></script>

  <!-- JQUERY -->
  <script src="../vendor/jquery/jquery.min.js"></script>

  <!-- HTML TO CANVAS -->
  <script src="../js/html2canvas.js"></script>

  <!-- Function to parse html and js code chunks made by Yan Holtz -->
  <script src="../js/myParser.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">
  <div class="textlanding">
      <h1>Most basic stacked barplot in d3.js</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 post describes how to build a very basic <a href="https://www.d3-graph-gallery.com/barplot">stacked barplot</a> with d3.js. You can see many other examples in the <a href="https://wwww.d3-graph-gallery.com/barplot">barplot section</a> of the gallery. Learn more about the theory of boxplots in <a href="https://www.data-to-viz.com/graph/barplot.html">data-to-viz.com</a>.</p>
      <br>
      <a class="btn btn-secondary btn-md text-uppercase" href="../barplot.html">Barplot section</a>
      <button class="btn btn-secondary btn-md text-uppercase" onclick="myCodeDownload('chart_example_from_d3-graph-gallery.html', 'code', 'codejs')">Download code</button>
  </div>
</header>














<section class="bg" style="padding-top: 20px; padding-bottom: 20px">
<div class="container" >
  <div class="row">

<!-- ==================== GRAPH SECTION = WHERE THE GRAPH APPEARS ==================== -->

  <div class="col-lg-5 .align-middle">
    <div style="position: -webkit-sticky; position: sticky; top: 120px">
      <div class="bg-light" id="result" ></div>
      <br>
      <div>
        <h5>Steps:</h5>
        <ul>
          <br>
          <li>The Html part of the code just creates a <code>div</code> that will be modified by d3 later on.</li>
          <br>
          <li>The first part of the javascript code set a <code>svg</code> area. It specify the chart size and its margin. <a href="">Read more</a>.</li>
          <br>
          <li>The <code>d3.stack()</code> function is used to stack the data: it computes the new position of each group on the Y axis</li>
          <br>
          <li>The output of <code>d3.stack()</code> can be used to create a set of <code>rect</code> as for a normal barplot.</li>
        </ul>
      </div>
    </div>
  </div>

<!-- ================================================================================= -->




<!-- ==================== CODE SECTION = WHERE THE CODE APPEARS ==================== -->
<div class="col-lg-7 text-center .align-middle">

<!-- ========= show html code ============== -->
<aside style="position: -webkit-sticky; position: sticky; top: 120px">&larr; Edit me! </aside>
<pre class="language-html"><code id="code" contenteditable="true"><xmp><!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

</xmp></code></pre>
<!-- ==================================== -->






<!-- ========= show JS code ==============  -->
<pre class="language-js"><code id="codejs" contenteditable="true"><xmp><script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function(data) {

  // List of groups = what we want on the X axis
  var keys = d3.map(data, function(d){return(d.group)}).keys()
  var subgroups = d3.map(data, function(d){return(d.subgroup)}).keys()

  // Add X axis
  var x = d3.scaleBand()
      .domain(keys)       // This is what is written on the Axis: from 0 to 100
      .range([0, width])                       // This is where the axis is placed: from 100 px to 800px
      .padding([0.2])
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 200])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette
  var color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

  // Need to nest = group the data first.
  var nestedData = d3.nest()
    .key(function(d) { return d.group; })
    .rollup(function(d) { console.log(d) ; return d.subgroup; })
    .entries(data)
  console.log(nestedData)

  // And then to stack the data by subgroups
  var stackedData = d3.stack()
    .keys(subgroups)
    .value(function(d, key){
      console.log(d.values.values)
      return(1)
    })(nestedData)
  console.log(stackedData)
})

</script></xmp></code></pre>
<!-- ==================================== -->







<!-- ==================== JAVASCRIPT SECTION : EXECUTE THIS CODE AND MAKE IT INTERACTIVE ==================== -->
<script>
// At the beginning, I read the html and JS fragments
myHtmlParser('code', 'result')
myJSParser('codejs', 'result')

// If the user change the JS fragment, I run it again:
document.getElementById('codejs').addEventListener("input", function() {
d3.select('#result').html("");
myHtmlParser('code', 'result');
myJSParser('codejs', 'result');
})

// If the user change the HTML fragment, I run it again:
document.getElementById('code').addEventListener("input", function() {
d3.select('#result').html("");
myHtmlParser('code', 'result');
myJSParser('codejs', 'result');
})
</script>

</div>


  </div>
</div>
</section>
<br>


<!-- ============================ -->








<!-- ============================ RELATED BLOCKS ============================ -->

<section class="bg-light" style="padding-top: 70px; padding-bottom: 70px">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 text-center align-self-center">
        <h3 class="text-uppercase">Related blocks  &rarr;</h3>
      </div>
      <div class="col-lg-5">
        <ul>
          <li><i>Simple Box Plot Example in d3.js v4.0 - </i><a href="https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74">link</a></li>
          <br>
          <li><i>D3.js Boxplot with Axes and Labels - </i><a href="http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306">link</a></li>
        </ul>
      </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>

<!-- 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>


<!-- Function to download the content of the div -->
<script>
function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    var command = document.getElementById('code').innerHTML;
    command = command.replace(/<\/?span[^>]*>/g,"");
    a.href = "data:html" + command
    a.click(); // Trigger a click on the element
}
</script>







</body>

</html>