A colony map depicting langauge spoken in the home where English is spoken less than "very well." Map has pan and zoom functionality. Data are from the 2015 American Community 5-year estimates Table B16001 available from the US Census Bureau API. The data were processed in R and visualized using D3.js.
Last active
April 27, 2017 20:11
-
-
Save gmculp/6df57a077a226d358dfdd32511a0d049 to your computer and use it in GitHub Desktop.
Colony map of language spoken in the home.
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"> | |
| <style> | |
| .background { | |
| fill: none; | |
| } | |
| #nta { | |
| fill: #ebebeb; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| #nta .active { | |
| fill: #f7f7f7; | |
| } | |
| #nta-openspace { | |
| fill: #d9d9d9; | |
| } | |
| #nta-borders { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .map_sub_div { | |
| display: inline-block; | |
| overflow:hidden; | |
| } | |
| #map_div { | |
| width: 70%; | |
| } | |
| #legend_div { | |
| width: 30%; | |
| } | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .legend_title { | |
| font-weight: bold; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <body> | |
| <div class ="map_sub_div" id = "map_div"></div><div class ="map_sub_div" id = "legend_div"></div> | |
| <script> | |
| var legend_label1 = "Language spoken at home"; | |
| var legend_label2 = "1 dot represents 150 people"; | |
| //declare dimensions of page | |
| //scale based on window width | |
| var w = ($( window ).height()/850)>1?1:$( window ).height()/850; | |
| var width = w*800, | |
| height = w*800, | |
| scale0 = (width - 1) / 2 / Math.PI; | |
| var projection = d3.geo.albers(); | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, 8]) | |
| .on("zoom", zoomed); | |
| var path = d3.geo.path().projection(projection); | |
| var svg = d3.select("#map_div").append("svg") | |
| .attr("width", width) | |
| .attr("height", height).append("g"); | |
| var g = svg.append("g"); | |
| svg.append("rect") | |
| .attr("class", "overlay") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.call(zoom).call(zoom.event); | |
| var svg2 = d3.select("#legend_div").append("svg") | |
| .attr("width", width/2) | |
| .attr("height", height); | |
| var ntaJSON = "http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/arcgis/rest/services/nynta/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson"; | |
| var nta_arr = ['MN99','BK99','QN98']; | |
| //var color = d3.scale.category20(); | |
| var color = d3.scale.ordinal().range(["#A3DAFF","#1C1C1C","#FFC8A3","#0099FF","#FF6600","#006AB0","#AD4500","#003A61","#878787","#5E2600"]); | |
| var pt_csv = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/test_pts.csv"; | |
| $.getJSON(ntaJSON, function (json) { | |
| d3.csv(pt_csv, function(data) { | |
| //set the projection | |
| set_projection(projection, path, json, width, height); | |
| var w_dif = (Math.abs(projection([data[0].longitude,data[0].latitude])[0] - projection([data[1].longitude,data[1].latitude])[0]))*6; | |
| //add NTA layer to map | |
| g.append("g") | |
| .attr("id", "nta") | |
| .selectAll("path") | |
| .data(json.features.filter(function (d) { return nta_arr.indexOf(d.properties.NTACode) === -1;})) | |
| .enter().append("path") | |
| .attr("d", path); | |
| //.on("click", clicked); | |
| g.append("g") | |
| .attr("id","nta-openspace") | |
| .selectAll("path") | |
| .data(json.features.filter(function (d) { return nta_arr.indexOf(d.properties.NTACode) > -1;})) | |
| .enter().append("path") | |
| .attr("d", path); | |
| // add circles to svg | |
| g.append("g") | |
| .attr("id","dotz") | |
| .selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("cx", function (d) { return projection([d.longitude,d.latitude])[0]; }) | |
| .attr("cy", function (d) { return projection([d.longitude,d.latitude])[1]; }) | |
| .attr("r", w_dif+"pt") | |
| .style("fill", function(d) { return color(d.var_name);}) ; | |
| // draw legend | |
| var leg_g = svg2.append("g"); | |
| var leg_text = leg_g.append("text").attr("class","legend_title"); | |
| leg_text.append('tspan') | |
| .text(legend_label1) | |
| .attr("x", 0) | |
| .attr("dy", 20); | |
| leg_text.append('tspan') | |
| .text(legend_label2) | |
| .attr("x", 0) | |
| .attr("dy", 20); | |
| var legend = leg_g.selectAll(".legend") | |
| .data(color.domain()) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(0," + ((i * 25)+50) + ")"; }); | |
| legend.append("circle") | |
| .attr("cx", 18) | |
| .attr("cy", 18) | |
| .attr("r", "4pt") | |
| .style("fill", color); | |
| // draw legend text | |
| legend.append("text") | |
| .attr("x", 30) | |
| .attr("y", 20) | |
| //.attr("dy", ".35em") | |
| .style("text-anchor", "start") | |
| .text(function(d) { return d;}); | |
| }); | |
| }); | |
| function zoomed() { | |
| g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| } | |
| function set_projection(projection, path, json, map_width, map_height) { | |
| //console.log("test2"); | |
| //reset projection | |
| projection | |
| .scale(1) | |
| .translate([0, 0]); | |
| //adjust projection to zoom in on NYC | |
| var this_c = d3.geo.centroid(json); | |
| //first rotate projection to NYC | |
| projection | |
| .rotate([(this_c[0] * -1), 0]) | |
| .center([0, this_c[1]]) | |
| .precision(.1); | |
| var b = path.bounds(json), | |
| s = .95 / Math.max((b[1][0] - b[0][0]) / map_width, (b[1][1] - b[0][1]) / map_height), | |
| t = [(map_width - s * (b[1][0] + b[0][0])) / 2, (map_height - s * (b[1][1] + b[0][1])) / 2]; | |
| //then set scale and center | |
| projection | |
| .scale(s) | |
| .translate(t); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment