d3 module2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Living with HIV</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="colorbrewer.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway:100normal,200normal,300normal,400normal,500normal,600normal,700normal,800normal,900normal|Open+Sans:400normal|Lato:400normal|Roboto:400normal|Oswald:400normal|Droid+Sans:400normal|Droid+Serif:400normal|Lobster:400normal|PT+Sans:400normal|Ubuntu:400normal|Playfair+Display:400normal&amp;subset=all" rel="stylesheet" type="text/css">
    <style type="text/css">
        
      body {
        background-color: #fff1e0;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        margin-top: 3em;
      }

.content-holder {
        background: #fff9f1;
        padding: 20px 20px 14px;
        width: 760px;
        box-sizing: border-box;
        margin: 0 auto;
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      }

h1 {
        font-weight: 300;
        font-size: 36px;
        color: #333333;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: -2px;
      }
      h6 {
        font-size: 12px;
        margin-bottom: 0.2em;
        margin-top: 6px;
        font-weight: 800;
        text-transform: uppercase;
        color: #af516c;
      }

form {
        margin-left: 40px;
        font-weight: 400;
        font-size: 12px;
        color: #74736c;
        position: relative;
        float: right;
        top: 16px;
      }
      p {
        margin-bottom: 4px;
        line-height: 1.5em;
      }
      .chart-holder {
        margin-top: 8px;
      }
      
      .y.axis path,
      .x.axis path {
        fill: none;

}

.axis line {
        fill: none;
        stroke: #e9decf;
        stroke-dasharray:2,1;
        shape-rendering: crispEdges;
      }

.axis text {
        font-size: 12px;
        fill: #74736c;
      }

.axislabel {
        font-size: 13px;
        fill: #74736c;
      }

.subtitle {
        font-size: 15px;
        color: #74736c;
        display: inline-block;
      }

.source,
      .note {
        font-size: 12px;
      }
      a {
          text-decoration: none;
          color: #9e2f50;
          transition: color 0.3s;
        }
      a:hover {
        color: #000;
        transition: color 0s;
      }
      .tooltip{
        padding: 6px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        font-size: 13px;
        line-height: 18px;
        visibility: hidden;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
        font-weight: 300;
      }
      .country{
        font-weight: 600;
        font-size: 14px;
        /*margin-bottom: -8px;
        display: block;*/
      }
      .dataNum{
        font-weight: 600;
        /*font-family: arial;*/
      }
      .labelsOn {
        opacity: 1;
        transition: opacity 0.3s;
      }
      .labelsOff {
        opacity: 0;
        transition: opacity 0.3s;
      }
      .cLabel {
        text-anchor: end;
        fill: white;
        font-size: 12px;
      }
      .cLabelBld {
        font-weight: 700;
      }
      .globalPath {
        fill: none;
        stroke: #9e2f50;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
      <div class="tooltip"></div>
      <div class="content-holder">
        <h6>Living with HIV</h6>
        <h1>How many people are infected with HIV?</h1>
        <p>Since HIV became part our consciousness in the 1980s, this graph shows the frightening rate of growth of infections around the globe, most notably in <span class="cLabelBld">South Africa</span>. Another chilling statistic is that in <span class="cLabelBld">Nigeria</span> children under the age of 15 account for over <span class="cLabelBld">11%</span> of the HIV population.</p>
        <p class="subtitle">Population infected with HIV (m)</p>
        <div class="chart-holder"></div>
        <p class="source">Source: <a href="https://aidsinfo.unaids.org/">aidsinfo.unaids.org</a></p>
      </div>
      <script type="text/javascript">     
        var margin = { top: 18, right: 15, bottom: 20, left: 50 },
            width = 720 - margin.left - margin.right,
            height = 640 - margin.top - margin.bottom;

var divisor = 1000000;

var dataset = [];
        
        var years = [];

var numFormat = d3.format(',');

var areaColor;

var color = d3.scale.ordinal()
                      .range(colorbrewer.RdYlBu[11])
                      // .range(["#D7706C", "#91A1C7", "#ECAFAF", "#B07979", "#5A9992", "#dc143c", "#E8AA7D", "#AF516C", "#7FD8F5", "#3D7AB3", "#B8B1A9"]);

var stack = d3.layout.stack()
            .values(function(d) {
              return d.hiv;
            })
            .order("reverse");

var dateFormat = d3.time.format("%Y");
        
        var svg = d3.select('.chart-holder').append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)

var xScale = d3.time.scale()
                       .range([0, width]);

var yScale = d3.scale.linear()
                       .range([0, height - margin.top - margin.bottom]);

var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .tickSize(-height + margin.bottom)
                      .ticks(5)
                      .orient('bottom')
                      .tickFormat(function(d) {
                        return dateFormat(d);
                      });

var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .tickSize(-width)
                      .ticks(10)
                      .orient('left');

var line = d3.svg.line()
        .defined(function(d) { return d.y != null; })
        .x(function(d) { return xScale(dateFormat.parse(d.x)); })
        .y(function(d) { return yScale(d.y); });

var area = d3.svg.area()
            .defined(line.defined())
            .x(line.x())
            .y1(function(d) {
              return yScale(d.y0 + d.y);  //Updated
            })
            .y0(function(d) {
              return yScale(d.y0);  //Updated
            });

d3.csv('hiv.csv', function(data) {
          years = Object.keys( data[0] ).filter(function(d){ return d != 'Country'; }); 
          
          data.forEach(function(d, i) {
              dataset[i] = {
                country: d.Country,
                hiv: []
              }
              years.forEach(function(d, j) {
                var value = null;
                if(data[i][years[j]]) {
                  value = +data[i][years[j]] / divisor;
                }
                dataset[i].hiv.push({
                  x: years[j],
                  y: value
                })
              });
          })
          
          stack(dataset);

var maxX = d3.max(years, function(d) { return dateFormat.parse(d); })
          var minX = d3.min(years, function(d) { return dateFormat.parse(d); })

var yearTotals = [];

var global = [];

years.forEach(function(d, i) {
            yearTotals[i] = 0;
            dataset.forEach(function(d, j) {
              yearTotals[i] += dataset[j].hiv[i].y;

})
            // create global data array
            global[i] = {
              date: years[i],
              value: yearTotals[i]
            }

})

var maxY = d3.max(yearTotals)

xScale.domain([minX, maxX]);
          yScale.domain([maxY, 0]);

svg.append('g')
               .attr('transform', 'translate(' + margin.left + ',' + (height - margin.top ) + ')')
               .attr('class', 'x axis')
               .call(xAxis)
               .attr('opacity', 0)
               .transition().attr('opacity', 1).ease('quad').duration(500);

svg.append('g')
               .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
               .attr('class', 'y axis')
               .call(yAxis)
               .attr('opacity', 0)
               .transition().attr('opacity', 1).ease('quad').duration(500);
          
          var chart = svg.append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

//create path for global total
          var linePath = chart.append('path')
              .attr("d", lineGlobal(global))
              .attr('class', 'globalPath');

//animate path
          var totalLength = linePath.node().getTotalLength();
          
              linePath.attr("stroke-dasharray", totalLength + " " + totalLength)
                  .attr("stroke-dashoffset", totalLength)
                  .transition()
                    .delay(500)
                    .duration(1500)
                    .ease("quad")
                    .attr("stroke-dashoffset", 0);

chart.append('text')
                .attr('transform', 'translate(' + (width - margin.right - 20) + ',' + 202 + ')')
                .attr('class', 'cLabel')
                .text('Nigeria');

chart.append('text')
                .attr('transform', 'translate(' + (width - margin.right - 20) + ',' + 392 + ')')
                .attr('class', 'cLabel')
                .text('South Africa');

var tt = d3.select('.tooltip');
          var overFlag = false;
          setTimeout(function() {  
            d3.select('.globalPath').style('visibility', 'hidden');
            paths.style('cursor', 'pointer');
            paths.on('mouseover', function(d) { 
              areaColor = d3.select(this).attr('fill');
              console.log(d3.select(this));
              paths
              .attr('opacity', 0.2)
              d3.select(this)
                .classed('hover', true)
                .attr('opacity', 0.8)
                .attr('fill', '#9e2f50')
            });

paths.on('mousemove', function (d) {
              if (overFlag === false) {
                areaColor = d3.select(this).attr('fill');
              }
              overFlag = true;
              var mousex = d3.mouse(this);
              mousex = mousex[0] + 10;
              
              var invertedx = xScale.invert(mousex);
              invertedx = invertedx.getFullYear();
              
              var selected = (d.hiv);
              mousedate = years.indexOf(String(invertedx));
              pro = d.hiv[mousedate].y;

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js