Built with blockbuilder.org
Last active
May 26, 2017 01:06
-
-
Save li01012/efd00cb6429a943c8b62e58934d6a7ba to your computer and use it in GitHub Desktop.
Final Project Submission
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
license: mit |
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"> | |
<title>Cancer Incident Average In state of Texas</title> | |
<style> | |
.line { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<body> | |
<div class="info" style="position: absolute; top: 20px; left: 500px;"></div> | |
<script> | |
var width = 960; | |
var height = 500; | |
// Set the map projection centered on Texas | |
var projection = d3.geoMercator() | |
.scale(2000) | |
.center([-98.90, 31.96]); | |
var path = d3.geoPath() | |
.pointRadius(1) | |
.projection(projection); | |
//projection.fitSize([width, height], object); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
// Threshold colors scale | |
var threshold = d3.scaleThreshold() | |
.domain([1, 10, 50, 200, 800, 2000, 5000, 10000]) | |
.range(d3.schemeOrRd[9]); | |
// Set the variables containing URLs for the data | |
var url = "https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson"; | |
var TEX = "https://raw.githubusercontent.com/li01012/classes/master/Project/Final_Texas_Data.csv"; | |
// NEW: Load the data with d3.queue() | |
d3.queue() | |
.defer(d3.json, url) | |
.defer(d3.csv, TEX) | |
.await(ready); | |
// NEW: processing both data sources in the single function "ready" | |
function ready(error, tx, csv) { | |
if (error) console.log(error); | |
// Look at these in the developer console | |
console.log("csv[0]", csv[0]) | |
console.log("tx.features", tx.features[0]) | |
// Create a d3.map() that will be used to query CSV data by county FIPS | |
var data = d3.map(); | |
csv.forEach(function(d) { data.set(d.FIPS, d)}) | |
svg.append("g").selectAll("path") | |
.data( tx.features ) | |
.enter().append("path") | |
.attr("d", path) | |
.attr("class", "county") | |
.attr("stroke", "black") | |
.attr("stroke-width", 1) | |
// Mouseover function | |
.on('mouseover', function(d, i) { | |
d3.select(this).attr('stroke-width', 2).raise() | |
d3.select(".info").html("<br>County Name: "+ d.properties.COUNTY | |
+ "<br>Population Density: " | |
+ d3.format(",d")(data.get(d.properties.FIPS).POP_2016)+ "<br>Cancer-Incident Rate: " + d3.format(",d")(data.get(d.properties.FIPS).Average_An)) | |
}) | |
.on('mouseout', function(d) { | |
d3.select(".info").html("") | |
d3.select(this).attr('stroke-width', 0.5) | |
}) | |
//function for Threshold | |
.style("fill", function(d) { return threshold(data.get(d.properties.FIPS).Average_An); }); | |
addLegend(); | |
} | |
function addLegend() { | |
var formatNumber = d3.format("d"); | |
var x = d3.scalePow().exponent('.15') | |
.domain([1, 80000]) | |
.range([0, 300]); | |
var xAxis = d3.axisBottom(x) | |
.tickSize(13) | |
.tickValues(threshold.domain()) | |
.tickFormat(formatNumber) | |
var g = svg.append("g") | |
.attr('transform', 'translate(3, 50)') | |
.call(xAxis); | |
g.select(".domain") | |
.remove(); | |
g.selectAll("rect") | |
.data(threshold.range().map(function(color) { | |
var d = threshold.invertExtent(color); | |
if (d[0] == null) d[0] = x.domain()[0]; | |
if (d[1] == null) d[1] = x.domain()[1]; | |
return d; | |
})) | |
.enter().insert("rect", ".tick") | |
.attr("height", 12) | |
.attr("x", function(d) { return x(d[0]); }) | |
.attr("width", function(d) { return x(d[1]) - x(d[0]); }) | |
.attr("fill", function(d) { return threshold(d[0]); }); | |
g.append("text") | |
.attr("fill", "#000") | |
.attr("font-weight", "bold") | |
.attr("text-anchor", "start") | |
.attr("y", -6) | |
.text("Rate of Cancer Incidents"); | |
} | |
function mousemoved() { | |
info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); | |
} | |
function formatLocation(p, k) { | |
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); | |
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " | |
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment