Last active
October 8, 2016 21:50
-
-
Save feyderm/6979f8b312ecdb0fdbe021ad22616ae3 to your computer and use it in GitHub Desktop.
Geographic, interactive scatterplot
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| #tooltip { | |
| font-family: sans-serif; | |
| color: #454545; | |
| } | |
| h3, h5 { | |
| margin: 0; | |
| } | |
| </style> | |
| <script src = "https://feyderm.github.io/d3/d3.js"></script> | |
| </head> | |
| <body> | |
| <div id = "tooltip"> | |
| <h3><span id = "neighborhood"> </span></h3> | |
| <h5><span id = "datum"> </span></h5> | |
| </div> | |
| <div id="block"></div> | |
| <script> | |
| var h = 700; | |
| var w = 700; | |
| var projection = d3.geo.mercator() | |
| .center([-76.612223, 39.294504]) | |
| .scale([150000]) | |
| .translate([310, 290]); | |
| var comma_format = d3.format(","); | |
| var svg = d3.select("#block") | |
| .append("svg") | |
| .attr("height", h) | |
| .attr("width", w); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var basemap = svg.append("g"); | |
| var points = svg.append("g"); | |
| // load map; ref [1] | |
| var map = d3.json("https://feyderm.github.io/data/Baltimore_vacant_buildings_Shape.geojson", function(json) { | |
| // basemap for point plot | |
| basemap.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("stroke", "grey") | |
| .attr("fill", "white") | |
| .on("mouseover", function(d){ | |
| // neigborhood fill | |
| d3.select(this) | |
| .attr("fill", "rgb(243, 100, 42)"); | |
| // neighborhood name | |
| d3.select("#neighborhood") | |
| .text(d.properties.csa); | |
| // neigborhood data | |
| d3.select("#datum") | |
| .text(function() { | |
| var count = parseFloat(d.properties.vacant_buildings); | |
| return comma_format(count) + " vacant buildings"; | |
| }); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this) | |
| .transition() | |
| .duration(50) | |
| .attr("fill", "white"); | |
| d3.select("#neighborhood") | |
| .text("\u00A0"); // Unicode equivalent of HTML   | |
| d3.select("#datum") | |
| .text("\u00A0"); | |
| }); | |
| }); | |
| var vacancy = d3.csv("https://feyderm.github.io/data/Baltimore_vacant_buildings.csv", function(data) { | |
| data.forEach(function(d) { | |
| d.latitude = +d.latitude; | |
| d.longitude = +d.longitude; | |
| }); | |
| // plot points | |
| points.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return projection([d.latitude, d.longitude])[0]; }) // project lat | |
| .attr("cy", function(d) { | |
| return projection([d.latitude, d.longitude])[1]; }) // project lng | |
| .attr("r", 1) | |
| .attr("fill", "black") | |
| .style("opacity", 0.35) | |
| .style("pointer-events", "none"); | |
| }); | |
| // references | |
| // [1] https://data.baltimorecity.gov/Neighborhoods/Crime-Safety-2010-2012-Shape/bywi-mtiu | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment