Skip to main content
SimilarExport ZIP
100%

Fork of Fork of 1

✓ Published0🌍 Public
PPedram
Last edited Jan 11, 2023
Created on Jan 11, 2023
Forked from Fork of 1

This example visualizes poverty data across Bangladesh’s districts using a choropleth map. Each district is colored on a white-to-red linear scale based on its “poor” percentage, with hover tooltips displaying the district name, ID, extreme poverty level, and poor level. The map is rendered as SVG using d3.geoPath and a mercator projection, with zoom and drag interactions applied via d3.zoom. TopoJSON data from two sources—a world map and a Bangladesh-specific dataset—is parsed with topojson.feature, while poverty statistics come from a local salesData.json file.

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…

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
95% 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
90% 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
87% 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
83% 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
82% 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
82% match
Loading thumbnail…

deprivation in Bangladesh

A choropleth map of Bangladesh visualizes district-level deprivation, encoding the "poor" poverty percentage from a local salesData.json file through a blue color scale. Built with D3 v5 and TopoJSON, the map uses d3.geoMercator and d3.geoPath to render SVG paths, with d3.zoom enabling pan and zoom. Hovering over a district triggers a tooltip via appended title elements, displaying the district name, ID, and extreme and poor deprivation percentages.

BBajiSharifPatan@my.unt.edu
80% match
Loading thumbnail…

Bangladesh poverty MAP

This map of Bangladesh visualizes district-level poverty rates using a red-to-white linear color scale, with darker shades indicating higher percentages of poor populations. Users can hover over individual districts to view detailed statistics, including the district name, ID, and both extreme and overall poverty levels. Built with D3 v5 and TopoJSON, it renders geographic boundaries via d3.geoPath and a Mercator projection, while supporting zoom and drag interactions through d3.zoom. Poverty data comes from a local salesData.json file, merged with district boundaries from public TopoJSON sources.

Mmahidul-islam
79% match