Created
April 19, 2015 23:16
-
-
Save nydame/11a1299011c0285e186d to your computer and use it in GitHub Desktop.
Exercise 5 for Data Visualizations and Infographics with D3
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
County | Premature death Value | Adult obesity Value | Diabetes Value | Premature age-adjusted mortality Value | Median household income Value | |
---|---|---|---|---|---|---|
California | 5570 | 0.232 | 0.079 | 287.4 | 58322 | |
Alameda County | 5141 | 0.207 | 0.078 | 267.1 | 70209 | |
Amador County | 7504 | 0.23 | 0.098 | 350.3 | 51388 | |
Butte County | 7944 | 0.243 | 0.081 | 403.8 | 40748 | |
Calaveras County | 6938 | 0.258 | 0.091 | 323.2 | 50962 | |
Colusa County | 5945 | 0.226 | 0.078 | 299.8 | 49871 | |
Contra Costa County | 5257 | 0.237 | 0.076 | 263 | 74208 | |
Del Norte County | 9671 | 0.255 | 0.088 | 455.4 | 37305 | |
El Dorado County | 5170 | 0.203 | 0.081 | 259.9 | 68446 | |
Fresno County | 7010 | 0.294 | 0.09 | 351.9 | 41563 | |
Glenn County | 6819 | 0.268 | 0.078 | 353 | 41201 | |
Humboldt County | 8293 | 0.265 | 0.084 | 407.3 | 39837 | |
Imperial County | 5672 | 0.235 | 0.074 | 291.7 | 38185 | |
Inyo County | 7070 | 0.238 | 0.093 | 339.1 | 45748 | |
Kern County | 7631 | 0.278 | 0.078 | 394.4 | 45599 | |
Kings County | 6372 | 0.242 | 0.075 | 349.1 | 45464 | |
Lake County | 9804 | 0.267 | 0.1 | 479.7 | 35437 | |
Lassen County | 6849 | 0.256 | 0.075 | 383.3 | 47480 | |
Los Angeles County | 5464 | 0.213 | 0.077 | 281.4 | 52929 | |
Madera County | 6694 | 0.297 | 0.091 | 333.4 | 42054 | |
Marin County | 3782 | 0.154 | 0.055 | 189.2 | 88654 | |
Mariposa County | 7309 | 0.238 | 0.094 | 349.6 | 43166 | |
Mendocino County | 7975 | 0.248 | 0.077 | 380.1 | 41088 | |
Merced County | 6726 | 0.313 | 0.08 | 342.7 | 42552 | |
Modoc County | 9030 | 0.251 | 0.088 | 402.7 | 36724 | |
Mono County | 3891 | 0.208 | 0.066 | 166.8 | 53067 | |
Monterey County | 5216 | 0.228 | 0.069 | 253 | 56038 | |
Napa County | 5309 | 0.236 | 0.072 | 266.6 | 65698 | |
Nevada County | 5604 | 0.185 | 0.072 | 260 | 54230 | |
Orange County | 4396 | 0.204 | 0.074 | 230 | 71866 | |
Placer County | 4802 | 0.228 | 0.072 | 252.7 | 69521 | |
Plumas County | 7082 | 0.23 | 0.093 | 335.4 | 46450 | |
Riverside County | 5960 | 0.27 | 0.095 | 309.9 | 52416 | |
Sacramento County | 6447 | 0.277 | 0.092 | 337.3 | 52617 | |
San Benito County | 4955 | 0.243 | 0.074 | 267.7 | 60577 | |
San Bernardino County | 6760 | 0.282 | 0.085 | 356.9 | 50603 | |
San Diego County | 5143 | 0.231 | 0.075 | 270.9 | 60235 | |
San Francisco County | 5244 | 0.16 | 0.069 | 270.6 | 72093 | |
San Joaquin County | 7088 | 0.31 | 0.095 | 362.7 | 50431 | |
San Luis Obispo County | 5229 | 0.2 | 0.067 | 265.7 | 58427 | |
San Mateo County | 4135 | 0.2 | 0.072 | 218.3 | 81568 | |
Santa Barbara County | 5245 | 0.192 | 0.066 | 263.5 | 60683 | |
Santa Clara County | 3988 | 0.21 | 0.076 | 215.6 | 91195 | |
Santa Cruz County | 5109 | 0.201 | 0.06 | 257.6 | 65799 | |
Shasta County | 8358 | 0.28 | 0.09 | 419.6 | 44477 | |
Sierra County | 7607 | 0.234 | 0.095 | 374 | 45157 | |
Siskiyou County | 8516 | 0.233 | 0.088 | 389.3 | 36597 | |
Solano County | 6389 | 0.271 | 0.104 | 326.1 | 61976 | |
Sonoma County | 5233 | 0.225 | 0.066 | 273 | 59855 | |
Stanislaus County | 6810 | 0.308 | 0.083 | 359.3 | 46324 | |
Sutter County | 6862 | 0.259 | 0.084 | 348.5 | 46524 | |
Tehama County | 7902 | 0.26 | 0.089 | 378.2 | 38577 | |
Trinity County | 8555 | 0.251 | 0.095 | 410 | 35162 | |
Tulare County | 7367 | 0.295 | 0.074 | 372.1 | 40197 | |
Tuolumne County | 6682 | 0.227 | 0.079 | 321.8 | 46624 | |
Ventura County | 5058 | 0.219 | 0.071 | 253.4 | 71043 | |
Yolo County | 4891 | 0.229 | 0.07 | 275 | 51040 | |
Yuba County | 7940 | 0.305 | 0.077 | 433.5 | 41599 |
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Scatter Plot</title> | |
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
body { | |
background-color: whitesmoke; | |
font-family: 'Raleway', Helvetica, sans-serif; | |
font-weight: 300; | |
} | |
h1 { | |
font-weight: 400; | |
line-height: 1.5em; | |
border-bottom: 1px solid gray; | |
} | |
svg { | |
background-color: mistyrose; | |
width: 75%; | |
} | |
circle:hover { | |
fill: rebeccapurple; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-size: 11px; | |
} | |
.y.axis path, | |
.y.axis line { | |
opacity: 1; | |
} | |
/*.y.axis text { | |
-moz-transform: rotate(-25deg) translate(0, -0.5em);-ms-transform: rotate(-25deg) translate(0, -0.5em);-o-transform: rotate(-25deg) translate(0, -0.5em);-webkit-transform: rotate(-25deg) translate(0, -0.5em);transform: rotate(-25deg) translate(0, -0.5em); | |
-moz-transform-origin: top right;-ms-transform-origin: top right;-o-transform-origin: top right;-webkit-transform-origin: top right;transform-origin: top right; | |
}*/ | |
</style> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
</head> | |
<body> | |
<h1>Relationship between Obesity and Diabetes Rates in California Counties</h1> | |
<p>Hover over a dot for more information!</p> | |
<svg id="bar-chart" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid"> | |
<!-- --> | |
</svg> | |
<script type="text/javascript"> | |
var svg1 = d3.select("svg"), | |
h = document.getElementById('bar-chart').scrollHeight, | |
w = document.getElementById('bar-chart').scrollWidth, | |
padding = [50, 20, 20, 120], | |
yScale = d3.scale.linear().range([ padding[0], h - padding[2] ]), | |
xScale = d3.scale.linear().range([padding[3], w - padding[1] ]), | |
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.format(".1%")), | |
yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(d3.format("%")), | |
xOffset = 10, | |
yOffset = xOffset; | |
//Load in contents of CSV file and create a bar graph | |
d3.csv("CA-diabetes-data.csv", function(data) { | |
var xVal, xVal2, yVal, circles; | |
// Define columns in CSV associated with x- and y- axes | |
xVal = "Diabetes Value"; | |
xVal2 = "Adult obesity Value"; | |
// xVal2 = "Median household income Value" | |
yVal = "County"; | |
// Sort the data in order of ascending Diabetes Value (DV) | |
// data.sort(function(a, b) { | |
// return d3.ascending(a["Diabetes Value"], b["Diabetes Value"]); | |
// }); | |
sortUp(data, xVal); | |
// Define domain for xScale | |
xScale.domain([ d3.round(d3.min(data, function(d) { | |
return d[xVal] | |
}) * 0.9, 2), d3.max(data, function(d){ | |
return d[xVal]; | |
}) ]); | |
// Define domain for yScale | |
yScale.domain([ d3.max(data, function(d) { | |
return d[xVal2]; | |
}), d3.round(d3.min(data, function(d) { | |
return d[xVal2]; | |
}) * 0.9, 2) ]); | |
// Bind data to rectangles in the SVG element | |
// svg1.selectAll("rect") | |
// .data(data) | |
// .enter() | |
// .append("rect"); | |
circles = bindData(svg1, data, "circle"); | |
// Give rectangles width proportional to DV | |
// and position along y axis determined by index | |
// svg1.selectAll("rect") | |
// .attr("x", 15) | |
// .attr("y", function(d, i) { | |
// return (i * 10) + 5; | |
// }) | |
// .attr("width", function(d) { | |
// return parseInt(d["Diabetes Value"] * 4000); | |
// }) | |
// .attr("height", 8) | |
// .attr("fill", "gray") | |
// .append("title") | |
// .text(function(d) {return d["County"];}); | |
// makeBarChart(rects, xVal, yVal); | |
makeScatterPlot(circles, xVal, xVal2); | |
circles.append("title").text(function(d) {return d[yVal] + " has a diabetes rate of " + d[xVal] + " and an obesity rate of " + d[xVal2];}); | |
// Add x- and y- axes to container | |
addXAxis(svg1); | |
addYAxis(svg1); | |
}); | |
function sortUp(data, s) { | |
data.sort(function(a, b) { | |
return d3.ascending( a[s], b[s] ); | |
}); | |
} | |
function bindData(container, dataset, shape) { | |
return container.selectAll(shape) | |
.data(dataset) | |
.enter() | |
.append(shape); | |
} | |
function makeBarChart(elements, wBar, hBar) { | |
elements.attr("x", padding[3]) | |
.attr("y", function(d) {return yScale(d[hBar]);}) | |
.attr("width", function(d) {return xScale(d[wBar]);}) | |
.attr("height", yScale.rangeBand()) | |
.attr("fill", "gray") | |
.append("title") | |
.text(function(d) {return (d[wBar] * 100) + "%";}) | |
} | |
function makeScatterPlot(elements, circleX, circleY) { | |
elements.attr("cx", function(d) {return xScale(d[circleX]) + xOffset;}) | |
.attr("cy", function(d) {return yScale(d[circleY]) - yOffset;}) | |
.attr("r", 5) // was function(d) {return xScale(d[circleX]);} | |
.attr("fill", "gray") | |
} | |
function addXAxis(container) { | |
container.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(" + xOffset + "," + (h - padding[2]) + ")") | |
.call(xAxis); | |
} | |
function addYAxis(container) { | |
container.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + padding[3] + ",-" + yOffset + ")") | |
.call(yAxis); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment