Skip to main content
SimilarExport ZIP
100%

map-other-density

✓ Published1🌍 Public
Zzoniyac
Last edited Apr 30, 2020
Created on Apr 30, 2020
Forked from map-line-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.

AI-generated description
MIT Licensed

Similar vizzes

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

map-dot-density

This map shows the percentage of stunted children across eight blocks in Palghar, India, using a choropleth coloration over administrative boundaries. The visualization is implemented with D3 v5, projecting the GeoJSON geometry using `geoMercator` and rendering the polygons with `geoPath`. A slider, from `d3-simple-slider`, adjusts the color scale bins, while textures from the `textures` library are applied to the SVG. Hovering over a block reveals a tooltip with the exact percentage.

Zzoniyac
90% 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
89% 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
89% match
Loading thumbnail…

map-dot-density

This example visualizes the prevalence of stunted children across eight blocks in Palghar, India, using a dot-density map. It displays the geographic boundaries of each block, filled with a texture pattern that varies based on the percentage of stunted children, and includes an interactive slider to filter the data range. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to project GeoJSON boundaries, while the `textures` library generates circle and line patterns for the fills. A tooltip appears on mouseover to show the block name and its stunted child percentage.

Zzoniyac
88% match
Loading thumbnail…

map-line-size

This example visualizes stunted child percentages across administrative blocks in Palghar, India, using a choropleth map. A slider allows users to adjust the classification range, dynamically recoloring regions with textured diagonal lines of varying stroke widths. The map uses d3.geoMercator and d3.geoPath to project GeoJSON boundaries, while d3.csv-joined data drives the fill logic. Interactive features include zooming via d3.zoom, hover tooltips, and smooth transition animations on slider input. The textures library creates the line patterns, and Bootstrap styles the slider interface.

Zzoniyac
85% match
Loading thumbnail…

test texture.js

A choropleth map of Palghar district, India, uses SVG paths from `d3.geoPath` to show the percentage of stunted children per block. Each polygon’s fill is a texture pattern from the `textures` library, with stroke width varying by value. A range slider (from `d3-simple-slider`) filters the choropleth by adjusting low/high thresholds, triggering an animated `transition` on the fills. Tooltips display block names and exact percentages on hover.

Zzoniyac
84% 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
80% match