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 yLabel1 = "Number";
    var yLabel2 = "of Cases";
​
        
        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 yScale = d3.scaleLinear()
                                 .domain([min, max])
                                 .range([padding, 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", "50px")
                                    .attr("y", 5)
                                 /*.attr("x", function(d) { 
                       if(d.disease == "measles" ||
                         d.disease == "smallpox" ||
                         d.disease == "polio") {
                            return xScale(d.disease);}
                     })
                                 .attr("y", function(d) { 
                         if(d.disease == "measles" ||
                                d.disease == "smallpox" ||
                                d.disease == "polio") {
                           return yScale(d.population);}})*/;
      
      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>
​
    