Built with blockbuilder.org
Last active
May 24, 2017 10:58
-
-
Save qaisarmehmood/e7434a5474edec3115250a6151c23b5f to your computer and use it in GitHub Desktop.
trying to display Percent on newyork map
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 </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); | |
addLegend(); | |
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.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("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) | |
}); | |
// 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))); | |
// 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; }))); | |
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