Bangladesh map interaction with Violence against women
✓ Published1🌍 Public
DDibya Prokash Sarkar
Last edited Feb 27, 2021
Created on Feb 27, 2021
Forked from Bangladesh map interaction with Sales Data
This interactive map of Bangladesh displays sales data for each division, with hover tooltips revealing yearly, monthly, and weekly figures in BDT. The visualization uses `d3.geoMercator` and `d3.geoPath` to render TopoJSON boundaries, while `d3.json` loads both the map and sales data. Zoom and drag functionality is implemented via `d3.zoom`. District paths are colored green and highlight on hover, with a `title` element providing the data details.
AI-generated descriptionBangladesh map interaction with sales data
The problem is to visualize sales 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
Sales Data :
[
{
"id":1,
"yearly":"627543.12 BDT",
"monthly":"56014.56 BDT",
"weekly":"640.99 BDT",
"name":"Dhaka"
},
{
"id":2,
"yearly":"7345.12 BDT",
"monthly":"53464.56 BDT",
"weekly":"39.99 BDT",
"name":"Khulna"
},
{
"id":3,
"yearly":"67843.12 BDT",
"monthly":"564.56 BDT",
"weekly":"89.99 BDT",
"name":"Barisal"
},
{
"id":4,
"yearly":"2134435.12 BDT",
"monthly":"623.56 BDT",
"weekly":"98.99 BDT",
"name":"Chittagong"
},
{
"id":5,
"yearly":"55585.12 BDT",
"monthly":"354.56 BDT",
"weekly":"6.99 BDT",
"name":"Sylhet"
},
{
"id":6,
"yearly":"223.12 BDT",
"monthly":"54.56 BDT",
"weekly":"0.99 BDT",
"name":"Rajshahi"
},
{
"id":7,
"yearly":"3223.12 BDT",
"monthly":"64.56 BDT",
"weekly":"8.99 BDT",
"name":"Rangpur"
}
]
Author Profiles:
- Codepen : http://codepen.io/emon535
- Linkedin : https://www.linkedin.com/in/emon535/
- Github : https://github.com/emon535
MIT Licensed