A bangkok map containing 50 cities from Wikimedia Commons.

The SVG Mmap was load using D3 and eventListener was implemented on hover to show the number of new HIV cases in each district in year 2020. The size of the circle depends on the size of new HIV cases: bigger means larger number of cases. User can use the menu bar to select more data to show (i.e. switching between TX_NEW and TX_CURR) and add the menu to select between each quarter in 2020 (Q1 - Q4).

I combined two visualizations together so that the user can press key 'S' to toggle off the region selection and then select the region to show in the right graph.

Usage:

• Toggle topright button and select the region on the Bangkok map.
• Toggle back to show the population in the map itself.