D3 Examples - d3 module2

xxxxxxxxxx
 
<!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 lineGlobal = d3.svg.line()
        .defined(function(d) { return d.value != 0; })
        .x(function(d) { return xScale(dateFormat.parse(d.date)); })
        .y(function(d) { return yScale(d.value); });
​
        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);
​
          var paths = chart.selectAll('path')
              .data(dataset)
              .enter()
              .append('path')
              .attr('class', 'area')
              .attr('opacity', 0)
              .attr('fill', function(d) { if(d.country === 'Nigeria' || d.country === 'South Africa') {return '#9e2f50';}else {return color(d.country); }} )
              .attr('d', function(d) {
                return area(d.hiv);
              });
              
              paths.transition()
                .duration(300)
                .delay(function(d, i) { return (i * 20) + 2000; })
                .attr('opacity', function(d) { if(d.country === 'Nigeria' || d.country === 'South Africa') {return 0.8;}else {return 0.4; }});
​
          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;
​
              function checkValue(pro) { 
                if (pro < 1) {
                  var proThousands = pro * 1000000
                  return numFormat(proThousands);
                } else {
                  return pro.toFixed(1) + 'm'
                }
              }
                tt.html('<span class="country">' + d.country + '</span><br/>' + 'HIV population, ' + invertedx + ': <span class="dataNum">' + checkValue(pro) + '</span>')
                  .style('top', d3.event.pageY - 12 + 'px')
                  .style('visibility', 'visible')
            
              var toolW = d3.select('.tooltip').node().getBoundingClientRect().width;
              
              if(d3.event.pageX > (width - toolW)) {
                tt.style('left', d3.event.pageX - toolW - 30 + 'px')
              } else {
                tt.style('left', d3.event.pageX + 30 + 'px')
              }
            });
            
            paths.on('mouseout', function(d) { 
              d3.select(this)
                .classed('hover', false)
                .attr('fill', areaColor);
              paths
              .attr('opacity', function(d) { if(d.country === 'Nigeria' || d.country === 'South Africa') {return 0.8;} else {return 0.4; }});
              tt.style('visibility', 'hidden');
            });
          }, 5240)
          });
​
      </script>
​
  </body>
</html>
    