Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dstinchcomb/6ec2b7585c8ac400510d to your computer and use it in GitHub Desktop.
Save dstinchcomb/6ec2b7585c8ac400510d to your computer and use it in GitHub Desktop.
DataVis with D3 - Module 3 Exercise
CoFIPS StName CoName TotPop AgeLT18_pct Age65plus_pct Black_pct AIAN_pct Asian_pct NHOPI_pct Hisp_pct NHWhite_pct NoEngl_n NoEngl_pct NoEngl_cil NoEngl_cih Female_pct Rural_pct Diabetic_pct Diabetic_cil Diabetic_cih HIV_n HIV_rate PreMatDeaths_n Mort_rate Mort_cil Mort_cih InfantMort_rate InfantMort_cil InfantMort_cih ChildDeaths_n ChildMort_rate ChildMort_cil ChildMort_cih FoodInsecure_pct LimitedFood_n LimitedFood_pct MVDeaths_n MVMort_rate MVMort_cil MVMort_cih DrugDeaths_n DrugMort_rate NoInsAdult_n NoInsAdult_pct NoInsAdult_cil NoInsAdult_cih NoInsChild_n NoInsChild_pct NoInsChild_cil NoInsChild_cih HealthCare_dol HealthCare_cil HealthCare_cih Access2Dr_n Access2Dr_pct Access2Dr_cil Access2Dr_cih OtherPCP_rate PCP_percap HHInc_dol HHInc_cil HHInc_cih SchLunch_pct Homicide_rate Homicide_cil Homicide_cih
24001 Maryland Allegany 74012 17.6 18.5 8.1 0.2 0.8 0 1.5 88 257 0.4 0.1 0.6 48.1 27.3 12 10 14 118 180 985 381 356.6 405.5 7.9 5.4 10.4 33 60.1 41.4 84.4 12 11732 16 74 14 11 18 72 14 6038 14 13 16 590 4 3 6 9323 9320 9326 1908 11 9 14 77 1298 38670 36252 41088 40 2 1 4
24003 Maryland Anne Arundel 550488 22.8 12.7 15.5 0.4 3.6 0.1 6.4 72 8686 1.7 1.5 1.9 50.6 5.3 9 8 10 1403 312 5325 320.4 311.7 329.1 7 6.2 7.7 264 53.2 46.8 59.7 8 18063 3 370 10 9 11 505 14 37302 11 10 12 4706 4 3 5 9298 9297 9299 4441 9 7 10 60 1673 87083 83162 91004 22 4 4 5
24005 Maryland Baltimore 817455 21.7 15.1 26.1 0.4 5.3 0.1 4.4 62 16207 2.1 2 2.3 52.7 6.5 10 9 11 3062 450 8766 351.5 344.1 359 7.9 7.2 8.6 420 59.2 53.5 64.9 12 24574 3 529 9 9 10 878 16 66261 13 12 14 9337 5 4 6 9552 9551 9553 7478 11 10 12 64 1569 62413 60596 64230 34 6 6 7
24009 Maryland Calvert 89628 24.8 12 13.3 0.4 1.5 0.1 2.9 79.6 244 0.3 0.1 0.5 50.8 38.7 10 8 11 91 124 803 301.2 279.8 322.5 5.4 3.7 7.1 41 43.2 31 58.6 7 4119 5 113 19 15 22 69 11 5291 10 8 11 898 4 3 5 8641 8639 8643 1751 8 7 11 35 2891 87215 80762 93668 18 3 2 5
24011 Maryland Caroline 32718 24.2 14.4 14 0.8 0.7 0.3 5.4 77.9 781 2.5 1.9 3.2 51.4 76 12 10 14 64 236 427 415.8 375.9 455.7 29 86.4 57.9 124.1 11 746 2 80 35 28 44 21 9 3680 18 16 20 555 6 5 8 9624 9621 9627 1349 16 13 19 24 4090 48772 45774 51770 43
24013 Maryland Carroll 167217 23.3 14.3 3.2 0.2 1.5 0 2.7 91 1073 0.7 0.5 0.9 50.6 39.5 9 7 11 149 107 1614 305.1 289.9 320.3 4.4 3.3 5.5 63 37.1 28.5 47.5 6 6254 4 170 15 12 17 140 12 9905 10 9 11 1635 4 3 5 9374 9373 9375 1574 9 7 12 54 1858 79304 74951 83657 12 1 1 2
24015 Maryland Cecil 101696 24 12.9 6.1 0.4 1.1 0.1 3.6 87.1 750 0.8 0.5 1.1 50.3 42.1 10 9 12 118 142 1285 407.6 385 430.2 5.1 3.6 6.6 52 50.4 37.7 66.2 10 4723 5 123 18 15 21 155 22 8025 13 11 14 1292 5 4 6 10471 10469 10473 1893 12 10 14 26 3911 62443 57196 67690 32 5 3 7
24017 Maryland Charles 150592 25.2 10.3 41 0.7 3.1 0.1 4.5 47.6 1062 0.8 0.5 1 51.7 29.5 10 9 12 353 293 1418 342.8 324.8 360.9 8.6 7 10.2 86 55.2 44.1 68.1 10 5466 4 169 17 14 20 80 8 10281 11 10 12 1718 4 3 6 9397 9396 9399 2440 9 8 11 41 2469 89203 85665 92741 23 5 4 6
24019 Maryland Dorchester 32551 21.3 18.8 27.6 0.4 1 0 3.8 65.8 456 1.5 0.8 2.1 52 56.2 14 12 16 110 399 459 388.9 352.1 425.6 12.4 8.1 16.7 38 133.3 94.3 183 15 948 3 37 17 12 23 31 14 3396 17 15 19 404 5 4 7 9592 9589 9594 1453 14 12 18 49 2034 41931 38771 45091 53
24021 Maryland Frederick 239582 24.4 12 8.5 0.4 4.1 0.1 7.6 77.4 3934 1.8 1.4 2.2 50.8 25.2 9 8 10 288 150 1835 270 257.5 282.5 5.8 4.7 6.8 95 40 32.4 48.9 7 4211 2 168 11 9 12 125 8 17873 12 11 13 2711 4 3 6 9374 9372 9375 4070 9 8 11 55 1829 80427 76806 84048 18 2 2 3
24023 Maryland Garrett 29854 21.1 18.6 1 0.1 0.3 0 0.8 97.1 49 0.2 0 0.5 50.4 83.9 11 10 13 6 23 372 345 308.7 381.4 16 58.7 33.6 95.3 9 577 2 45 21 16 29 16 8 3118 17 15 19 397 6 4 8 9002 8999 9004 1655 13 11 17 60 1659 41515 37469 45561 36
24025 Maryland Harford 248622 23.5 13.5 12.5 0.3 2.6 0.1 3.7 78.9 2125 0.9 0.7 1.1 51.1 17.8 10 9 12 354 174 2367 305.5 293.1 318 5.7 4.7 6.8 104 42.4 34.3 50.6 8 8409 3 191 11 10 13 241 14 16333 11 9 12 2469 4 3 5 9635 9634 9636 2201 9 7 11 42 2368 76220 71816 80624 22 3 2 4
24027 Maryland Howard 299430 24.9 11.2 17.4 0.4 15.1 0.1 6 58.4 8701 3.2 2.8 3.6 51 9.3 8 7 9 400 169 1735 207.8 197.9 217.8 5.8 4.8 6.7 110 37.2 30.2 44.1 7 4932 2 135 7 6 8 112 6 17819 10 8 11 3250 4 3 6 8560 8559 8561 2510 8 6 10 44 2286 108234 105078 111390 13 3 2 3
24029 Maryland Kent 20191 17.1 23.3 14.8 0.2 1 0 4.6 78.2 280 1.5 0.5 2.4 52.3 72.6 11 9 13 36 206 275 359.8 314.5 405 11 6 0 26 19 12 27 15 11 1831 17 14 19 250 7 5 9 8885 8882 8887 1126 9 7 13 45 2243 49969 45071 54867 44
24031 Maryland Montgomery 1004709 23.5 12.9 16.9 0.7 14.5 0.1 17.5 48.6 62945 6.9 6.6 7.2 51.9 2.4 7 6 8 3369 417 5437 188 183 193.1 6 5.5 6.5 399 43.4 39.1 47.6 8 11863 1 409 6 6 7 306 5 97298 16 15 17 12969 5 4 7 8014 8013 8014 8046 10 9 11 55 1823 94365 91714 97016 24 3 2 3
24033 Maryland Prince George's 881138 23.1 10.3 63.4 1 4.4 0.2 15.3 14.8 38134 4.7 4.5 5 52 2 11 10 12 5965 830 9381 380.7 372.9 388.5 10.8 10.1 11.4 718 85.9 79.6 92.2 16 33544 4 794 13 12 14 349 6 111245 20 18 21 13671 6 5 8 8592 8592 8593 5416 15 13 16 32 3170 69258 67074 71442 46 16 15 17
24035 Maryland Queen Anne's 48595 22.9 16.1 6.8 0.4 1.1 0 3.2 87.2 410 0.9 0.5 1.4 50.3 54.5 9 8 11 45 112 459 274.8 249.1 300.6 24 52 33.3 77.4 7 1487 3 46 14 10 19 38 12 3559 12 11 14 579 5 4 6 9177 9174 9179 1999 8 6 10 25 4050 79012 72110 85914 19
24037 Maryland St. Mary's 108987 25.4 11 14 0.4 2.6 0.1 4 76.3 854 0.9 0.5 1.2 50.1 50.4 9 8 11 95 111 1011 337.8 316.7 358.8 7.4 5.8 9.1 72 66.3 51.8 83.4 9 2320 2 100 14 11 17 63 9 7440 11 10 13 1222 4 3 6 9255 9253 9257 2030 8 7 10 32 3114 85478 82877 88079 24 2 1 4
24039 Maryland Somerset 26253 16.7 14.4 41.9 0.4 0.8 0 3.4 52 296 1.2 0.4 1.9 46.2 45.8 10 9 13 153 657 350 418.8 374.1 463.5 11.7 6.7 16.8 15 81.8 45.8 135 18 2930 11 15 8 5 13 25 14 2250 17 15 20 270 6 4 8 9264 9261 9267 862 15 11 19 65 1544 34454 30899 38009 60
24041 Maryland Talbot 38098 19 25.5 12.8 0.3 1.3 0.1 5.7 78.8 344 1 0.2 1.7 52.4 54.7 10 8 12 59 180 449 295.5 265.9 325.1 12 40.9 21.1 71.5 9 603 2 39 15 11 21 21 8 3418 16 14 18 478 6 5 8 9218 9216 9220 1934 9 7 11 79 1270 61529 56696 66362 29
24043 Maryland Washington 149180 22.4 14.9 9.9 0.3 1.5 0.1 3.6 82.6 1536 1.1 0.8 1.4 49 29.5 11 10 13 566 458 1684 356.9 339.7 374.1 5.7 4.4 7 72 53.2 41.6 66.9 12 9186 6 137 14 11 16 118 12 12805 15 13 16 1681 5 3 6 8848 8846 8849 2963 10 9 12 47 2131 52604 49463 55745 36 2 2 4
24045 Maryland Wicomico 100647 22 13.6 24.2 0.3 2.8 0.1 4.6 66.2 2168 2.3 1.7 3 52.2 25.8 11 9 13 224 270 1211 408.5 385.2 431.8 7.7 5.9 9.5 58 65.8 50 85.1 14 7023 7 108 16 13 19 81 12 10587 17 15 19 1336 6 4 7 9461 9460 9463 1869 13 11 16 133 751 50204 47872 52536 46 7 5 10
24047 Maryland Worcester 51578 17.8 24.3 13.6 0.3 1.2 0 3.1 80.3 554 1.1 0.5 1.8 51.3 35.5 12 10 14 75 167 675 318.1 291.9 344.3 6.3 3.6 9.1 22 58.1 36.4 87.9 13 1965 4 55 15 12 20 55 15 4962 17 15 19 658 7 5 9 9436 9434 9438 1262 13 10 17 74 1357 55875 52843 58907 35
24510 Maryland Baltimore City 621342 21.5 11.9 63.2 0.4 2.5 0.1 4.3 28.1 10701 1.8 1.7 2 52.9 0 12 11 14 12834 2451 11209 619.2 607.6 630.8 11.8 11 12.6 695 126.6 117.2 136 23 7607 1 397 9 8 10 1433 33 73441 18 17 20 6496 5 3 6 9918 9918 9919 3948 14 13 16 174 573 39077 37718 40436 76 38 36 40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 3 Exercise</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
color: #000099;
background-color: #80FFCC;
padding: 5px;
}
h1 {
border-bottom: solid 5px #000099;
font-size: 18pt;
}
svg {background-color: white;}
</style>
</head>
<body>
<h1>DataVis with D3 - Module 3 Exercise</h1>
<select id="measureSelect">
<option value="NoInsAdult_pct">Percent of adults without health insurance</option>
<option value="NoInsChild_pct">Percent of children without health insurance</option>
<option value="Access2Dr_pct">Percent who were unable to see a doctor due to costs</option>
<option value="LimitedFood_pct">Percent with limited access to healthy food</option>
<option value="Black_pct">Percent African American</option>
<option value="Hisp_pct">Percent Hispanic</option>
<option value="NHWhite_pct">Percent Non-Hispanic White</option>
</select>
<p>
<script type="text/javascript">
// Selected county measure
var selMmeasure = "NoInsAdult_pct"; // Hard-code the measure for now
// Tunable variables:
var svgw = 1120;
var svgh = 600;
var barStart = 50; // Down from the top - leave room for title
var barOffset = 100; // Shift right - leave room for county names
var barHeight = 17
var barPad = 5;
//Global variables:
var svg = d3.select("body") // An empty SVG
.append("svg")
.attr("width", svgw).attr("height", svgh);
var dataset;
//Load in contents of CSV file, check for errors, and call generateVis()
d3.csv("2014 County Health Rankings Maryland - additional_measures.csv",
function(error, data) {
if (error) { console.log(error); //Log the error.
} else {
console.log(data); //Log the data.
dataset = data;
generateVis();
}
});
// generateVis: function to generate the bar chart
var generateVis = function() {
// Sort in descending order
dataset.sort(function(a, b) {
return d3.descending(a.NoInsAdult_pct, b.NoInsAdult_pct);
});
// Create the bar chart
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", barOffset)
.attr("y", function(d, i) {
return i * (barHeight + barPad) + barStart;
})
.attr("width", function(d) {
return d.NoInsAdult_pct * 10;
})
.attr("height", barHeight)
.attr("fill", "#4A82BD")
.append("title")
.text(function(d) {
return d.CoName + " County's value is " + d.NoInsAdult_pct + " percent";
});
// Add text labels for each bar
var d_text = svg.selectAll("text")
.data(dataset);
// Add the county name to the left of the bar
d_text.enter()
.append("text")
.text(function(d) {
return d.CoName;
})
.attr("x", 2)
.attr("y", function(d, i) {
return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size
})
.attr("font-size", "12px")
.attr("fill", "#000099");
// Add the data value at the end of the bar
// d_text.enter()
// .append("text")
// .text(function(d) {
// return d.NoInsAdult_pct;
// })
// // .attr("x", 2)
// .attr("x", function(d) {
// return d.NoInsAdult_pct * 30;
// .attr("y", function(d, i) {
// return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size
// })
// .attr("font-size", "12px")
// .attr("fill", "#000099");
// Add a title
svg.append("rect") // Title rectangle
.attr({ // Using D3's "multivalue maps"
x: svgw / 2 - 200, y: 5, width: 400, height: 30, fill: "#FFE0D1"});
svg.append("text") // Title text
.attr({ // Using D3's "multivalue maps"
x: svgw / 2, y: 25, fill: "#000099",
"font-size": 18, "font-weight": "bold", "text-anchor": "middle"})
.text("Maryland County Health Rankings - 2014");
svg.append("line") // X-axis line
.attr({ // Using D3's "multivalue maps"
x1: barOffset, y1: svgh - 20,
x2: barOffset + 1000, y2: svgh - 20, stroke: "#000099"});
svg.append("text") // X-axis 0
.attr({ // Using D3's "multivalue maps"
x: barOffset, y: svgh - 6, fill: "#000099",
"font-size": 12, "text-anchor": "middle"})
.text("0");
svg.append("text") // X-axis 25
.attr({ // Using D3's "multivalue maps"
x: barOffset + 250, y: svgh - 6, fill: "#000099",
"font-size": 12, "text-anchor": "middle"})
.text("25");
svg.append("text") // X-axis 50
.attr({ // Using D3's "multivalue maps"
x: barOffset + 500, y: svgh - 6, fill: "#000099",
"font-size": 12, "text-anchor": "middle"})
.text("50");
svg.append("text") // X-axis 75
.attr({ // Using D3's "multivalue maps"
x: barOffset + 750, y: svgh - 6, fill: "#000099",
"font-size": 12, "text-anchor": "middle"})
.text("75");
svg.append("text") // X-axis 100
.attr({ // Using D3's "multivalue maps"
x: barOffset + 1000, y: svgh - 6, fill: "#000099",
"font-size": 12, "text-anchor": "middle"})
.text("100");
};
</script>
<p style="font-size:12px">Source: County Health Rankings web site (
<a href="http://http://www.countyhealthrankings.org/">
http://http://www.countyhealthrankings.org/</a>
) additional measures data.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment