All examples By author By category About

sdbernard

Full window Github gist

Module 6 obesity line chart and small multiples

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Obesity/poverty scatterp</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;
      }

h1, p {
        position: relative;
        left: 10px;
        color: #333333;
        font-weight: normal;
      }

.hover path{
        stroke: #9e2f50;
        stroke-width: 4px;
        transition: stroke 0.2s;
      }

.footnote {
        position: relative;

}

.source{
        font-size: 11px;
      }
      
      .line {
        stroke: #cec6b9;
        stroke-width: 2px;
        fill: none;
        stroke-linejoin:round;
        stroke-linecap:round;
      }

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

.x.axis line, .x.axisSM line {
        fill: none;
        stroke: #a7a59b;
        shape-rendering: crispEdges;
      }
      
      .axis text, .axisSM text {
        font-family: Arial,sans-serif;
        font-size: 11px;
        fill: #74736c;
      }
      
      .y.axisSM text{
        display: none;
      }
      .y.axisSM.labelOn text{
        display: block;
      }
      
      .y.axis path,
      .y.axisSM path{
        opacity: 0;
      }

path.domain{
        /*opacity: 0*/
        /*height: 1px;*/
        fill:none;
        stroke-width:1px;
        stroke: #a7a59b;
        shape-rendering: crispEdges;
      }

.smallSM{
        margin: 0 0 10px 0;
      }
      .smallMulitples{
        margin-left: 16px;
        width: 700px;
      }

.lineSM{
        stroke-width:2px;
        stroke: #9e2f50;
        fill:none;
      }
      .toolTip{
        padding: 6px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        font-size: 12px;
        line-height: 18px;
        visibility: hidden;
      }
      .stateName{
        font-weight: bold;
        font-size: 14px;
        /*margin-bottom: -8px;
        display: block;*/
      }

.stateNameSM{
        text-transform: uppercase;
        font-size: 10px;
        fill: #74736c;
        text-anchor:middle;
      }
      .dataNum{
        font-weight: bold;
      }
      .subhead{
        fill: #74736c;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div class="toolTip"></div>
    <script type="text/javascript">   
      var  margin = {top: 10, right: 10, bottom: 35, left: 30};
      var w = 720,
          h = 500,
          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')

var dateFormat = d3.time.format("%Y");

var svg = d3.select('body').append('svg')
      
      svg.attr('width', w)
          .attr('height', h)

d3.select('body').append('div')
          .attr('class', 'smallMulitples')

var divSM = d3.select('.smallMulitples')

var xScale = d3.time.scale()
              .range([ margin.left*2, w - margin.left*2 - margin.right ]);
    
      var yScale = d3.scale.linear()
                .range([0, h - margin.bottom ]);

var xAxis = d3.svg.axis()
              .scale(xScale)
              .ticks(12)
              .tickFormat(function(d) {
                return dateFormat(d); 
              })
      var yAxis = d3.svg.axis()
              .scale(yScale)
              .tickSize(-w + (margin.left*2) + margin.right)
              .ticks(15)
              .orient('left');

var line = d3.svg.line()
          .x(function(d) {
            return xScale(dateFormat.parse(d.year));
          })
          .y(function(d) {
            return yScale(+d.value);
          });

var lineSM = d3.svg.line()
          .x(function(d) {
            return xScaleSM(dateFormat.parse(d.year));
          })
          .y(function(d) {
            return yScaleSM(+d.value);
          });

var xScaleSM = d3.time.scale()
              .range([ 20, 150 ]);
    
      var yScaleSM = d3.scale.linear()
                .range([20, 180 ]);

var xAxisSM = d3.svg.axis()
              .scale(xScaleSM)
              .ticks(2)
              .tickFormat(function(d) {
                return dateFormat(d); 
              })

var yAxisSM = d3.svg.axis()
              .scale(yScaleSM)
              .tickSize(-130)
              .ticks(4)
              .orient('left');

var lineSM = d3.svg.line()
          .x(function(d) {
            return xScaleSM(dateFormat.parse(d.year));
          })
          .y(function(d) {
            return yScaleSM(+d.value);
          });
     
      //Load in contents of CSV file
      d3.csv('obesity.csv', function(data) {
        console.log(data);

var years = ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'];

var dataset = [];

for (var i = 0; i < data.length; i++) {
          dataset[i] = {
            state: data[i].state,
            obesity: []
          }; 
          for (var j = 0; j < years.length; j++) {
            if(data[i][years[j]]) {
              dataset[i].obesity.push({
                year: years[j],
                value: data[i][years[j]]
              });
            }
          }
        };
        console.log(dataset);

xScale.domain([
          d3.min(years, function(d) {
          return dateFormat.parse(d);
        }), d3.max(years, function(d) {
          return dateFormat.parse(d);
        }) ]);

yScale.domain([
          d3.max(dataset, function(d) {
            return d3.max(d.obesity, function(d) { 
              return +d.value;
            });
          }),
          d3.min(dataset, function(d) {
            return d3.min(d.obesity, function(d) { 
              return +d.value -1;
            });
          })
        ]);

xScaleSM.domain([
          d3.min(years, function(d) {
          return dateFormat.parse(d);
        }), d3.max(years, function(d) {
          return dateFormat.parse(d);
        }) ]);

yScaleSM.domain([
          d3.max(dataset, function(d) {
            return d3.max(d.obesity, function(d) { 
              return +d.value;
            });
          }),
          d3.min(dataset, function(d) {
            return d3.min(d.obesity, function(d) { 
              return +d.value -5;
            });
          })
        ]);

for (n=0; n < dataset.length; n++) {
          var svgSM = divSM.append('svg');

svgSM.attr('width', 160)
                  .attr('height', 200)
                  .attr('class', 'smallSM')
            
            svgSM.append('text')
                  .text(function(d) { return dataset[n].state; })
                  .attr('class', 'stateNameSM')
                  .attr('transform', 'translate(75,12)')
          
            svgSM.append('g')
                  .attr('class', 'y axisSM')
                  .classed('labelOn', function() {  if(n%4 ==0) { return true }})
                  .attr('transform', 'translate(15,0)')
                  .call(yAxisSM);
           
            svgSM.append('g')
                  .attr('class', 'x axisSM')
                  .attr('transform', 'translate(0,164)')
                  .call(xAxisSM);
            // if(n%4 ==0) {
            //   console.log(dataset[n].state);
            //   // d3.select('.y.axis')
            //   //   .classed('labelOn', true);
            // }
            var lineGroupsSM = svgSM.append('g')
                  .attr('class', 'lineGroupsSM');

var pathSM = lineGroupsSM.selectAll('path')
                  .data(function(d) { 
                    return [dataset[n].obesity];
                  })
                  .enter()
                  .append('path')
                  .attr('class', 'lineSM')
                  .attr('d', lineSM)

}

svg.append('g')
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + margin.left + ',' + -w +')')
          .call(yAxis);

svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(' + -w + ',' +  (h - margin.bottom - 5) + ')')
          .call(xAxis);

d3.select('.y.axis')
          .transition()
          .delay(1000)
          .duration(800)
          .ease('quad')
          .attr('transform', 'translate(' + margin.left + ',0)')

d3.select('.x.axis')
          .transition()
          .duration(800)
          .ease('quad')
          .attr('transform', 'translate(0,' +  (h - margin.bottom - 5) + ')')

var lineGroups = svg.selectAll('.lineGroups')
            .data(dataset)
            .enter()
            .append('g')
            .attr('class', 'lineGroups');

var path = lineGroups.selectAll('path')
            .data(function(d) { 
              return [d.obesity];
            })
            .enter()
            .append('path')
            .attr('class', 'line')
            .attr('d', line)
            .attr("stroke-dasharray", 1200, 1200)
            .attr("stroke-dashoffset", 1200)
            .attr('opacity', 0)

path.transition()
            .delay(2000)
            .duration(1000)
            .ease('quad')
            .attr('stroke-dashoffset', 0)
            .attr('opacity', 1);

// d3.selectAll('.line')

// lineGroups.transition().delay(function (d,i){ return 2000 + (i * 30);})
        //   .duration(800)
        //   .ease('quad')
        //   .attr('opacity', 1)

lineGroups.style('cursor', 'pointer')

d3.selection.prototype.moveToFront = function() {
          return this.each(function(){
            this.parentNode.appendChild(this);
          });
        };
        
        lineGroups.on('mouseover', function(d, i) { 
          d3.select(this)
            .classed('hover', true)
            .moveToFront();
          
          tt = d3.select('.toolTip');
          tt.html('<span class="stateName">' + d.state + '</span>')
            .style('top', d3.event.pageY - 12 + 'px')
            .style('visibility', 'visible')
         })

lineGroups.on('mouseout', function() { 
          d3.select(this)
            .classed('hover', false)
            .transition()
          tt.style('visibility', 'hidden')
         })

lineGroups.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 lineGroups!!!')
          .attr('class', 'footnote')

});
    </script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js