D3 Examples - Area Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title> D3 Test </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        font-family: 'Open sans',verdana,arial,sans-serif;
        font-size: 10pt
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <script>
      var width = 834;
      var height = 370;
      var margin = 70;
      
      var labelX = 'Year';
      var labelY = 'Disease';
      
      var parseDate = d3.time.format("%y-%b-%d").parse;
      var formatPercent = d3.format(".0%");
            
      d3.csv("data.csv", 
        function(d) {
            row = {
            x : d3.time.format("%Y").parse(d.year), 
            y : {
              malaria : +d.malaria, 
              tuberculosis : +d.tuberculosis, 
              pneumonia : +d.pneumonia, 
              custa : +d.custa, 
              catanus : +d.catanus, 
              campak : +d.campak, 
              diare : +d.diare, 
              dengue : +d.dengue
            }
          }
          
          var total = 0
          d3.keys(row.y).forEach(function(key) {
            total += row.y[key]
          })
          
          d3.keys(row.y).forEach(function(key) {
            row.y[key] = row.y[key]/total
          })
            
          return row
        }, 
        function(error, data) {
            var svg = d3.select('body')
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");
            
            // X Axis
            var x = d3.time.scale()
                        .domain(d3.extent(data, function(d) { return d.x; }))
                        .range([0, width]);
            var xAxis = d3.svg.axis().scale(x);
            
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width + 20)
              .attr("y", margin - 40)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
            
            // Y Axis
            var y = d3.scale.linear().range([height, 0]);
            var yAxis = d3.svg.axis().scale(y)
                                .orient("left")
                                .tickFormat(formatPercent);
            
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x", 20)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
            
            // Stack area
            var color = d3.scale.category20()
                      .domain(d3.keys(data[0].y))
          
          var area = d3.svg.area()
                                .x(function(d) { return x(d.date); })
                                .y0(function(d) { return y(d.y0); })
                                .y1(function(d) { return y(d.y0 + d.y); });
          
          var pathData = color.domain().map(function(name) {
                        return {
                          name : name,
                          values: data.map(function(d) {
                            return {
                              date: d.x, y: d.y[name]
                            }
                          })
                        }
                      })
          
          var stackData = d3.layout.stack()
                                .values(function(d) { 
                                    return d.values 
                                })(pathData)
          
          var container = svg.selectAll(".data")
            .data(stackData).enter()
            .append("g")
            .attr("class", "data");
            
            container.append("path")
            .attr("class", "area")
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d) { return color(d.name); });
        
            container.append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
            .attr("x", -6)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; })
            .style("text-anchor", "end");
        }
      );
    </script>
  </body>
</html>
    