Built with blockbuilder.org
Last active
May 25, 2017 20:34
-
-
Save qaisarmehmood/969ed645a4692403060644aaa03b90e6 to your computer and use it in GitHub Desktop.
thursday
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="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"> | |
<defs> | |
<filter id="blur"> | |
<feGaussianBlur stdDeviation="5"></feGaussianBlur> | |
</filter> | |
</defs> | |
</svg> | |
<div class="info" style="position: absolute; top: 20px; left: 20px"></div> <!-- NEW --> | |
<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> | |
// 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([0, 1, 1.5, 4, 5, 6, 8, 10 ]) | |
.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); | |
addLegend(); | |
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(counties) | |
.enter().append ("path") | |
.attr("d", path) | |
.style("fill", function(d) { return threshold(data.get(d.id) ? data.get(d.id).Percent : null); }) | |
// Get New York counties | |
// 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("d", path) | |
.attr("class", "county") | |
.attr("stroke", "#8c8c8c") | |
.attr("stroke-width", 1) | |
.on('mouseover', function(d, i) { | |
// d3.select(this).attr('fill', 'crimson'); | |
d3.select(this).attr('stroke-width', 2).raise() | |
console.log(d.id, data.get(d.id)); | |
d3.select(".info").html(data.get(d.id)["County Name"] + | |
"<br>Percent: " | |
+ d3.format(",d")(data.get(d.id).Percent)) | |
}) | |
.on('mouseout', function(d) { | |
//d3.select(this).attr('fill', '#fff'); | |
d3.select(".info").html("") | |
d3.select(this).attr('stroke-width', 0.5) | |
}); | |
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))); | |
projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork }); | |
// 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"); | |
} | |
function addLegend() { | |
var formatNumber = d3.format("d"); | |
var x = d3.scalePow().exponent('.15') | |
.domain([1, 10]) | |
.range([0, 300]); | |
var xAxis = d3.axisBottom(x) | |
.tickSize(13) | |
.tickValues(threshold.domain()) | |
.tickFormat(formatNumber) | |
var g = d3.select('svg') | |
.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> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment