map-other-size

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.

90% match

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.

86% match

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.

map-line-density

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.

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.

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.