D3js Bar Charts

Browse more D3js Examples
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
        //  var width = 300 
        //     scaleFactor = 20, 
        //     barHeight = 30;
         
        //  var graph = d3.select("body")
        //     .append("svg")
        //     .attr("width", width)
        //     .attr("height", barHeight * data.length);
         
        //  var bar = graph.selectAll("g")
        //     .data(data)
        //     .enter()
        //     .append("g")
        //     .attr("transform", function(d, i) {
        //       return "translate(0," + i * barHeight + ")";
        //     });
        //  bar.append("rect").attr("width", function(d) {
        //     return d * scaleFactor;
        //  })
         
        //  .attr("height", barHeight - 1);
         
        //  bar.append("text")
        //     .attr("x", function(d) { return (d*scaleFactor); })
        //     .attr("y", barHeight / 2)
        //     .attr("dy", ".35em")
        //     .text(function(d) { return d; });
            
        
        
        d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 60 * data.length)
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", (d, i) => `translate(0,${i * 60})`)
  .append("rect")
  .attr("height", 60 - 2)
  .attr("width", d => 40 * d)
  .append("text")
  .attr("x", d => 43 * d)
  .attr("y", 30)
  .attr("dy", ".35em")
  .text(d => d);

      </script>
   </body>
</html>
D3js Bar Charts

Follow

Newsletter
