Skip to main content
SimilarExport ZIP
100%

Fork of Waste-Aggregation by gates

✓ Published0🌍 Public
DDing
Last edited Oct 16, 2022
Created on Oct 16, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
93% match
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
93% 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
91% 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
91% 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
89% match
Loading thumbnail…

first level drilldown

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.

AAkshita Shukla
75% match
Loading thumbnail…

map

This example visualizes building and gate locations on an interactive map of Mumbai, using Leaflet to render the base tiles and D3.js to fetch geospatial data from GeoServer via Web Feature Service (WFS). It displays building population and waste generation metrics as interactive circle markers with popups, and color-codes buildings based on their association with specific gates. The map also supports dynamic re-rendering to highlight buildings linked to selected gates, using custom Leaflet icons and D3-based GeoJSON processing for data manipulation.

Ssamayayendiaye01@gmail.com
75% match
Loading thumbnail…

Untitled

This example visualizes municipal waste segregation data for three lanes in Mumbai, overlaying lane polygons on a map with a dark fill and white borders. The map uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON features from `dummy_lane_polygon_swk.json`. A related CSV file `dummytracksheet.csv` provides daily tracking metrics such as houses reached and dry/wet waste amounts, though the visible code loads the data without drawing the linkage lines. The visualization is built with D3 v4 and React, rendering to an SVG element.

SShweta-tech
72% match