Area Chart

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js