afsanab/interactivemap.github.io

View this project here: https://afsanab.github.io/InteractiveMap.github.io/

The artifact I created is an interactive map of Westeros (a fictional world originated from the show Game of Thrones). I used an image from the internet for the map and used d3.js to create popups with the location names and short descriptions when the green buttons on the locations are clicked. This map is beneficial to visualize the different houses in Game of Thrones and the popups allow for more description about the location. I included a popup for every location that was home to one of the main houses from Game of thrones. I attempted to make the map zoom in to the location clicked, however I was not able to get it to zoom back out. So, to zoom out of the location in the artifact the user must refresh the page. To extend this visualization, I would continue working on the zoom feature and allow users to click on the button a second time to zoom back out. I would also make the map fit the screen better. Additionally, I would include buttons for other important locations and some events that may have occurred there. Instructions to use the interactive map:

1. Open the index.html file in browser
2. Click on one of the green dots to see the name of the location and description to see the popup and zoom into the area
3. To zoom out, refresh the page, or click another location to zoom into a different area on the map