ICE8: Bangladesh Administrative Informations
✓ Published1🌍 Public
This interactive map displays administrative data for Bangladesh, showing each of the seven major divisions. Hovering over a district reveals a tooltip with its name, population, area, and population density. The map is rendered as an SVG using D3.js (v5) with a Mercator projection, and path data is generated from TopoJSON using the `topojson` library’s `feature` function and D3’s `geoPath`. The visualization supports zoom and drag interactions via D3’s `zoom` and `event` APIs, and it shades district boundaries with a subtle green fill.
AI-generated descriptionBangladesh map interaction with sales data
The problem is to visualize administrative information data on Bangladesh map.
What I have done:
- Parsed topoJson Data to generate Map with geoJson from D3.
- Parsed administrative data and maped with each District
- Constructed String for Hover data
- Applied Zoom and Drag feature as required
TopoJSON Data for Bangladesh:
Administrative Data :
[
{
"id":1,
"area": "20,551",
"population":"42,607,000",
"density":"2,073",
"name":"Dhaka"
},
{
"id":2,
"area": "22,272",
"population":"18,217,000",
"density":"818",
"name":"Khulna"
},
{
"id":3,
"area": "13,297",
"population":"9,713,000",
"density":"730",
"name":"Barisal"
},
{
"id":4,
"area": "33,771",
"population":"34,747,000",
"density":"1,028",
"name":"Chittagong"
},
{
"id":5,
"area": "12,596",
"population":"12,463,000",
"density":"989",
"name":"Sylhet"
},
{
"id":6,
"area": "18,197",
"population":"21,607,000",
"density":"1,187",
"name":"Rajshahi"
},
{
"id":7,
"area": "16,317",
"population":"18,868,000",
"density":"1,156",
"name":"Rangpur"
}
]
MIT Licensed