๐ Public
Bangladesh map interaction with Sales Data
SShamim Ehsan
Last edited Apr 21, 2020
Created on Apr 21, 2020
Forked from Bangladesh map interaction with Sales Data
This visualization displays Bangladesh sales data across a map, with hover interactions revealing yearly, monthly, and weekly figures for each district. Built with D3 v5, it uses `d3.geoMercator` and `d3.geoPath` to render TopoJSON map features as SVG paths. Zoom and drag functionality is implemented via the `d3.zoom` API, while district-specific sales information appears as native SVG `<title>` tooltips. The sales dataset is loaded from a local JSON file and matched to map districts by name.
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
Comments
Sign in to join the discussion.