Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of 1

Public visualization

Viewing a saved revision (read-only)

4abc35c251e147bb943b347e0d318907

Fork of Fork of 1

0 stars0🌍 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: