Built with blockbuilder.org
Last active
May 24, 2017 21:40
-
-
Save qaisarmehmood/53c7fc8785050fe24825f0013238055d to your computer and use it in GitHub Desktop.
wednesday
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>US Counties</title> | |
| <svg width="960" height="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></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([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(); | |
| 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.FIPS)); | |
| }); | |
| // 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, 80000]) | |
| .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