It would be an understatement to say that I am a Harry Potter fan. I was completely overwhelmed with pure wonder the second I walked into Diagon Alley at Warner Bros. Studio Tour in London. To say that I had high hopes for the Studio Tour is putting it lightly. However, the instant the door opened and I walked into The Great Hall and all the other sets, I realized that the people who built this out had done a brilliant job. One of the most difficult “Muggle struggles” for Harry Potter fans is the truth that, no matter how tangible it appears in our minds, magical sites like Hogwarts and Diagon Alley do not exist as we know them. But, as Professor Dumbledore would undoubtedly point out, even if it is happening inside your head, why on earth should that mean that it is not real?

My parents wanted to take our family vacation to the UK in the fall of 2019, so I decided to map out and plan the trip with my brother. We were planning activities to do while driving from one Airbnb to another during the day. Much to their amazement, they noticed me adding Harry Potter filming places and interesting spots; what they didn’t realize was how much investigation I had to do to identify specific locations and then fit them with the route. All I wanted at the time was access to a map with all the sites marked with an image of how they seem in real life. I had no idea that three years later I would be designing it.

Inspiration

Thanks to various HP-fansite, travelers have access to almost all the locations mentioned in the books or shown in the movies. These blogs show that we can at least visit the spots that inspired those fictional establishments. From majestic castles and train rides over rolling Scottish hillsides to historic hotels and secret wizarding shops, Muggles traveling to these Harry Potter filming locations will be entirely convinced that magic truly does exist.

Although the sub-topic of map visualization is somewhat different from mine, I admired the use of detailed illustration to visualize filming locations, specifically in London, in the Time Out post. What I enjoy about the Conquest Map (which is included below) is the strong visual differentiation between the colors of the individual characters and minimal icons. I enjoy how you can gather contextual information by looking at the timeline underneath the map.

Materials & Process

I explored a lot of dataset websites to create effective visualization. I didn’t come across anything relevant to my search. After exploring several websites dedicated to people traveling to various filming locations and recording their adventures, I decided to build the dataset on my own. The latitude and longitude of these locations were not included on the majority of these pages. I combed through a plethora of pages to compile a list of numerous locales along with their geographic coordinates. I added another column to tie the place with a film and chose to include additional information about the location, in general, to create a fuller image and illustrate filtering via the specific movie.

Icons and Colors

Using color is a very important part of creating visualizations. Colors can either aid someone in understanding a map or take away from that understanding. I decided to use a neutral color from Tableau’s background map styles to add color and differentiation as compared to the default setting, it also gave me options to select which details I wanted to show on the map.

As I chose a simple base map, I wanted to make the marker colors stand out. I knew that being able to view the locations of the various films was the most significant aspect of my map. I made that a priority in the style by utilizing color and an icon. While the emphasis was on the filming locations, I didn’t want to lose sight of the fact that the data is representing the scene. I styled the tooltips to add information about the location. Showing the name of the movie, as well as the name and image of the place, together with a description, would help link viewers to the physicality of what is being shown and give a way for them to learn more about specific spots.

Shape filters are an effective practice to identify filter options that have a large effect on how users interact with the dashboard. To be defined as a shape, the image must be in the Shape folder. The folder can be found here. My Documents > Tableau Repository > Shapes. If you create a new folder in My Tableau Repository, it will appear in the Shapes area. When you click Assign Palette, the shapes are allocated in the order they appear in the folder. If specific dimension values have to have a specific shape, name the shapes in the folder after the dimension values. Additionally, the image must have a transparent background.

I was able to improve the map visualization by adding my custom images to the tooltips on hover. To add an image to a tooltip, again I put the images that were eventually used into the Shapes folder in my Tableau Repository. Next, I made a new worksheet that was used to map the new images to specific dimension members. Then I put the dimension I want to map the images on the Rows Shelf, changed the Mark Type to Shape, and place the same dimension I was mapping onto the Shape Marks Card. To map each image, I had to identify the dimension item first, followed by the shape I wanted to attach to that dimension part (Yes it is that small, no you cannot zoom in to view the image better). I was interested in assigning various images to the same location but for different movies, because a few locations appeared many times in different movies, however, this was not achievable. Lastly, I navigated to the sheet where I wanted to include the images in the tooltip. Clicked on the Tooltip Marks Card, and then “Insert” in the top-right corner, hover over “Sheets,” and selected the sheet containing the images.

Result

My map’s outcome is shown below. One thing that became clear after the map was properly displayed was that, as predicted, the great majority of the filming took place in London and the surrounding area. The sets were created in the Warner Bros. Studio in London. On the upper right of the map, there is a legend. Each point contains a tooltip that includes the location’s name, movie, description, and image.

Reflection

I wish I had more time to do more thorough research. Exploration of the map reveals a number of interesting patterns. I had a lot more fun making this map than I expected, and I’m a little disappointed that it was overly complicated in Tableau to make the map aesthetically appealing. I didn’t anticipate the procedure of adding photographs to the data to be so time-consuming, or the necessity to sit with a magnifying glass to link an image to the appropriate place. I like a basic and clean design to ensure that the content is legible and comprehensible; I believe this is a project that I would want to pursue further. The presence of overlap across datasets makes the representation more realistic and easier to interpret at a glance. More detailed information would be useful for the future direction of this project, in my opinion.

I believe that this map may be improved by including more elements in the tooltip itself, such as more intriguing information like the precise Google Maps link to the coordinates of that spot, seeing how to travel their search, or filtering out for a certain movie. Another thing I believe would be useful is to see the location’s visiting hours, as not everything is in the forest or a publicly accessible place, and to provide alternatives for purchasing tickets, etc. I absolutely want to keep working on this in terms of being in a mobile responsive environment. I believe it would be incredibly great to add links to the precise scene in the movie; I’m seeing this being utilized when fans are literally in that spot and having experienced this personally, I can’t convey how magical it feels to watch the scene and physically be in that spot.