Skip to main content
SimilarExport ZIP
100%

Map making

✓ Published0🌍 Public
SShweta-tech
Last edited Feb 20, 2020
Created on Feb 20, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
86% 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
85% 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
79% 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
78% 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
77% match
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
76% match
Loading thumbnail…

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
75% match
Loading thumbnail…

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
75% match