Skip to main content
SimilarExport ZIP
100%

static map range slider

✓ Published1🌍 Public
AAnimesh Nautiyal
Last edited Mar 1, 2023
Created on Feb 26, 2020

A static map of Palghar district blocks is colored by a percentage value from a CSV dataset, with each block labeled and hoverable to reveal tooltip details. A range slider controls the color thresholds, recoloring the map via transitions. The visualization uses D3 v5 with `geoMercator` and `geoPath` for the GeoJSON projection, `d3.slider` for the range input, and SVG rendering for both the map and slider elements.

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

dynamic monthwise map

This dynamic map shows child health indicators across blocks in Palghar district, India, with a dropdown to switch between months (August, September, October) and a second dropdown to toggle between severely stunted and stunted children counts. The choropleth colors each block red, yellow, or green based on the selected metric’s value relative to a three-tier scale, and hovering reveals a tooltip with additional percentages for stunting, underweight, and low birth weight. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection, `d3.csv` and `d3.json` for data loading, and `d3.event` for mouse interaction, rendering features as SVG paths with zoom support via `d3.zoom`. The monthly CSV data is merged into the GeoJSON features by block name before rendering, with colors recalculated on selection change.

AAnimesh Nautiyal
74% 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
74% 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
74% 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
73% match