D3 Examples - Module 3: Obesity in the United States

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 rect{
        fill: #9e2f50;
        transition: fill 0.2s;
      }
​
      .hover text {
        fill: #000000;
      }
​
      .footnote {
        position: relative;
​
      }
      
    </style>
  </head>
  <body>
  
    <script type="text/javascript">   
      var  margin = {top: 10, right: 10, bottom: 0, left: 5};
​
      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', 900)
          .attr('height', 760)
      
     
      //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)
        });
​
        svg.selectAll('g')
        .data(data)
        .enter()
        .append('g')
​
        var barGroup = d3.selectAll('g');
​
        barGroup.append('rect')
          .attr({
            'width': function(d) { return  d.obesity2013 * 20; },
            'height': barHeight,
            'x': 150,
            'y': function(d, i) { return margin.top + (barHeight + barSpace) * i; }
          })
​
        barGroup.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)
​
        barGroup.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 + '%'; })
​
        barGroup.style('cursor', 'pointer')
        
        barGroup.on('mouseover', function() { 
          d3.select(this)
            .classed('hover', true)
         })
​
        barGroup.on('mouseout', function() { 
          d3.select(this)
            .classed('hover', false)
         })
​
        body.append('p')
          .text('Hover over the bars!!!')
          .attr('class', 'footnote')
​
​
      });
    </script>
​
  </body>
</html>
    