D3 Examples - d3 intermediate module 1

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Does money buy happiness?</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></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: #2bbbbf;
      }
​
      form {
        margin-left: 40px;
        font-weight: 400;
        font-size: 12px;
        color: #74736c;
        position: relative;
        float: right;
        top: 16px;
      }
      p {
        margin-bottom: 4px;
      }
      .chart-holder {
        margin-top: 8px;
      }
      circle {
        fill: #2bbbbf;
        cursor: pointer;
        transition: fill 0.3s;
      }
​
      circle:hover {
        fill: #ff7f8a;
        transition: fill 0s;
      }
​
      .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: #27757b;
          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;*/
      }
      .cLabel{
        font-size: 11px;
        font-weight: 500;
        pointer-events: none;
        opacity: 0;
      }
      .labelsOn {
        opacity: 1;
        transition: opacity 0.3s;
      }
      .labelsOff {
        opacity: 0;
        transition: opacity 0.3s;
      }
​
    </style>
  </head>
  <body>
      <div class="tooltip"></div>
      <div class="content-holder">
        <h6>Wealth & wellbeing</h6>
        <h1>Does money buy happiness?</h1>
        <p>The question itself is a cliché, but is there any truth in the old saying? Let’s find out by comparing household wealth with life satisfaction</p>
        <p class="subtitle">Better Life Index &ldquo;Life Satisfaction&rdquo; vs Household Financial Wealth</p>
        <form>
          <input id="cb_0" type="checkbox" class="myCB" name="vehicle" value="states"/>
          <label id="cbLabel" for="cb_0">Show country labels</label>
        </form>
        <div class="chart-holder"></div>
        <p class="note">* Average total value of a household’s financial assets (savings, stocks) minus their liabilities (loans)</p>
        <p class="source">Source: <a href="https://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p>
      </div>
      <script type="text/javascript">     
        var margin = { top: 10, right: 10, bottom: 14, left: 45 },
            width = 720 - margin.left - margin.right,
            height = 640 - margin.top - margin.bottom;
​
        var divisor = 1000;
​
        var numFormat = d3.format(',')
        
        var svg = d3.select('.chart-holder').append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
​
        svg.append('text')
          .text('Life satisfaction index')
          .attr('transform', function(d) {
            return 'rotate(-90,0,293)'
          })
          .attr('x', 0)
          .attr('y', height/2)
          .attr('text-anchor', 'middle')
          .attr('class', 'y axislabel')
          .attr('opacity', 0)
          .transition().attr('opacity', 1).ease('quad').duration(500);
​
        svg.append('text')
          .text('Household net financial wealth ($’000)*')
          .attr('x', (width + margin.left + margin.right)/2)
          .attr('y', height + 18 )
          .attr('text-anchor', 'middle')
          .attr('class', 'x axislabel')
          .attr('opacity', 0)
          .transition().attr('opacity', 1).ease('quad').duration(500);  
​
        var xScale = d3.scale.linear()
                       .range([0, width]);
​
        var yScale = d3.scale.linear()
                       .range([height-margin.top - margin.bottom, 0]);
​
        var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .tickSize(-height)
                      .ticks(5)
                      .orient('bottom');
​
        var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .tickSize(-width)
                      .ticks(10)
                      .orient('left');
​
        d3.csv('betterlifeindex.csv', function(data) {
          data.sort(function (a,b) {return d3.descending(+a.householdNetFinancialWealth, +b.householdNetFinancialWealth); });
          var maxX = d3.max(data, function(d) { return +d.householdNetFinancialWealth +10000; })
          var minX = 0
​
          var maxY = d3.max(data, function(d) { return +d.lifeSatisfaction +1; })
          var minY = d3.min(data, function(d) { return +d.lifeSatisfaction -1; })
          console.log(minY);
          
          xScale.domain([minX / divisor, maxX / divisor]);
          yScale.domain([minY, maxY]);
​
​
          svg.append('g')
               .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom ) + ')')
               .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 + ')');
​
          var circlegroups = chart.selectAll('g')
               .data(data)
               .enter()
               .append('g')
​
            
          var circles = circlegroups.append('circle')
                        .attr({
                          'r': 8,
                          'cx': 0,
                          'cy': height-margin.bottom-margin.top,
                          'opacity': 0
                         });
                         
          circles.transition().delay(function(d, i) { return (i * 30) + 300; }).attr({
            'cx': function(d) { return xScale(d.householdNetFinancialWealth / divisor); },
            'cy': function(d) { return yScale(d.lifeSatisfaction); },
            'opacity': 1
          }).ease('quad').duration(500);
​
          circlegroups.append('text')
            .attr({
              'class': 'cLabel',
              'x': function(d) { return xScale(d.householdNetFinancialWealth / divisor); },
              'y': function(d) { return yScale(d.lifeSatisfaction); },
              'dx': 8,
              'dy': -8
            })
            .text(function(d) { return d.country; });
​
          circles.style('cursor', 'pointer')
        
          circles.on('mouseover', function(d) { 
            d3.select(this)
              .classed('hover', true)
              .transition()
              .duration(50)
              .attr('r', 10)
            
          tt = d3.select('.tooltip');
            tt.html('<span class="country">' + d.country + '</span><br/>' + 'Wealth: <span class="dataNum">$' + numFormat(d.householdNetFinancialWealth) + '</span><br/>Life satisfaction: <span class="dataNum">' + d.lifeSatisfaction + '</span>')
              .style('top', d3.event.pageY - 12 + 'px')
              .style('visibility', 'visible')
           })
​
          circles.on('mouseout', function() { 
            d3.select(this)
              .classed('hover', false)
              .transition()
              .duration(50)
              .attr('r', 8)
            tt.style('visibility', 'hidden')
           })
​
          circles.on('mousemove', function (d) {
​
            var toolW = d3.select('.tooltip').node().getBoundingClientRect().width;
​
            if(d3.event.pageX > (width - toolW)) {
              tt.style('left', d3.event.pageX - toolW - 12 + 'px')
            } else {
              tt.style('left', d3.event.pageX + 12 + 'px')
            }
          })
​
          d3.select('.myCB').on('click', function() {
            if (this.checked) {
              d3.selectAll('.cLabel')
                .classed('labelsOn', true)
                .classed('labelsOff', false)
            }
            else {
               d3.selectAll('.cLabel')
                .classed('labelsOff', true)
                .classed('labelsOn', false)
            }
          });
        });
​
          
​
      </script>
​
  </body>
</html>
    