D3 Examples - Obesity data with scales

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      body {
        background-color: #fff1e0;
        margin: 0;
        font-family: Arial, sans-serif;
      }
​
      rect {
        fill: #bb6d82;
      }
​
      .barLabel {
        font-size: 12px;
        fill: #74736c;
        text-anchor: end;
      }
​
      .barValue {
        font-size: 12px;
        fill: #74736c;
      }
​
      h1, p {
        position: relative;
        left: 10px;
        color: #333333;
      }
​
      .hover{
        fill: #9e2f50;
        transition: fill 0.2s;
      }
​
      .footnote {
        position: relative;
​
      }
​
      .source{
        font-size: 11px;
      }
      
      .axis line {
        fill: none;
        stroke: #cec6b9;
        stroke-dasharray:2,1;
        shape-rendering: crispEdges;
      }
      
      .axis text {
        font-family: Arial,sans-serif;
        font-size: 11px;
        fill: #333333;
      }
      
      .x.axis path,
      .y.axis line {
        opacity: 0;
      }
      .y.axis path{
        stroke-width:1px;
        stroke: #000;
        fill: none;
      }
​
      .toolTip{
        padding: 6px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="toolTip"></div>
    <script type="text/javascript">   
      var  margin = {top: 25, right: 10, bottom: 15, left: 150};
      var w = 900,
          h = 760,
          tt;
​
      var body = d3.select('body');
​
      body.append('h1')
        .text('Obesity in the United States')
​
      body.append('p')
        .text('% of Americans classified as obese, by state (2013)')
​
      var svg = d3.select('body').append('svg'),
          barHeight = 10,
          barSpace = 5
         
      
      svg.attr('width', w)
          .attr('height', h)
      
      var xScale = d3.scale.linear()
              .range([ 0, w - margin.left - margin.right ]);
    
      var yScale = d3.scale.ordinal()
                .rangeRoundBands([ margin.top, h - margin.bottom ], 0.1);
​
      var xAxis = d3.svg.axis()
              .scale(xScale)
              .tickSize(-(h-margin.top - margin.bottom))
              .orient('top');
      var yAxis = d3.svg.axis()
              .scale(yScale)
              .tickSize(0)
              .orient('left');
     
      //Load in contents of CSV file
      d3.csv('obesityPoverty.csv', function(data) {
        console.log(data);
​
        data.sort(function(a,b) {
          return d3.descending(a.obesity2013, b.obesity2013)
        });
​
        xScale.domain([ 0, d3.max(data, function(d) {
          return +d.obesity2013;
        }) ]);
​
        yScale.domain(data.map(function(d) { return d.state; } ));
​
​
​
        svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(' + margin.left + ',' +  margin.top + ')')
          .call(xAxis);
        
​
        var bars = svg.selectAll('rect')
                    .data(data)
                    .enter()
                    .append('rect');
​
        bars.attr({
            'width': 0,
            'height': yScale.rangeBand(),
            'x': margin.left,
            'y': function(d) { return yScale(d.state); }
          })
        bars.transition().delay(function (d,i){ return i * 20;}).ease('quad').duration(500)
            .attr({'width': function(d) { return  xScale(d.obesity2013); }})
​
        svg.append('g')
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + margin.left + ',0)')
          .call(yAxis);
​
        // bars.append('text')
        //   .text(function(d) { return d.state; })
        //   .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
        //   .attr('class', 'barLabel')
        //   .attr('x', 140)
​
        // bars.append('text')
        //   .attr('class', 'barValue')
        //   .attr('x', function(d) { return (d.obesity2013 * 20) + 155; } )
        //   .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; })
        //   .text(function(d) { return d.obesity2013 + '%'; })
​
        bars.style('cursor', 'pointer')
        
        bars.on('mouseover', function(d) { 
          d3.select(this)
            .classed('hover', true)
          
        tt = d3.select('.toolTip');
          tt.html('<b>' + d.state + '</b>' + ': ' + d.obesity2013 + '%')
            .style('top', d3.event.pageY - 12 + 'px')
            .style('opacity', 1)
         })
​
        bars.on('mouseout', function() { 
          d3.select(this)
            .classed('hover', false)
          tt.style('opacity', 0)
         })
​
        bars.on('mousemove', function (d) {
​
​
          var toolW = d3.select('.toolTip').node().getBoundingClientRect().width;
​
          if(d3.event.pageX > (w - toolW)) {
            tt.style('left', d3.event.pageX - toolW - 12 + 'px')
          } else {
            tt.style('left', d3.event.pageX + 12 + 'px')
          }
        })
​
​
        body.append('p')
          .text('Source: Centers for Disease Control and Prevention')
          .attr('class', 'source')
​
        body.append('p')
          .text('Hover over the bars!!!')
          .attr('class', 'footnote')
​
​
​
      });
    </script>
​
  </body>
</html>
    