Last active
August 29, 2015 14:19
-
-
Save sdbernard/7cb17857716e767f3bf8 to your computer and use it in GitHub Desktop.
Module 6 obesity line chart and small multiples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Obesity/poverty scatterp</title> | |
| <script type="text/javascript" src="http://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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| state | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Alabama | 28.9 | 30.5 | 30.9 | 32.2 | 31.6 | 33 | 32 | 33 | 32.4 | |
| Alaska | 27.4 | 26.2 | 28.2 | 27.1 | 25.4 | 25.2 | 27.4 | 25.7 | 28.4 | |
| Arizona | 21.1 | 22.9 | 25.8 | 25.6 | 25.9 | 25.2 | 25.1 | 26 | 26.8 | |
| Arkansas | 28 | 26.9 | 29.3 | 29.5 | 31.5 | 30.9 | 30.9 | 34.5 | 34.6 | |
| California | 22.7 | 23.3 | 23.3 | 24.3 | 25.5 | 24.7 | 23.8 | 25 | 24.1 | |
| Colorado | 17.8 | 18.2 | 19.3 | 19.1 | 19 | 21.4 | 20.7 | 20.5 | 21.3 | |
| Connecticut | 20.1 | 20.6 | 21.7 | 21.4 | 21 | 23 | 24.5 | 25.6 | 25 | |
| Delaware | 23.5 | 26 | 28.2 | 27.8 | 27.6 | 28.7 | 28.8 | 26.9 | 31.1 | |
| District of Columbia | 21.7 | 22.5 | 22.2 | 22.3 | 20.1 | 22.4 | 23.8 | 21.9 | 22.9 | |
| Florida | 22.8 | 23.1 | 24.1 | 25.2 | 26.5 | 27.2 | 26.6 | 25.2 | 26.4 | |
| Georgia | 26.5 | 27.1 | 28.7 | 27.8 | 27.7 | 30.4 | 28 | 29.1 | 30.3 | |
| Hawaii | 19.7 | 20.6 | 21.7 | 23.1 | 22.9 | 23.1 | 21.9 | 23.6 | 21.8 | |
| Idaho | 24.5 | 24.1 | 25.1 | 25.2 | 25.1 | 26.9 | 27.1 | 26.8 | 29.6 | |
| Illinois | 25.1 | 25.1 | 25.6 | 26.9 | 27.4 | 28.7 | 27.1 | 28.1 | 29.4 | |
| Indiana | 27.2 | 27.8 | 27.4 | 27 | 30 | 30.2 | 30.8 | 31.4 | 31.8 | |
| Iowa | 25.4 | 25.7 | 27.7 | 26.7 | 28.5 | 29.1 | 29 | 30.4 | 31.3 | |
| Kansas | 23.9 | 25.9 | 27.7 | 28.1 | 28.8 | 30.1 | 29.6 | 29.9 | 30 | |
| Kentucky | 28.6 | 28 | 28.7 | 30.3 | 32.4 | 31.8 | 30.4 | 31.3 | 33.2 | |
| Louisiana | 30.8 | 27.1 | 30.7 | 29 | 33.9 | 31.7 | 33.4 | 34.7 | 33.1 | |
| Maine | 22.7 | 23.1 | 25.2 | 25.9 | 26.4 | 27.4 | 27.8 | 28.4 | 28.9 | |
| Maryland | 24.4 | 24.9 | 26.3 | 26.7 | 26.8 | 27.9 | 28.3 | 27.6 | 28.3 | |
| Massachusetts | 20.7 | 20.3 | 21.7 | 21.5 | 21.8 | 23.6 | 22.7 | 22.9 | 23.6 | |
| Michigan | 26.2 | 28.8 | 28.2 | 29.5 | 30.3 | 31.7 | 31.3 | 31.1 | 31.5 | |
| Minnesota | 23.7 | 24.7 | 26 | 25.2 | 25.4 | 25.4 | 25.7 | 25.7 | 25.5 | |
| Mississippi | 30.9 | 31.4 | 32.6 | 33.4 | 35.4 | 34.5 | 34.9 | 34.6 | 35.1 | |
| Missouri | 26.9 | 27.2 | 28.2 | 29.1 | 30.6 | 31.4 | 30.3 | 29.6 | 30.4 | |
| Montana | 21.3 | 21.2 | 22.6 | 24.3 | 23.7 | 23.5 | 24.6 | 24.3 | 24.6 | |
| Nebraska | 26 | 26.9 | 26.5 | 27.2 | 28.1 | 27.5 | 28.4 | 28.6 | 29.6 | |
| Nevada | 21.2 | 25 | 24.6 | 25.6 | 26.4 | 23.1 | 24.5 | 26.2 | 26.2 | |
| New Hampshire | 23.1 | 22.4 | 25.1 | 24.9 | 26.3 | 25.5 | 26.2 | 27.3 | 26.7 | |
| New Jersey | 22.1 | 22.6 | 24.1 | 23.6 | 23.9 | 24.8 | 23.7 | 24.6 | 26.3 | |
| New Mexico | 21.7 | 22.9 | 25.1 | 25.7 | 25.6 | 25.6 | 26.3 | 27.1 | 26.4 | |
| New York | 22.2 | 22.9 | 25.5 | 25.1 | 24.6 | 24.5 | 24.5 | 23.6 | 25.4 | |
| North Carolina | 25.9 | 26.6 | 28.7 | 29.5 | 30.1 | 28.6 | 29.1 | 29.6 | 29.4 | |
| North Dakota | 25.4 | 25.4 | 27 | 27.8 | 28.4 | 27.9 | 27.8 | 29.7 | 31 | |
| Ohio | 24.3 | 28.4 | 28.1 | 29.3 | 29.8 | 29.7 | 29.7 | 30.1 | 30.4 | |
| Oklahoma | 26.8 | 28.8 | 28.8 | 31 | 32 | 31.3 | 31.1 | 32.2 | 32.5 | |
| Oregon | 23.8 | 24.8 | 26.3 | 25 | 23.6 | 27.6 | 26.7 | 27.3 | 26.5 | |
| Pennsylvania | 25.3 | 24 | 27.8 | 28.4 | 28.1 | 29.2 | 28.6 | 29.1 | 30 | |
| Rhode Island | 21 | 21.4 | 21.7 | 22.1 | 24.9 | 26 | 25.4 | 25.7 | 27.3 | |
| South Carolina | 29.1 | 29.4 | 29 | 30.7 | 30.1 | 32 | 30.8 | 31.6 | 31.7 | |
| South Dakota | 25.5 | 25.4 | 27.2 | 28.1 | 30.3 | 27.7 | 28.1 | 28.1 | 29.9 | |
| Tennessee | 27.4 | 28.8 | 30.7 | 31.2 | 32.9 | 31.7 | 29.2 | 31.1 | 33.7 | |
| Texas | 27 | 26.1 | 28.6 | 28.9 | 29.5 | 31.7 | 30.4 | 29.2 | 30.9 | |
| Utah | 21.2 | 21.9 | 22.4 | 23.1 | 24 | 23 | 24.4 | 24.3 | 24.1 | |
| Vermont | 20.2 | 21.2 | 21.9 | 23.3 | 23.4 | 23.9 | 25.4 | 23.7 | 24.7 | |
| Virginia | 25.1 | 25.1 | 25.3 | 25.8 | 25.5 | 26.4 | 29.2 | 27.4 | 27.2 | |
| Washington | 23.3 | 24.2 | 25.9 | 26 | 26.9 | 26.2 | 26.5 | 26.8 | 27.2 | |
| West Virginia | 30.6 | 31 | 30.3 | 31.9 | 31.7 | 32.9 | 32.4 | 33.8 | 35.1 | |
| Wisconsin | 24.4 | 26.6 | 25.3 | 26.1 | 29.2 | 26.9 | 27.7 | 29.7 | 29.8 | |
| Wyoming | 24.2 | 23.3 | 24.5 | 25.2 | 25.4 | 25.7 | 25 | 24.6 | 27.8 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment