Created
April 13, 2015 18:09
-
-
Save sdbernard/8967289afc86fa80f856 to your computer and use it in GitHub Desktop.
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>Loading CSV Data with D3</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; | |
| } | |
| 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> |
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 | obesity2013 | obesity2012 | obesity2011 | obesity2010 | obesity2009 | obesity2008 | obesity2007 | obesity2006 | obesity2005 | poverty2013 | poverty2012 | poverty2011 | poverty2010 | poverty2009 | poverty2008 | poverty2007 | poverty2006 | poverty2005 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alabama | 32.4 | 33 | 32 | 33 | 31.6 | 32.2 | 30.9 | 30.5 | 28.9 | 16.7 | 16.2 | 15.4 | 17.2 | 16.6 | 14.3 | 14.5 | 14.3 | 16.7 | |
| Alaska | 28.4 | 25.7 | 27.4 | 25.2 | 25.4 | 27.1 | 28.2 | 26.2 | 27.4 | 10.9 | 10.0 | 11.7 | 12.5 | 11.7 | 8.2 | 7.6 | 8.9 | 10.0 | |
| Arizona | 26.8 | 26 | 25.1 | 25.2 | 25.9 | 25.6 | 25.8 | 22.9 | 21.1 | 20.2 | 19.0 | 17.2 | 18.8 | 21.2 | 18.0 | 14.3 | 14.4 | 15.2 | |
| Arkansas | 34.6 | 34.5 | 30.9 | 30.9 | 31.5 | 29.5 | 29.3 | 26.9 | 28 | 17.1 | 20.1 | 18.7 | 15.3 | 18.9 | 15.3 | 13.8 | 17.7 | 13.8 | |
| California | 24.1 | 25 | 23.8 | 24.7 | 25.5 | 24.3 | 23.3 | 23.3 | 22.7 | 14.9 | 15.9 | 16.9 | 16.3 | 15.3 | 14.6 | 12.7 | 12.2 | 13.2 | |
| Colorado | 21.3 | 20.5 | 20.7 | 21.4 | 19 | 19.1 | 19.3 | 18.2 | 17.8 | 10.6 | 11.9 | 13.2 | 12.3 | 12.3 | 11.0 | 9.8 | 9.7 | 11.4 | |
| Connecticut | 25 | 25.6 | 24.5 | 23 | 21 | 21.4 | 21.7 | 20.6 | 20.1 | 11.3 | 10.3 | 10.1 | 8.6 | 8.4 | 8.1 | 8.9 | 8.0 | 9.3 | |
| Delaware | 31.1 | 26.9 | 28.8 | 28.7 | 27.6 | 27.8 | 28.2 | 26 | 23.5 | 14.0 | 13.5 | 13.7 | 12.2 | 12.3 | 9.6 | 9.3 | 9.3 | 9.2 | |
| District of Columbia | 22.9 | 21.9 | 23.8 | 22.4 | 20.1 | 22.3 | 22.2 | 22.5 | 21.7 | 21.3 | 18.4 | 19.9 | 19.5 | 17.9 | 16.5 | 18.0 | 18.3 | 21.3 | |
| Florida | 26.4 | 25.2 | 26.6 | 27.2 | 26.5 | 25.2 | 24.1 | 23.1 | 22.8 | 14.9 | 15.3 | 14.9 | 16.0 | 14.6 | 13.1 | 12.5 | 11.5 | 11.1 | |
| Georgia | 30.3 | 29.1 | 28 | 30.4 | 27.7 | 27.8 | 28.7 | 27.1 | 26.5 | 16.3 | 18.1 | 18.4 | 18.8 | 18.4 | 15.5 | 13.6 | 12.6 | 14.4 | |
| Hawaii | 21.8 | 23.6 | 21.9 | 23.1 | 22.9 | 23.1 | 21.7 | 20.6 | 19.7 | 11.1 | 13.8 | 12.1 | 12.4 | 12.5 | 9.9 | 7.5 | 9.2 | 8.6 | |
| Idaho | 29.6 | 26.8 | 27.1 | 26.9 | 25.1 | 25.2 | 25.1 | 24.1 | 24.5 | 12.9 | 14.4 | 15.7 | 13.8 | 13.7 | 12.2 | 9.9 | 9.5 | 9.9 | |
| Illinois | 29.4 | 28.1 | 27.1 | 28.7 | 27.4 | 26.9 | 25.6 | 25.1 | 25.1 | 13.3 | 12.6 | 14.2 | 14.1 | 13.2 | 12.3 | 10.0 | 10.6 | 11.5 | |
| Indiana | 31.8 | 31.4 | 30.8 | 30.2 | 30 | 27 | 27.4 | 27.8 | 27.2 | 11.6 | 15.2 | 15.6 | 16.3 | 16.1 | 14.3 | 11.8 | 10.6 | 12.6 | |
| Iowa | 31.3 | 30.4 | 29 | 29.1 | 28.5 | 26.7 | 27.7 | 25.7 | 25.4 | 10.8 | 10.3 | 10.4 | 10.3 | 10.7 | 9.5 | 8.9 | 10.3 | 11.3 | |
| Kansas | 30 | 29.9 | 29.6 | 30.1 | 28.8 | 28.1 | 27.7 | 25.9 | 23.9 | 13.2 | 14.0 | 14.3 | 14.5 | 13.7 | 12.7 | 11.7 | 12.8 | 12.5 | |
| Kentucky | 33.2 | 31.3 | 30.4 | 31.8 | 32.4 | 30.3 | 28.7 | 28 | 28.6 | 20.0 | 17.9 | 16.0 | 17.7 | 17.0 | 17.1 | 15.5 | 16.8 | 14.8 | |
| Louisiana | 33.1 | 34.7 | 33.4 | 31.7 | 33.9 | 29 | 30.7 | 27.1 | 30.8 | 19.2 | 21.1 | 21.1 | 21.5 | 14.3 | 18.2 | 16.1 | 17.0 | 18.3 | |
| Maine | 28.9 | 28.4 | 27.8 | 27.4 | 26.4 | 25.9 | 25.2 | 23.1 | 22.7 | 12.3 | 12.8 | 13.4 | 12.6 | 11.4 | 12.0 | 10.9 | 10.2 | 12.6 | |
| Maryland | 28.3 | 27.6 | 28.3 | 27.9 | 26.8 | 26.7 | 26.3 | 24.9 | 24.4 | 10.3 | 9.9 | 9.3 | 10.9 | 9.6 | 8.7 | 8.8 | 8.4 | 9.7 | |
| Massachusetts | 23.6 | 22.9 | 22.7 | 23.6 | 21.8 | 21.5 | 21.7 | 20.3 | 20.7 | 11.9 | 11.3 | 10.6 | 10.9 | 10.8 | 11.3 | 11.2 | 12.0 | 10.1 | |
| Michigan | 31.5 | 31.1 | 31.3 | 31.7 | 30.3 | 29.5 | 28.2 | 28.8 | 26.2 | 14.5 | 13.7 | 15.0 | 15.7 | 14.0 | 13.0 | 10.8 | 13.3 | 12.0 | |
| Minnesota | 25.5 | 25.7 | 25.7 | 25.4 | 25.4 | 25.2 | 26 | 24.7 | 23.7 | 12.0 | 10.0 | 10.0 | 10.8 | 11.1 | 9.9 | 9.3 | 8.2 | 8.1 | |
| Mississippi | 35.1 | 34.6 | 34.9 | 34.5 | 35.4 | 33.4 | 32.6 | 31.4 | 30.9 | 22.5 | 22.0 | 17.4 | 22.5 | 23.1 | 18.1 | 22.6 | 20.6 | 20.1 | |
| Missouri | 30.4 | 29.6 | 30.3 | 31.4 | 30.6 | 29.1 | 28.2 | 27.2 | 26.9 | 13.7 | 15.2 | 15.4 | 15.0 | 15.5 | 13.3 | 12.8 | 11.4 | 11.6 | |
| Montana | 24.6 | 24.3 | 24.6 | 23.5 | 23.7 | 24.3 | 22.6 | 21.2 | 21.3 | 14.5 | 13.4 | 16.5 | 14.5 | 13.5 | 12.9 | 13.0 | 13.5 | 13.8 | |
| Nebraska | 29.6 | 28.6 | 28.4 | 27.5 | 28.1 | 27.2 | 26.5 | 26.9 | 26 | 11.0 | 12.2 | 10.2 | 10.2 | 9.9 | 10.6 | 9.9 | 10.2 | 9.5 | |
| Nevada | 26.2 | 26.2 | 24.5 | 23.1 | 26.4 | 25.6 | 24.6 | 25 | 21.2 | 17.4 | 15.8 | 15.5 | 16.6 | 13.0 | 10.8 | 9.7 | 9.5 | 10.6 | |
| New Hampshire | 26.7 | 27.3 | 26.2 | 25.5 | 26.3 | 24.9 | 25.1 | 22.4 | 23.1 | 9.0 | 8.1 | 7.6 | 6.5 | 7.8 | 7.0 | 5.8 | 5.4 | 5.6 | |
| New Jersey | 26.3 | 24.6 | 23.7 | 24.8 | 23.9 | 23.6 | 24.1 | 22.6 | 22.1 | 11.1 | 9.3 | 11.4 | 11.1 | 9.3 | 9.2 | 8.7 | 8.8 | 6.8 | |
| New Mexico | 26.4 | 27.1 | 26.3 | 25.6 | 25.6 | 25.7 | 25.1 | 22.9 | 21.7 | 21.7 | 20.4 | 22.2 | 18.3 | 19.3 | 19.3 | 14.0 | 16.9 | 17.9 | |
| New York | 25.4 | 23.6 | 24.5 | 24.5 | 24.6 | 25.1 | 25.5 | 22.9 | 22.2 | 14.5 | 17.2 | 16.0 | 16.0 | 15.8 | 14.2 | 14.5 | 14.0 | 14.5 | |
| North Carolina | 29.4 | 29.6 | 29.1 | 28.6 | 30.1 | 29.5 | 28.7 | 26.6 | 25.9 | 18.6 | 17.2 | 15.4 | 17.4 | 16.9 | 13.9 | 15.5 | 13.8 | 13.1 | |
| North Dakota | 31 | 29.7 | 27.8 | 27.9 | 28.4 | 27.8 | 27 | 25.4 | 25.4 | 9.9 | 11.4 | 9.9 | 12.6 | 10.9 | 11.8 | 9.3 | 11.4 | 11.2 | |
| Ohio | 30.4 | 30.1 | 29.7 | 29.7 | 29.8 | 29.3 | 28.1 | 28.4 | 24.3 | 13.7 | 15.4 | 15.1 | 15.4 | 13.3 | 13.7 | 12.8 | 12.1 | 12.3 | |
| Oklahoma | 32.5 | 32.2 | 31.1 | 31.3 | 32 | 31 | 28.8 | 28.8 | 26.8 | 14.0 | 18.0 | 13.9 | 16.3 | 12.9 | 13.6 | 13.4 | 15.2 | 15.6 | |
| Oregon | 26.5 | 27.3 | 26.7 | 27.6 | 23.6 | 25 | 26.3 | 24.8 | 23.8 | 15.1 | 13.5 | 14.4 | 14.3 | 13.4 | 10.6 | 12.8 | 11.8 | 12.0 | |
| Pennsylvania | 30 | 29.1 | 28.6 | 29.2 | 28.1 | 28.4 | 27.8 | 24 | 25.3 | 12.4 | 13.9 | 12.6 | 12.2 | 11.1 | 11.0 | 10.4 | 11.3 | 11.2 | |
| Rhode Island | 27.3 | 25.7 | 25.4 | 26 | 24.9 | 22.1 | 21.7 | 21.4 | 21 | 13.5 | 13.6 | 13.4 | 14.0 | 13.0 | 12.7 | 9.5 | 10.5 | 12.1 | |
| South Carolina | 31.7 | 31.6 | 30.8 | 32 | 30.1 | 30.7 | 29 | 29.4 | 29.1 | 15.9 | 16.7 | 19.0 | 16.9 | 13.7 | 14.0 | 14.1 | 11.2 | 15.0 | |
| South Dakota | 29.9 | 28.1 | 28.1 | 27.7 | 30.3 | 28.1 | 27.2 | 25.4 | 25.5 | 10.3 | 12.8 | 14.5 | 13.6 | 14.1 | 13.1 | 9.4 | 10.7 | 11.8 | |
| Tennessee | 33.7 | 31.1 | 29.2 | 31.7 | 32.9 | 31.2 | 30.7 | 28.8 | 27.4 | 18.1 | 18.6 | 16.3 | 16.7 | 16.5 | 15.0 | 14.8 | 14.9 | 14.9 | |
| Texas | 30.9 | 29.2 | 30.4 | 31.7 | 29.5 | 28.9 | 28.6 | 26.1 | 27 | 16.8 | 17.0 | 17.4 | 18.4 | 17.3 | 15.9 | 16.5 | 16.4 | 16.2 | |
| Utah | 24.1 | 24.3 | 24.4 | 23 | 24 | 23.1 | 22.4 | 21.9 | 21.2 | 8.3 | 11.0 | 11.0 | 10.0 | 9.7 | 7.6 | 9.6 | 9.3 | 9.2 | |
| Vermont | 24.7 | 23.7 | 25.4 | 23.9 | 23.4 | 23.3 | 21.9 | 21.2 | 20.2 | 8.7 | 11.2 | 11.6 | 10.8 | 9.4 | 9.0 | 9.9 | 7.8 | 7.6 | |
| Virginia | 27.2 | 27.4 | 29.2 | 26.4 | 25.5 | 25.8 | 25.3 | 25.1 | 25.1 | 10.4 | 10.6 | 11.4 | 10.7 | 10.7 | 10.3 | 8.6 | 8.6 | 9.2 | |
| Washington | 27.2 | 26.8 | 26.5 | 26.2 | 26.9 | 26 | 25.9 | 24.2 | 23.3 | 12.0 | 11.6 | 12.5 | 11.6 | 11.7 | 10.4 | 10.2 | 8.0 | 10.2 | |
| West Virginia | 35.1 | 33.8 | 32.4 | 32.9 | 31.7 | 31.9 | 30.3 | 31 | 30.6 | 17.3 | 16.7 | 17.5 | 16.8 | 15.8 | 14.5 | 14.8 | 15.3 | 15.4 | |
| Wisconsin | 29.8 | 29.7 | 27.7 | 26.9 | 29.2 | 26.1 | 25.3 | 26.6 | 24.4 | 11.0 | 11.4 | 13.1 | 10.1 | 10.8 | 9.8 | 11.0 | 10.1 | 10.2 | |
| Wyoming | 27.8 | 24.6 | 25 | 25.7 | 25.4 | 25.2 | 24.5 | 23.3 | 24.2 | 11.8 | 9.6 | 10.7 | 9.6 | 9.2 | 10.1 | 10.9 | 10.0 | 10.6 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment