Skip to main content
SimilarExport ZIP
100%

first level drilldown

✓ Published0🌍 Public
AAkshita Shukla
Last edited Dec 7, 2021
Created on Nov 28, 2021

A choropleth map of municipal ward 61 visualizes waste generation data, initially displaying aggregated totals for regions like ANAND NAGAR and Tarapore Garden. Clicking a region triggers a smooth zoom animation that drills down to show individual building clusters within that area, colored by their respective waste output. The visualization uses D3.js v5 with `d3.geoPath`, `d3.geoMercator`, and `d3.zoom` to render GeoJSON boundaries and enable the interactive transition. It merges CSV waste metrics with geographic features to drive the color scale and drilldown logic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes building-level waste data in Ward 61, Mumbai, using Leaflet and D3.js. Orange circle markers represent buildings, with popups displaying population and waste metrics from local GeoJSON data. A feature links buildings to waste collection gates via a JSON mapping file; selecting a gate highlights associated buildings in black. The visualization fetches geographic and attribute data from GeoNode WFS services and OpenStreetMap tiles.

AAngel Alfredo
76% match
Loading thumbnail…

Fork of Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation for ward 61 in Mumbai, overlaying building-level dry/wet waste data and population from a GeoServer WFS feed onto an OpenStreetMap basemap using Leaflet. The visualization distinguishes buildings linked to specific waste-collection gates, coloring those associated with a selected gate black while others remain orange. D3.js fetches the GeoJSON building, gate, and mapping data asynchronously, while Leaflet's `geoJSON` and `circleMarker` functions render the spatial layers with popups showing per-building waste statistics.

Vvipin kumar paikra
76% match
Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map displays building-level waste generation data in a Mumbai ward, using Leaflet to render an OpenStreetMap base layer with circle markers. Each building marker is color-coded and clickable, revealing a popup with population, dry waste, wet waste, and total waste values from GeoJSON fetched via D3.js. The visualization overlays building-to-gate mapping data, highlighting which buildings are connected to specific waste collection gates. The code uses `d3.json` to load GeoJSON data from a GeoNode WFS service and a GitHub-hosted mapping file, with Leaflet's `L.geoJSON` handling dynamic styling and interactive popups.

AAndre J Denais
75% match
Loading thumbnail…

Waste-Aggregation by gates

This interactive map visualizes waste aggregation across buildings and gates in a ward of Mumbai. It uses Leaflet with tile layers from OpenStreetMap, and fetches GeoJSON data for buildings, gates, and their mappings via D3’s `d3.json`. Building circles show population and waste metrics in popups, while clicking a gate re-renders the building layer with a custom styling function that highlights buildings linked to that gate in black, using data from a static gate-to-building JSON file. The map initializes at a zoom level of 16 centered on the ward.

AAnimesh Nautiyal
75% match
Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation and building population data across Ward 61, using colored circular markers to represent buildings and their associated waste metrics. The visualization displays building-level details such as dry/wet waste amounts and total population in popups upon clicking. Built with Leaflet for map rendering and D3.js (v5) for fetching GeoJSON data from a GeoNode server, the example layers building and gate locations over OpenStreetMap tiles. It also incorporates a mapping file that links buildings to waste collection gates, allowing for dynamic restyling of markers based on gate assignments.

DDing
75% match
Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation data for buildings in Ward 61, Mumbai, using Leaflet for the base map and D3.js (d3.v5) to fetch GeoJSON data from a GeoNode server. Orange circle markers represent buildings, each with a popup showing population and waste metrics (dry, wet, and total). A linked dataset from a JSON file maps gate IDs to building numbers, allowing the visualization to likely highlight buildings associated with a specific gate by recoloring them black, as demonstrated in the styling function.

MMunisbek-design
75% match
Loading thumbnail…

first level drilldown

This example demonstrates a hierarchical drilldown of geographic data using the D3.js library, showing districts, projects, and beats in the Palghar region of India. Clicking on a district zooms into the selected area by fetching a new GeoJSON file and redrawing the map with the corresponding sub-regions. The visualization uses `d3.geoMercator` for map projection, `d3.geoPath` for rendering geometries, and `d3.zoom` to handle pan and zoom interactions. A "back" button resets the view to the full district map.

AAnimesh Nautiyal
74% match
Loading thumbnail…

test geomercator

This example displays a choropleth map of Mumbai's ward boundaries using a Mercator projection, with ward numbers labeled at each polygon's centroid. The map uses `d3.geoMercator` and `d3.geoPath` to render geographic data loaded from a local GeoJSON file, styling wards in grey or green depending on their `prabhag_no` property. Clicking a highlighted ward opens an external link, demonstrating basic interactivity with SVG event handlers. The visualization applies a custom scale and centering to focus on the city region.

AAnimesh Nautiyal
72% match