| license: mit |
This plot is part of an Assignment conducted for a course in Social Data Visualizations in DTU (Denmarks Unversity of Denmark). It represents data related to complaints in New York City.
- On mouse click the map zooms-in the neighborhood of interest and a tooltip is displaying the total number of complaints and the top complaint for that neighborhood.
- On mouse click on the neighborhood of interest for second time, the maps zooms-out
| // Define global variables | |
| var width_4 = 1000, | |
| height_4 = 800, | |
| centered; | |
| function createNYCMap(){ | |
| // Define the projection boundaries | |
| var projection = d3.geoMercator() | |
| .center([-73.94, 40.70]) | |
| .scale(50000) | |
| .translate([(width_4) / 2, (height_4) / 2]); | |
| // Define the path | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| // Define the div for the tooltip | |
| var div = d3.select("#map_4") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // Define the svg for the map | |
| var svg = d3.select("#map_4") | |
| .append("svg") | |
| .attr("width", width_4) | |
| .attr("height", height_4); | |
| // Define the g for each neighborhood | |
| var g = svg.append("g"); | |
| d3.json("nyc.geojson", function(json) { | |
| g.append("g") | |
| .attr("id", "neighborhood") | |
| .selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .on("click", clicked); | |
| }); | |
| function clicked(d){ | |
| var x, y, k; | |
| // IF zoomed-in state is on | |
| if (d && centered !== d) { | |
| // Change the center of the projection | |
| var centroid = path.centroid(d); | |
| x = centroid[0]; | |
| y = centroid[1]; | |
| k = 4; | |
| centered = d; | |
| // Show tooltip | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| // Write staff on tooltip | |
| div.html("Neighborhood:" + "<strong>" + d.properties.PO_NAME.toLowerCase().toUpperCase() + "</strong>" + "<br/>" + | |
| "Total Number of Complaints:" + '<strong id="frequency"></strong>' + "<br/>" + | |
| "Most Common Complaint:" + '<strong id="districtName"></strong>' | |
| ) | |
| // Place the tooltip | |
| div.style("left", (d3.mouse(this)[0]) + "px") | |
| .style("top", (d3.mouse(this)[1]) + "px"); | |
| // Load CSV for filling the missing info on tooltip | |
| d3.csv("total_neight.csv", function(data) { | |
| var districtName = d.properties.PO_NAME.toUpperCase(); | |
| var matchFound = false; | |
| for(var i=0;i<data.length;i++) { | |
| if (data[i]["City"]==districtName) { | |
| $("#districtName").html(data[i]['top_complaint']); | |
| $("#frequency").html(data[i]['count']); | |
| matchFound = true; | |
| } | |
| } | |
| if (!matchFound) { | |
| $("#districtName").html("No data available"); | |
| $("#frequency").html("No data available"); | |
| } | |
| }); | |
| // IF zoomed-out state is on | |
| } else { | |
| x = width_4 / 2; | |
| y = height_4 / 2; | |
| k = 1; | |
| centered = null; | |
| $(".tooltip").css('opacity', 0); | |
| } | |
| // | |
| g.selectAll("path") | |
| .classed("active", centered && function(d) { | |
| return d === centered; | |
| }) | |
| g.transition() | |
| .duration(750) | |
| .attr("transform", "translate(" + width_4 / 2 + "," + height_4 / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") | |
| .style("stroke-width", 1.5 / k + "px"); | |
| } | |
| } | |
| // Load NYC map function | |
| createNYCMap(); |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="main.css"> | |
| </head> | |
| <body> | |
| <div id="map_4"></div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
| <script src="boroughs-zoom.js"></script> | |
| </body> | |
| </html> |
| /*Borough-zoom D3 Visualization*/ | |
| .district-names { | |
| fill: grey; | |
| text-anchor: middle; | |
| } | |
| .background { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| #neighborhood { | |
| fill: #aaa; | |
| } | |
| #neighborhood .active { | |
| fill: orange; | |
| } | |
| #borders { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| pointer-events: none; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: auto; | |
| height: auto; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: lightsteelblue; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } |
| City | count | top_complaint | |
|---|---|---|---|
| CENTRAL PARK | 377 | Noise - Street/Sidewalk | |
| BREEZY POINT | 479 | Construction | |
| QUEENS | 761 | Bridge Condition | |
| NEW HYDE PARK | 1605 | Blocked Driveway | |
| FLORAL PARK | 2787 | Damaged Tree | |
| GLEN OAKS | 7386 | Damaged Tree | |
| ARVERNE | 11008 | Noise - Residential | |
| BELLEROSE | 11430 | Damaged Tree | |
| CAMBRIA HEIGHTS | 12733 | Damaged Tree | |
| ROCKAWAY PARK | 16408 | Noise - Residential | |
| LITTLE NECK | 16628 | Damaged Tree | |
| OAKLAND GARDENS | 16923 | Damaged Tree | |
| KEW GARDENS | 18682 | Noise - Residential | |
| ROSEDALE | 19394 | Noise - Residential | |
| HOWARD BEACH | 20262 | Illegal Parking | |
| SUNNYSIDE | 20860 | Noise - Residential | |
| COLLEGE POINT | 21935 | Blocked Driveway | |
| HOLLIS | 23760 | Noise - Residential | |
| WHITESTONE | 26128 | Illegal Parking | |
| SPRINGFIELD GARDENS | 27455 | Noise - Residential | |
| BAYSIDE | 27733 | Damaged Tree | |
| SAINT ALBANS | 27794 | Noise - Residential | |
| MIDDLE VILLAGE | 28716 | Illegal Parking | |
| REGO PARK | 30099 | Blocked Driveway | |
| RICHMOND HILL | 34660 | Blocked Driveway | |
| MASPETH | 36827 | Illegal Parking | |
| WOODHAVEN | 37866 | Blocked Driveway | |
| FRESH MEADOWS | 38048 | Noise - Residential | |
| JACKSON HEIGHTS | 42508 | Noise - Residential | |
| SOUTH OZONE PARK | 43180 | Noise - Residential | |
| QUEENS VILLAGE | 43911 | Noise - Residential | |
| FOREST HILLS | 44012 | Noise - Residential | |
| LONG ISLAND CITY | 44390 | Illegal Parking | |
| SOUTH RICHMOND HILL | 44837 | Blocked Driveway | |
| EAST ELMHURST | 47955 | Blocked Driveway | |
| FAR ROCKAWAY | 49386 | Noise - Residential | |
| OZONE PARK | 53393 | Blocked Driveway | |
| ELMHURST | 57441 | Noise - Residential | |
| WOODSIDE | 60252 | Blocked Driveway | |
| CORONA | 68069 | Blocked Driveway | |
| RIDGEWOOD | 90452 | Blocked Driveway | |
| ASTORIA | 122969 | Blocked Driveway | |
| FLUSHING | 133531 | Blocked Driveway | |
| JAMAICA | 177686 | Noise - Residential | |
| STATEN ISLAND | 323554 | Noise - Residential | |
| BRONX | 1472636 | Noise - Residential | |
| NEW YORK | 1518177 | Noise - Residential | |
| BROOKLYN | 2393479 | Noise - Residential |