Untitled

100%

✓ Published0🌍 Public

Last edited Apr 22, 2020

Created on Apr 22, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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 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

73% match

Loading thumbnail…

Public Health Facilities in India

This animated visualization displays Indian states ranked by the number of public health facilities, using circles sized proportionally to facility counts. The circles grow sequentially from zero to their final radius, with state names and facility totals appearing above and below each point. Built with D3.js, the code leverages the `select` and `transition` APIs to orchestrate staggered entrance animations, while the underlying data comes from the Hospital Beds India dataset. The visualization employs a row layout with positioned SVG circles and text elements, creating a clear, comparative overview of healthcare infrastructure across eight major states.

Nnitinramagiri1@gmail.com

71% 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

70% match

Loading thumbnail…

Map

This visualization displays a geographic map of India and surrounding regions using a Mercator projection, centered on coordinates [77, 19]. The map renders GeoJSON features as SVG paths, with continents outlined in gray and specific school-type locations highlighted in blue. Built with D3 v5, the code uses `d3.geoMercator()` for projection and `d3.geoPath()` for path generation. The visualization loads data from a local GeoJSON file and renders at a fixed viewBox size of 1400 by 700 pixels.

SShweta-tech

69% match

Loading thumbnail…

Untitled

This example displays an interactive map of India centered at latitude 19 and longitude 77, using the Leaflet library to render OpenStreetMap tiles. The map initializes with a zoom level of 20 before immediately adjusting to zoom level 6 via the `setZoom` method, revealing a broad regional view. A tile layer from OpenStreetMap provides the geographic background, with attribution included. The visualization demonstrates basic map setup and dynamic zoom control within a minimal HTML page using CSS for layout and JavaScript for interactivity.

DDattatrayPatil73076

69% match

Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83

68% match

Loading thumbnail…

Sized Points on a Map

The map displays hospital beds per 1000 people, with each city represented by a circle whose area is proportional to the value. The geographic context is drawn using `d3.geoPath` with a `geoNaturalEarth1` projection, incorporating graticules, land masses, and country interiors. City data is loaded via `d3.csv` and scaled using `scaleSqrt`. The visualization is rendered in a React component, producing SVG marks over a subtle, polished basemap sourced from the World Atlas TopoJSON.

IIris Lin

68% match