D3 Examples - Horizontal Bars

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>  
  
  <h2>D3 Tutorial</h2>
  <div id="chart"></div>
  <p>Arturo</p>  
</head>
​
<body>
  <script>
    var myData = [50, 20,7,250, 90];
    var width = 800;
    var height = 800;
    var barWidth = 20;
    var widthScale = d3.scaleLinear().range([0, 400]);
    var colorScale = d3.scaleOrdinal().range(d3.schemeCategory20);
    var margin = {top: 20, left:20, right:20, bottom:20};
    
    var chart = d3.select("#chart")
                                .append("svg")
                                .attr("width",width)
                              .attr("height",height);
    
    widthScale.domain([0, d3.max(myData)]);
    var rects = chart.selectAll(".bar")
                                       .data(myData);
    
      //Create
        rects.enter()
            .append("rect")
            .attr("class", "bar") // enter
            .merge(rects) // enter + update
              .attr("x", 0)
              .attr("y", function (d, i) {  return i * (barWidth+1); })
                .attr("width", function (d) { return widthScale(d); })
                .attr("height", barWidth);
         
    
      //Remove
      rects.exit()
            .remove();    
            
    </script>  
</body>
    