map with categaory

100%

map with categaory

✓ Published0🌍 Public

Last edited Feb 26, 2020

Created on Feb 26, 2020

Forked from static map+color+tooltip+label

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.

AI-generated description

MIT Licensed

Similar vizzes

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

83% match

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

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

80% match

Loading thumbnail…

month + category map

A choropleth map of Palghar district highlights child nutrition indicators across eight blocks, with dropdown menus to switch between August, September, and October, and between stunted or severely stunted child counts. The map renders block polygons from a GeoJSON file using d3.geoPath with a Mercator projection, and colors each block red, yellow, or green based on a three-tier threshold. D3 transitions animate the fill changes when a new month or metric is selected, and hovering shows a tooltip with additional stunting, underweight, and low birth weight percentages. Data comes from monthly CSV files merged into the GeoJSON properties.

AAnimesh Nautiyal

79% match

Loading thumbnail…

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

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

76% match

Loading thumbnail…

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.

AAnimesh Nautiyal

76% match

Loading thumbnail…

(info)Level 1 with all features

An interactive choropleth map allows exploration of child malnutrition statistics across administrative levels in Palghar, India. Users select a month and a health category (e.g., severely stunted) from dropdowns to update the map’s color encoding via a color scale. A draggable range slider refines the classification thresholds, while hovering over a polygon reveals a tooltip with the block name and percentage. The map, rendered with SVG paths using `d3.geoMercator` and `d3.geoPath` from topoJSON data, includes an animated transition when the slider changes, with zoom support via `d3.zoom`.

AAnimesh Nautiyal

76% match