Skip to main content
SimilarExport ZIP
100%

basic map

✓ Published0🌍 Public
AAkshita Shukla
Last edited Nov 30, 2021
Created on Nov 25, 2021

This visualization displays a choropleth map of Palghar district's blocks, colored by a metric from a CSV file. It uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON polygons. The map shows block names as labels, and hovering over a region displays a tooltip with the block name and its corresponding value. The code also incorporates a zoom feature and reads data from `block.geojson` and `data.csv` using `d3.json` and `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

basic map

This choropleth map shows block-level data for the Palghar district, with each polygon colored green, yellow, or red based on the value of the `c1` attribute from a CSV file. Hovering over a region triggers a tooltip displaying the block name and its stunted child percentage. Built with D3 v5, the visualization uses `d3.geoMercator` and `d3.geoPath` to project GeoJSON shapes and renders SVG paths with a zoom transform. Data is joined by matching the `Block` names between the CSV and GeoJSON properties.

AAnimesh Nautiyal
90% match
Loading thumbnail…

Map making

This interactive SVG map displays administrative blocks in the Palghar district, with each region rendered as a red path using D3’s `geoMercator` projection and `geoPath` generator. The map supports zoom and pan through D3’s `zoom` event, transforming the group element. Block boundaries come from `block.geojson`, while the accompanying `data.csv` provides block names and two numeric columns, though the visualization currently styles all shapes uniformly rather than encoding these values.

SShweta-tech
86% match
Loading thumbnail…

static map+color+tooltip+label

This example presents a static choropleth map of Palghar district blocks, colored by the "c1" attribute from a CSV file joined to GeoJSON boundaries. It uses d3.geoPath and d3.geoMercator to render the polygons, with a custom color scale dividing values into red, yellow, and green ranges. Hovering over a block triggers a tooltip via d3.select and d3.event, showing the block name and c1 value. Block labels are positioned at polygon centroids using pathGenerator.centroid, and the map supports zooming through d3.zoom.

AAnimesh Nautiyal
84% match
Loading thumbnail…

Map drill down

This example demonstrates a drill-down choropleth map of Palghar district blocks, colored by data values from an external CSV. It shows a tooltip on hover and supports pan/zoom interaction. Built with D3 v5, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to render and manipulate SVG paths from GeoJSON data, while `d3.csv` and `d3.json` merge the dataset with geographic boundaries.

AAnimesh Nautiyal
81% match
Loading thumbnail…

map-other-density

This example displays a choropleth map of eight blocks in Palghar district, India, using SVG paths rendered via `d3.geoPath` with a `geoMercator` projection. The map shows the percentage of stunted children per block, with fill patterns generated using the textures library and a slider to adjust classification thresholds. A tooltip appears on mouseover, and zooming is enabled through `d3.zoom`. Data is loaded from a CSV file and joined to GeoJSON features.

Zzoniyac
79% match
Loading thumbnail…

map-other-size

This example shows a choropleth map of Palghar district blocks, using texture patterns to encode the percentage of stunted children. A slider filters the displayed range, and hovering over a block reveals its name and value in a tooltip. The visualization merges block-level GeoJSON with CSV data, then renders it using D3’s `geoMercator` projection and `geoPath`. Interactive brushing and zooming are enabled, with textures generated via the `textures` library to differentiate value bands, and transitions animate the fill changes.

Zzoniyac
77% match
Loading thumbnail…

map with categaory

This example displays a choropleth map of Palghar district blocks, colored by two quantitative categories (c1 and c2) selectable via a dropdown menu. The map renders GeoJSON polygons using `d3.geoPath` and `d3.geoMercator`, with colors assigned by dividing each category’s range into three bins (red, yellow, green). A tooltip appears on hover, and both the map and dropdown are animated with `d3.transition`. Zooming is enabled via `d3.zoom`, and data from a CSV file is joined to the GeoJSON.

AAnimesh Nautiyal
77% match
Loading thumbnail…

dynamic map

This dynamic map visualizes child malnutrition metrics across eight blocks in Palghar, India, using a color-coded choropleth. The map displays the number of moderately stunted children per block, with red, yellow, and green fills indicating low, medium, and high values. Users can hover over blocks to see a tooltip with the block name and stunted child count. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` for rendering GeoJSON polygons, and zoom functionality. It supports monthly data switching from a CSV file, updating the block colors accordingly.

SSrishti2398
75% match