Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
SShweta-tech
Last edited Nov 24, 2020
Created on Nov 24, 2020
Forked from HTML Starter

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.

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 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
78% 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
78% 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
77% 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
77% 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
76% match
Loading thumbnail…

Map

This visualization displays a map of Maharashtra, India, using geographic data from a local GeoJSON file (`taluka_maha.geojson`). The map renders administrative boundaries as SVG paths, which are drawn using D3’s `d3.geoPath()` with a `d3.geoMercator()` projection. Although a `schooltype.json` file containing school points is present in the project, the code only loads and draws the map boundaries, not the school locations. The visualization is built within a React framework, though the current implementation uses plain D3 v5 to append an SVG element to a container div, with a fixed viewBox of 1400×700 pixels.

SShweta-tech
73% match
Loading thumbnail…

Untitled

This interactive map visualizes the locations of healthcare facilities across Mumbai, Maharashtra, plotted as points on a geographic basemap. The visualization uses React to render the interface, with the underlying map and point placement powered by D3.js’s `d3.geoPath` and map projection utilities. The facility addresses are geocoded from a CSV file using the Google Geocoding API, with latitude and longitude coordinates stored in the dataset. A filtering control likely allows users to explore facility types or regions, though the primary view shows the spatial distribution of hospitals and clinics across the city.

SShweta-tech
73% match
Loading thumbnail…

Untitled

This example shows a world map colored by population data, though the color encoding is incomplete as the code only logs country IDs to the console instead of applying the fill. It uses D3 v4 with `d3.geoMercator` projection, `d3.geoPath` for rendering countries as SVG paths, and a `d3.scaleThreshold` with `d3.schemeBlues` for potential color mapping. The external data includes a GeoJSON world topology and a CSV of country population values, loaded asynchronously via `d3.queue`. The map is rendered as an SVG element with a fixed width and height.

Yyvesponcon
73% match