Skip to main content
SimilarExport ZIP
100%

COVID-19 Data on BD MAP

✓ Published0🌍 Public
FFoysal Ahmed Emon
Last edited Apr 20, 2020
Created on Apr 20, 2020

This map of Bangladesh visualizes sales data for seven major districts, with hover interactions revealing city-specific yearly, monthly, and weekly figures. The visualization uses D3 v5 and topojson to parse TopoJSON data, projecting the country through a Mercator projection and rendering districts as SVG paths. Interactive zoom and drag capabilities are enabled via d3’s zoom event, while district hovering triggers tooltips constructed from the parsed sales JSON data.

AI-generated description

Bangladesh 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:

MIT Licensed

Similar vizzes

Loading thumbnail…

Bangladesh sales data map

This map shows sales figures for seven districts in Bangladesh, with hover tooltips displaying yearly, monthly, and weekly amounts in BDT for each region. The visualization is built with D3 v5, parsing TopoJSON data to generate the map via `d3.geoPath` and `geoMercator` projection. Sales data is loaded from a JSON file and matched to district names. The map supports zoom and drag interactions through `d3.zoom`, with districts styled as yellow paths that turn green on hover.

Bbindusreeja
90% match
Loading thumbnail…

Bangladesh map interaction with Sales Data

This example shows sales data for seven districts of Bangladesh overlaid on a choropleth-style map, displaying yearly, monthly, and weekly figures via tooltips on hover. The map is rendered as SVG using D3 v5, with geographic paths generated from TopoJSON data via d3.geoPath and a Mercator projection. Interactive zoom and drag are enabled through d3.zoom. District shapes are colored and styled with CSS, and tooltips are created by appending SVG title elements.

FFoysal Ahmed Emon
88% match
Loading thumbnail…

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.

SShamim Ehsan
88% match
Loading thumbnail…

Country Map_ICE8

This interactive map visualizes yearly, monthly, and weekly sales figures for seven districts of Bangladesh, with data presented in BDT. Hovering over a district reveals its specific sales statistics as a tooltip. The visualization uses `d3.geoPath` and `d3.geoMercator` to render the TopoJSON geographic data as SVG paths, and supports zoom and drag interactions via the `d3.zoom` API. District paths are filled with a uniform blue color, turning green on hover, while the sales data is loaded from a local JSON file.

GGaneshPenumarthi
87% match
Loading thumbnail…

Bangladesh map interaction

A map of Bangladesh displays sales data for each division, with hover tooltips showing yearly, monthly, and weekly figures in BDT. Using d3.geoMercator and d3.geoPath, the visualization renders TopoJSON geographic boundaries as SVG paths, while a sales JSON dataset is joined to district names. The map supports zoom and drag interactions through d3.zoom, and d3.select appends text labels for the title and instructions. District paths change color on hover.

MMohammad Shakirul Islam
87% match
Loading thumbnail…

Bangladesh map interaction with Violence against women

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.

DDibya Prokash Sarkar
82% 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
77% match
Loading thumbnail…

Bangladesh Info

This example visualizes administrative divisions of Bangladesh, displaying the country’s seven major regions as a purple choropleth map. Each region, when hovered, reveals a tooltip with its name and area in square kilometers, sourced from a local `countryData.json` file. The map is rendered using D3’s `geoMercator` projection and `geoPath` generator, with geographic boundaries parsed from a TopoJSON file via the `topojson` feature function. The visualization supports interactive zooming, implemented through D3’s zoom behavior, and uses SVG elements for rendering.

Ssaijahnaviappineni
76% match