Map drill down

100%

Map drill down

✓ Published0🌍 Public

Last edited Feb 28, 2020

Created on Feb 28, 2020

Forked from static map+color+tooltip+label

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.

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…

first level drilldown

This example demonstrates a hierarchical drilldown of geographic data using the D3.js library, showing districts, projects, and beats in the Palghar region of India. Clicking on a district zooms into the selected area by fetching a new GeoJSON file and redrawing the map with the corresponding sub-regions. The visualization uses `d3.geoMercator` for map projection, `d3.geoPath` for rendering geometries, and `d3.zoom` to handle pan and zoom interactions. A "back" button resets the view to the full district map.

AAnimesh Nautiyal

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

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

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

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

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

78% match