Built with blockbuilder.org
Created
May 18, 2017 20:55
-
-
Save qaisarmehmood/bceec737bcf783a8a94c6e20b4b971df to your computer and use it in GitHub Desktop.
displaying Percent
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>NY Counties 3</title> | |
<style> | |
body { | |
margin: 0; | |
background-color: #eee; | |
} | |
.info { | |
position: absolute; | |
top: 50px; | |
left: 50px; | |
} | |
</style> | |
<div class="info"></div> | |
<svg width="960" height="500" stroke-linejoin="round" stroke-linecap="round"> | |
<defs> | |
<filter id="blur"> | |
<feGaussianBlur stdDeviation="5"></feGaussianBlur> | |
</filter> | |
</defs> | |
</svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/topojson-client@3"></script> | |
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script> | |
// This demo modified slightly from https://bl.ocks.org/mbostock/4108203 | |
var svg = d3.select("svg"); | |
var defs = svg.select("defs"); | |
// New York central state plane, EPSG: 2829 | |
// (central meridian = - 76.5833..., latitute of origin = 40) | |
var projection = d3.geoTransverseMercator() | |
.rotate([76 + 35 / 60, - 40]); | |
var path = d3.geoPath() | |
.projection(projection); | |
var threshold = d3.scaleThreshold() | |
.domain([1, 10, 50, 200, 500, 2000, 8000, 30000]) | |
.range(d3.schemeOrRd[9]); | |
// This demo modified slightly from https://bl.ocks.org/mbostock/4108203 | |
var svg = d3.select("svg").append("g") | |
.attr('transform', 'scale(4)translate(-700, -100)'); | |
var path = d3.geoPath(); | |
var filename = "https://raw.githubusercontent.com/qaisarmehmood/umbcvis/master/Newyork.population%20Data.csv" | |
d3.queue() | |
.defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json") | |
.defer(d3.csv, filename) | |
.await(ready); | |
function ready(error, us, csv) { | |
if (error) throw error; | |
console.log('here is the csv data:', csv); | |
var counties = topojson.feature(us, us.objects.counties).features; | |
// Examine one of the county features in the developer console. | |
// The "id" attribute is a 5-digit GEOID (state + county). | |
// See: https://www.census.gov/geo/reference/geoidentifiers.html | |
console.log(counties[0]); | |
// NEW: Create a d3.map() so we can query CSV data by "id" = FIPS code | |
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) | |
.style("fill", function(d) { return threshold(data.get(d.properties.FIPS).Percent); }); | |
// Get New York counties | |
newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; }) | |
svg.selectAll('path.county') | |
.data( newyork ) | |
.enter().append("path") | |
.attr("class", "county") | |
.attr("d", path) | |
.attr('fill', '#fff') | |
.attr("stroke", "#aaa") | |
.attr("stroke-width", 0.5) | |
.on('mouseover', function(d) { | |
console.log(d.id, data.get(d.id)); | |
svg.selectAll('path.county').attr("fill", "#fff"); | |
d3.select(this).attr("fill","crimson"); | |
d3.select(".info").html(data.get(d.id)["County Name"]); | |
}); // NEW | |
svg.append("path") | |
.attr("stroke-width", 0.5) | |
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); | |
svg.append("path") | |
.attr("d", path(topojson.feature(us, us.objects.nation))); | |
addLegend(); | |
} | |
// Plot the boundary of the US | |
svg.append("path") | |
.attr("id", "nation") | |
.attr("d", path(topojson.merge(us, us.objects.counties.geometries))) | |
.attr("stroke", "#000") | |
.attr("stroke-width", 2) | |
// Drop-shadow styling (this is blurred shadow) | |
svg.append("use") | |
.attr("xlink:href", "#nation") | |
.attr("fill-opacity", 0.2) | |
.attr("filter", "url(#blur)"); | |
// Drop-shadow styling (this is white overlay) | |
svg.append("use") | |
.attr("xlink:href", "#nation") | |
.attr("fill", "#fff"); | |
// Plot the state boundaries | |
svg.append("path") | |
.attr("stroke", "#000") | |
.attr("stroke-width", 1) | |
.attr("fill", "none") | |
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a.properties.STATEFP !== b.properties.STATEFP; }))); | |
// Plot the individual counties | |
svg.selectAll('path.county') | |
.data( newyork ) | |
.enter().append("path") | |
.attr("d", path) | |
.attr("class", "county") | |
.attr("stroke", "#aaa") | |
.attr("stroke-width", 1) | |
.each(function(d) { | |
var pop = data.get(d.properties.GEOID); | |
var aland = d.properties.ALAND / 2589975.2356; // area in square miles | |
d.populationDensity = pop / aland; // population per square mile | |
}) | |
.attr("fill", function(d) { return threshold(d.populationDensity); }) | |
.on('mouseover', function(d, i) { | |
d3.select(this).attr('stroke-width', 4).raise() | |
d3.select(".info").html(d.properties.NAME + " County" | |
+ "<br>Population density: " | |
+ d3.format(",d")(d.populationDensity)) | |
}) | |
.on('mouseout', function(d) { | |
d3.select(".info").html("") | |
d3.select(this).attr('stroke-width', 0.5) | |
}); | |
} | |
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(50, 120)') | |
.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", 8) | |
.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("Population per square mile"); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment