D3 Examples - Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    text { font-family: "sans serif"; font-size: 12;}
  </style>
</head>
​
<body>
  <script>
    
    var width = 500;
        var height = 300;
        var padding = 50;
    var xLabel = "Disease";
    var yLabel = "Population";
​
        
        var xScale, yScale, xAxis, yAxis;
​
    d3.csv("health.csv", function(data) {
      
      data.population = +data.population;
      
      var min = d3.min(data, function(d) { return d.population; });
      var max = d3.max(data, function(d) { return d.population; });
      
      /*var xScale = d3.scaleOrdinal()
                                 .domain(["Measles", "Polio", "Smallpox"])
                                 .range([padding, width/2, width - padding]);*/
      var xScale = d3.scaleBand().rangeRound([0, width]).padding(padding)
                                 .domain(data.map(function(d) { return d.disease; }));
      
      var yScale = d3.scaleLinear()
                               .rangeRound([0, height - padding])
                                 .domain([0, max])
                                 .range([0, height - padding]);
      
      var xAxis = d3.axisBottom()
                                .scale(xScale);
      
      var yAxis = d3.axisLeft()
                                .scale(yScale)
                                .ticks(5);
                            
      
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
      
      var rects = svg.selectAll("rect")
                                 .data(data)
                                 .enter()
                                 .append("rect")
                                 .attr("x", function(d) { 
                            return xScale(d.disease);})
                                 .attr("y", function(d) { 
                           return yScale(d.population);})
                                 //.attr("width", xScale.bandwidth())
      .attr("width", "20px")
                     /*.attr("height", function(d) { return height - yScale(d.population);})*/
      .attr("height", "20px");
      
      svg.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(0," + (height - padding) + ")")
         .call(xAxis);
      
      svg.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(" + padding + ", 0)")
         .call(yAxis);
​
      svg.append("text")
        .text(xLabel)
        .attr("y", height - 10)
        .attr("x", width/2 - padding/2)
​
    });
​
  </script>
</body>
​
    