Created
December 23, 2013 16:43
-
-
Save chrisingraham/8100305 to your computer and use it in GitHub Desktop.
Missing Teeth
This file contains 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> | |
| <meta charset="utf-8"> | |
| <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,900' rel='stylesheet' type='text/css'> | |
| <style> | |
| .counties { | |
| fill: none; | |
| } | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| } | |
| p { | |
| color: #333; | |
| } | |
| .states { | |
| fill: #ccc; | |
| stroke: #fff; | |
| stroke-linejoin: round; | |
| } | |
| #tt { pointer-events: none;color:white;} | |
| #tipContainer { font-size:16px;position:absolute;width:180px;z-index:100;background-repeat:no-repeat;text-align:left;line-height:20px;} | |
| #tipLocation {font-weight:normal;font-style: Italic; color:white;margin:0px;padding:10px 10px;background:#333;font-size:14px;} | |
| #tipCount {font-weight:bold;font-size:32px;margin:0px;padding:10px 0px 10px 0px;color:#333;} | |
| #tipKey {font-weight:normal;font-size:12px;color:#333;margin:0px;padding:5px 0px 5px 10px;background:rgba(255,255,255,0.7);} | |
| .tipClear { clear:both;} | |
| </style> | |
| <body> | |
| <h3>Where America's Seniors Are Missing Teeth</h3> | |
| <p>Bloomberg Visual Data ranked U.S. states on their dental hygiene, including the percentage of seniors who lost all their natural teeth to tooth decay or gum disease. As with much public health data, there is a pattern of poorer outcomes in the Southern states. West Virginia stands out as the state with the highest percentage of toothless seniors (36.0%), while Hawaii has the lowest (7.4%).</p> | |
| <p>Data from the Kaiser Family Foundation and U.S. Department of Health and Human Services, via <a href="http://www.bloomberg.com/visual-data/best-and-worst/worst-dental-health-states">Bloomberg Visual Data</a>.</p> | |
| <div id = "cont" style="position: absolute"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var rateById = d3.map(); | |
| var linear = d3.scale.linear() | |
| .domain([7.4, 36]) | |
| .range(['#F9F2F2','#0F0000']); | |
| var format = d3.format("0.1f"); | |
| var path = d3.geo.path(); | |
| var tooltip = d3.select("#cont").append("div").attr("id", "tt").style("z-index", "10").style("position", "absolute").style("visibility", "hidden"); | |
| var svg = d3.select("#cont").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var gradient = svg.append("svg:defs") | |
| .append("svg:linearGradient") | |
| .attr("id", "gradient") | |
| .attr("x1", "0%") | |
| .attr("y1", "0%") | |
| .attr("x2", "100%") | |
| .attr("y2", "0%") | |
| .attr("spreadMethod", "pad"); | |
| gradient.append("svg:stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", "#F9F2F2") | |
| .attr("stop-opacity", 1); | |
| gradient.append("svg:stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", "#0F0000") | |
| .attr("stop-opacity", 1); | |
| var tt; | |
| d3.csv("teeth.csv", function (error, data) { | |
| tt = data; | |
| }); | |
| queue() | |
| .defer(d3.json, "us.json") | |
| .defer(d3.csv, "teeth.csv", function(d) { rateById.set(d.fips, +d.teeth); }) | |
| .await(ready); | |
| function ready(error, us) { | |
| svg.append("g") | |
| .attr("class", "states") | |
| .selectAll("path") | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("fill", function(d) { if(!isNaN(rateById.get(d.id))) {return linear(rateById.get(d.id));} else { return "#ccc";} }) | |
| .attr("d", path) | |
| .on("mouseover", function (d) { | |
| return toolOver(d, this) | |
| }) | |
| .on("mouseout", function (d) { | |
| return toolOut(d, this) | |
| }) | |
| .on("mousemove", function (d, i) { | |
| for (var i = 0; i < tt.length; i++) { | |
| if (tt[i].fips == d.id) { | |
| filtered = tt[i]; | |
| break; | |
| } | |
| } | |
| ms = d3.mouse(this); | |
| mx = ms[0]; | |
| my = ms[1]; | |
| return toolMove(filtered.state, format(filtered.teeth)) | |
| }); | |
| } | |
| function toolOver(v, thepath) { | |
| d3.select(thepath).style({ | |
| "fill-opacity": "0.1" | |
| }); | |
| return tooltip.style("visibility", "visible"); | |
| }; | |
| function toolOut(m, thepath) { | |
| d3.select(thepath).style({ | |
| "fill-opacity": "1" | |
| }); | |
| return tooltip.style("visibility", "hidden"); | |
| }; | |
| function toolMove(a,b) { | |
| if (mx < 200) { | |
| mx = 200 | |
| }; | |
| if (my < 100) { | |
| my = 100 | |
| }; | |
| return tooltip.style("top", my + -100 + "px").style("left", mx - 200 + "px").html("<div id='tipContainer'><div id='tipLocation'><b>" + a + "</b></div><div id='tipKey'>% of seniors without natural teeth:<br> <div id='tipCount'><b>" + b + "%</b></div></div><div class='tipClear'></div> </div>"); | |
| }; | |
| svg.append("text") | |
| .attr("x", 520) | |
| .attr("y", 450) | |
| .style("font-size", "14px") | |
| .style("font-weight", "bold") | |
| .style("fill", "#333") | |
| .text("% of adults aged 65+"); | |
| svg.append("text") | |
| .attr("x", 520) | |
| .attr("y", 465) | |
| .attr("id", "changeme") | |
| .style("font-size", "14px") | |
| .style("font-weight", "bold") | |
| .style("fill", "#333") | |
| .text("with no natural teeth:"); | |
| svg.append("svg:rect") | |
| .attr("x", 550) | |
| .attr("y", 475) | |
| .attr("width", 150) | |
| .attr("height", 15) | |
| .style("fill", "url(#gradient)"); | |
| svg.append("text") | |
| .attr("x", 520) | |
| .attr("y", 487) | |
| .attr("id", "left") | |
| .style("font-size", "14px") | |
| .style("font-weight", "bold") | |
| .style("fill", "#333") | |
| .text("7.4"); | |
| svg.append("text") | |
| .attr("x", 706) | |
| .attr("y", 487) | |
| .attr("id", "right") | |
| .style("font-size", "14px") | |
| .style("font-weight", "bold") | |
| .style("fill", "#333") | |
| .text("36.0"); | |
| d3.select(self.frameElement).style("height", "700px"); | |
| </script> |
This file contains 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
| fips | state | teeth | |
|---|---|---|---|
| 1 | Alabama | 25.5 | |
| 2 | Alaska | 16.2 | |
| 4 | Arizona | 13.4 | |
| 5 | Arkansas | 23.3 | |
| 6 | California | 10.6 | |
| 8 | Colorado | 13.4 | |
| 9 | Connecticut | 9.2 | |
| 10 | Delaware | 16.4 | |
| 11 | DC | 11.2 | |
| 12 | Florida | 13.3 | |
| 13 | Georgia | 21 | |
| 15 | Hawaii | 7.4 | |
| 16 | Idaho | 15.7 | |
| 17 | Illinois | 13.7 | |
| 18 | Indiana | 21.3 | |
| 19 | Iowa | 16.9 | |
| 20 | Kansas | 17.9 | |
| 21 | Kentucky | 27.4 | |
| 22 | Louisiana | 25.6 | |
| 23 | Maine | 20.7 | |
| 24 | Maryland | 13.6 | |
| 25 | Massachusetts | 15.2 | |
| 26 | Michigan | 13.1 | |
| 27 | Minnesota | 11.2 | |
| 28 | Mississippi | 27.1 | |
| 29 | Missouri | 19.5 | |
| 30 | Montana | 17.6 | |
| 31 | Nebraska | 15.2 | |
| 32 | Nevada | 17.2 | |
| 33 | New Hampshire | 17.2 | |
| 34 | New Jersey | 14.1 | |
| 35 | New Mexico | 18.5 | |
| 36 | New York | 14.7 | |
| 37 | North Carolina | 21.5 | |
| 38 | North Dakota | 18.8 | |
| 39 | Ohio | 19.8 | |
| 40 | Oklahoma | 24.6 | |
| 41 | Oregon | 13.7 | |
| 42 | Pennsylvania | 18 | |
| 44 | Rhode Island | 16.5 | |
| 45 | South Carolina | 21.6 | |
| 46 | South Dakota | 18.2 | |
| 47 | Tennessee | 33.7 | |
| 48 | Texas | 14.1 | |
| 49 | Utah | 12.8 | |
| 50 | Vermont | 17.5 | |
| 51 | Virginia | 15 | |
| 53 | Washington | 12 | |
| 54 | West Virginia | 36 | |
| 55 | Wisconsin | 16.3 | |
| 56 | Wyoming | 18.6 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment