Skip to main content
SimilarExport ZIP
100%

Pakistan Districts Map v2

✓ Published0🌍 Public
MMalik Muhammad Ammar
Last edited May 20, 2022
Created on May 20, 2022

This choropleth map visualizes poverty data across Pakistan’s districts, encoding rates through a white-to-red color scale. Users can pan and zoom, and hovering over a district displays its name via a tooltip. The visualization is built with D3 v5 and topojson, converting TopoJSON features into SVG paths with the `geoMercator` projection and `geoPath` generator. District color values are computed by scaling the poverty rate, while zoom interactions are handled through D3’s `zoom` event.

AI-generated description

Bangladesh map interaction with sales data

The problem is to visualize Poverty Data on Bangladesh map.

What I have done:

  • Parsed topoJson Data to generate Map with geoJson from D3.
  • Parsed sales data and maped with each District
  • Constructed String for Hover data
  • Applied Zoom and Drag feature as required

TopoJSON Data for Bangladesh:

https://raw.githubusercontent.com/techslides/D3-Maps/master/data/world/country/Bangladesh.topo.json

Data Source :https://github.com/emon535/bangladesh-geojson/blob/master/povertydataBD.json

Author Profiles:

MIT Licensed

Similar vizzes

Loading thumbnail…

Pakistan Districts Map

A choropleth map of Pakistan highlights every district, colored with a categorical palette, and reveals each district's name on hover. It uses a Mercator projection via `d3.geoPath` and `geoMercator`, with geographic boundaries from a remote TopoJSON file. The map is rendered as SVG, supports zooming through the zoom event, and displays a title and interaction tip.

MMalik Muhammad Ammar
87% match
Loading thumbnail…

Pakistan Districtwise Population Map

This map visualizes population data across Pakistan’s districts, coloring each district by its 2017 population density using a linear white-to-red scale. Hovering over a district reveals a tooltip with its name, province, population, and density. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to render district boundaries from a TopoJSON file, while the population data comes from a separate JSON file. Zooming is enabled via the `d3.zoom` API, and all geometry is drawn as SVG paths.

MMalik Muhammad Ammar
83% match
Loading thumbnail…

1

A choropleth map of Bangladesh visualizes district-level poverty rates, with a red-to-white color scale indicating the proportion of "poor" residents in each area. Hovering over a district reveals a tooltip with the district name, ID, and both extreme and poor poverty percentages. The visualization uses D3.js v5 with topojson to parse geographic boundaries and a Mercator projection via `d3.geoMercator` and `d3.geoPath`. Pan and zoom interactions are enabled through `d3.zoom`, while map shapes are rendered as SVG paths. Poverty data comes from a JSON file linked to district names.

SSNarasimhar
80% match
Loading thumbnail…

Fork of 1

A choropleth map of Bangladesh displays district-level poverty data, with each region colored on a gradient from white to red based on its reported “poor” percentage. Hovering over a district reveals a tooltip with the district name, ID, and both extreme and poor poverty levels. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundary data, with a `d3.scaleLinear` mapping poverty rates to fill colors. Zoom and drag interactions are enabled via D3’s `zoom` behavior. Poverty statistics come from a local JSON file joined to district names.

PPedram
78% match
Loading thumbnail…

Bangladesh poverty MAP

This choropleth map of Bangladesh visualizes district-level poverty rates through a red-to-white color scale. Users can hover over each district to view a tooltip displaying the specific city name, ID, extreme poverty, and poor-level percentages. Built with D3 v5, the visualization uses `geoMercator` projection and `geoPath` to render administrative boundaries from TopoJSON data. It supports zoom and drag interactions via the `d3-zoom` event, while district fill colors are computed from linked JSON poverty statistics.

XXiaoleiGuo
77% match
Loading thumbnail…

Fork of Bangladesh poverty MAP

A choropleth map of Bangladesh displays district-level poverty rates, showing the percentage of the population in poor and extreme poverty conditions for each division through a white-to-red color scale. Hovering over a district reveals a tooltip with the city name, ID, and specific poverty statistics. Built with D3 v5, it uses d3.json to load TopoJSON geographic data and sales data, d3.geoMercator and d3.geoPath for map projection and rendering, and d3.zoom for pan and zoom interactions on the SVG output.

MMinh Nguyen
76% match
Loading thumbnail…

Bangladesh poverty MAP

This example visualizes poverty data across Bangladesh’s districts, encoding the percentage of the population living in poverty through a red color scale. The map uses D3 v5 with TopoJSON data to render district boundaries via `d3.geoPath` and a Mercator projection. Hovering over a district displays a tooltip with the city name, ID, and extreme and poor poverty levels. Users can zoom and drag the map using D3’s zoom behavior, with the data sourced from a JSON file containing district-level poverty statistics.

FFoysal Ahmed Emon
76% match
Loading thumbnail…

Bangladesh poverty MAP

An interactive choropleth map of Bangladesh visualizes district-level poverty rates, with districts shaded on a white-to-red scale based on the proportion of poor residents. Hovering over a district displays a tooltip with its name, ID, extreme poverty rate, and poor rate. The visualization uses D3 v5 with `geoMercator` and `geoPath` to render TopoJSON boundary data, and employs `d3.zoom` for pan and zoom capabilities. Poverty statistics come from a local JSON dataset, while geographical boundaries are sourced from an external Bangladesh TopoJSON repository.

XXiaoleiGuo
76% match