Created
May 1, 2020 15:30
-
-
Save jchakko/d5c09de9a313bd5685196724f7365319 to your computer and use it in GitHub Desktop.
Manhattan Locations
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
| p_year | name | coordinates | address | desc | |
|---|---|---|---|---|---|
| 2015 | The Hotel Chelsea | 40.744836, -73.996822 | West 23rd Street & 7.5th Ave | Jackson Elias was slain here in room 410 | |
| 2015 | Prospero House | 40.747151, -73.979018 | Lexington Ave & 35th Street | Man with the bulbous frame | |
| 2015 | New York Times | 40.757645, -73.987413 | 229 West 43rd Street | Rebecca Shosenberg's Office | |
| 2015 | Carlton's Office | 40.807142, -73.946050 | 124th Street and Lenox | Unlimited funds, no oversight | |
| 2015 | Emerson Imports | 40.764639, -73.998006 | 648 West 47th Street | idr | |
| 2015 | Lafayette Theater | 40.813380, -73.944936 | 132nd Street & 7th Ave | Mille Adams meetpoint |
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
| <html> | |
| <header> | |
| <title>A Dish Best Served Cold</title> | |
| </header> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 240px; | |
| height: 50px; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: lightblue; | |
| border: 0px; | |
| pointer-events: none; | |
| } | |
| svg { | |
| display: block; | |
| margin: auto; | |
| border: 1px solid gray; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id = "visualization" align="center"> | |
| <h2>A Dish Best Served Cold</h2> | |
| <script> | |
| let width = 600; | |
| let height = 800; | |
| let svg = d3.select("#visualization").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| svg.append("rect") | |
| .attr("width",width) | |
| .attr("height",height) | |
| .style("fill","green") | |
| .style("opacity", 0); //Background best practice | |
| let div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| Promise.all([ | |
| d3.json("manhattan_boundaries.json"), | |
| d3.csv("golo.csv") | |
| ]).then(function(data){ | |
| let geoJsonData = data[0]; | |
| let windData_10 = data[1]; | |
| let projection = d3.geoAlbers(); | |
| projection.fitSize([width, height],geoJsonData); | |
| let pathGenerator = d3.geoPath().projection(projection); | |
| <!-- Append map of United States --> | |
| svg.append('g') | |
| .selectAll('path') | |
| .data(geoJsonData.features) | |
| .enter() | |
| .append('path') | |
| .attr('d', pathGenerator) | |
| .style("fill", "black") | |
| .style("stroke", "white") | |
| .on("mouseover", function(d,i) { | |
| console.log(i); | |
| }); | |
| function addturbines(g, data, projection, color, opacity) { | |
| g.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d,i) { | |
| let dong = d.coordinates; | |
| let something = dong.split(", "); | |
| dong = something.reverse(); | |
| let coordinates = projection(dong); | |
| return coordinates[0]; | |
| }) | |
| .attr("cy", function(d,i) { | |
| let dong = d.coordinates; | |
| let something = dong.split(", "); | |
| dong = something.reverse(); | |
| let coordinates = projection(dong); | |
| return coordinates[1]; | |
| }) | |
| .attr("r", "5px") | |
| .attr("fill", color) | |
| .style("opacity", 1) | |
| .on("mouseover", function(d) { | |
| console.log(d); | |
| div.style("opacity", .9); | |
| div.html(d.name + "</br>" + | |
| d.address + "</br>" + | |
| d.desc) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px");; | |
| }) | |
| .on("mouseout", function(d) { | |
| div.style("opacity", 0); | |
| }); | |
| } | |
| let dots_10 = svg.append('g'); | |
| addturbines(dots_10, windData_10, projection, "#00ff19", 0.5); | |
| }) //End of Promise | |
| </script> | |
| <div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment