Skip to main content
SimilarExport ZIP
100%

map-dot-density

✓ Published2🌍 Public
Zzoniyac
Last edited Jun 1, 2020
Created on Apr 30, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
88% 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
88% 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
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
84% 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
84% 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
82% match
Loading thumbnail…

dynamic map

This dynamic map visualizes child malnutrition metrics across eight blocks in Palghar, India, using a color-coded choropleth. The map displays the number of moderately stunted children per block, with red, yellow, and green fills indicating low, medium, and high values. Users can hover over blocks to see a tooltip with the block name and stunted child count. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` for rendering GeoJSON polygons, and zoom functionality. It supports monthly data switching from a CSV file, updating the block colors accordingly.

SSrishti2398
81% match