basic map

basic map

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

AAkshita Shukla

90% match

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.

87% match

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

85% match

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.

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.

map-line-density

This example visualizes the percentage of stunted children across administrative blocks in Palghar, India, using a choropleth map. The map renders GeoJSON polygon boundaries with d3.geoPath and a Mercator projection, while fill patterns from textures.lines encode the data values. An interactive range slider, built with d3-simple-slider, dynamically adjusts the classification thresholds, triggering a CSS transition to recolor the map. Hovering over a block displays its name and value in a tooltip, with data sourced from a CSV file and joined to the GeoJSON features.

Zzoniyac

map-line-density

Zzoniyac

level 1 with all features

This visualization shows a choropleth map of Palghar district, India, displaying nutritional indicators for children across administrative blocks and projects. Users can switch between seven categories, including stunting, wasting, and underweight rates, using a dropdown menu. A slider filters the color scale to focus on specific value ranges, while hovering reveals tooltips with region names and percentages. The map uses D3 v5 with a Mercator projection and `d3.geoPath` to render GeoJSON data. SVG polygons and text labels animate color changes and update values when switching indicators, with zoom support for detailed inspection.