Aylin Turker & Danae Biln

The University of British Columbia 

INFO 419: Information Visualization 

Goals and Intended Audience

https://vancouverpubliclibraries.godaddysites.com/

This InfoVis website and infographic design illustrate the current public library facilities in an interactive and comprehensive format. The intended goals are to engage users and encourage an in-depth understanding of this data through our interactive map with URLs to each library, an infographic that highlights our project’s story about accessibility and advocacy, as well as providing a direct link to the VPL’s official website for further research. Our compilation of visualizations is inspired by Jeffrey Heer’s work that outlines “at a story’s conclusion, such visualizations provide interactive controls for further exploration. These narrative structures both communicate key observations from the data and cleverly provide a tacit tutorial of the available interactions by animating each component along with the story.” (Heer 2012). The actions and tasks that our project supports are; visual exploration of the city’s facilities through an interactive map, exploration of new perspectives on each neighborhood’s access to these sites, as well as increasing visits to the VPL’s web page. This InfoVis informs the user of where their interests can be conveniently met, and which areas may be less or more saturated in the city to potentially spark advocacy for the implementation of new public libraries in neighborhoods where they may be less common. This project exemplifies a graphic, understandable search experience through a complete, and organized amount of data located in one website, rather than requiring extensive individual research. Through this design method, we follow the concept of expressiveness by filtering out any distractors, featuring the noteworthy attributes of the data; Locations, Neighborhood Boundaries, Library Counts, Names, and Additional Information through URLs. Our InfoVis satisfies the high-level objective of expressing new knowledge of the city, provoking the discovery of sites that may be overlooked in other search engines. Our work is supported by Munzner’s journal article, Visualization Analysis, and Design, inspiring our primary goal of presentation, that “…refers to the use of vis for the succinct communication of information, for telling a story with data or guiding an audience through a series of cognitive operations (Munzner 2014). Friendly’s journal on the effectiveness of a map influenced our decision to create our InfoVis with a Vancouver outline that defines each neighborhood through borders and labels, as well as identifying libraries through colored marks that are shaped into stars to draw attention to the sites in comparison to the background image. As outlined by Munzner, our work seeks to satisfy the low-level requirements of identification of the target (library marks), comparison (between neighborhoods), and summarization of our intended message (support in implementing new sites, and navigating the city’s public libraries) (Munzner, 2014). The visualizations are aimed at the city’s general public, as well as visitors who are interested in exploring the city’s public educational sites. A subcategory of intended users is non-university students who don’t have easy access to scholarly library facilities and/or primary and secondary commuter students who reside in areas where these sites may be more accessible to them rather than their school itself.

Details of the Data Set 

Link to Library Dataset 

Link to Neighbourhood and Boundary Dataset 

Link to The best cities in the world for Book lovers Dataset

We utilized the City of Vancouver’s data portal and extracted the set from their Libraries subject under their culture and education theme, as well as the dataset for Local Area Boundary. The City of Vancouver’s page displays different visualizations of the data, including a map of each branch location, and a bar chart of the counts within each area of the city. By condensing the different analyses into one map vis, we reduced the search task requirements needed from the user to tediously compare the information. We accomplished this by creating a visible filter that included the count of libraries per neighborhood, which we found is more effective than a bar chart because the available data only identifies 1 to 2 marks within each area. For the infographic, we made use of the “The best cities in the world for Book lovers” dataset to compare Vancouver with other leading literate cities in the world. This data enabled us to see the bigger picture in terms of global context and understand where Vancouver stands in satisfying its residents’ needs for learning and connecting hubs within their neighborhoods. 

Tools Used to Transform Our Data

Our project utilizes Excel to clean our datasets, Tableau for our interactive map, Canva for our infographic, and GoDaddy as our website builder. Our use of Excel plays a key role in filtering through relevant data points that may share neighborhood locations and would need to be compiled. Excel was effective because it allowed us to easily filter through the set and manually insert the correct links to each library, with the preexisting links being expired. We decided Tableau would be the most appropriate tool for our map because it allows us to graph out the points of interest in a familiar geometric shape. This decision aims to establish a digestible connection between the user’s need to navigate library locations, and their understanding of the city’s layout. In doing so, this project attempts to satisfy the mid-level requirements of displaying an easy-to-identify (and search of) our project’s topic; VPL sites and statistics (Munzner, 2014). Tableau provides access to customizable options of exploration such as filters to locate different neighborhoods as well as the population of libraries within these areas. Our decision to use Canva for our infographic is most appropriate because the templates and design/symbols catalog effectively express statistics and visual storytelling. While these two Info-visualizations separately support the user in interpreting the data and encouraging advocacy, we decided the most sensible decision would be to assign one location for both within a website. This compilation of information aims to reduce the risk of confusion caused by extensive requirements to compare the data on separate platforms, restricting the user from forming more comprehensive understandings through easy comparison. This combination of platforms satisfies our goal of “a visual exploration of the city’s facilities, exploration of new perspectives on Vancouver neighborhood’s access to these sites, as well as increasing visits to the VPL’s site”. (Biln and Turker, 2024). Through the help of these tools, this combination of visualization tools encourages users to explore clean, accurate data in one place, establishing room to form deeper understandings of public library facilities beyond a simple Google search. The weakness of Tableau that was relevant to our project is its challenging custom formatting features, specifically in our attempt to import a mark in the shape of a book, where the platform required multiple steps that did not end up being used due to our need to shift focus on prioritized aspects of our visualization. We also struggled to utilize its collaborative features to work on the vis together and ultimately ended up dividing the map and infographic between the two of us. A primary weakness of Canva is its limited advanced features, mainly supporting basic design needs and template dependency. The GoDaddy website builder required a paid subscription (although we already had this before our project), however, this restricts accessibility and collaborative design.

Analytic Steps in the Design Process

We made sense of the data using the aforementioned tools, identifying the population trends of accessible VPLs per geographic area, and identifying patterns of more saturated areas that correspond with the number of people per neighborhood. We identified areas that do not have access to public libraries and decided to incorporate this information into our infographic, emphasizing the need for the establishment of public library facilities.

Firstly, we downloaded the GEOJSON from the Vancouver data portal and cleaned the data of the inactive URLs and string coordinates, leaving only the address, geolocation, and name, and manually replaced active links to each location. We also downloaded the Local Boundary dataset to incorporate this into our Tableau extracts, visualizing each neighborhood boundary.

We inserted Longitude in columns and Latitude in rows, as well as selected the map option under “show me”. We inserted the ‘name’, ‘urlink’, ‘Collect(Geo location)’, and ‘address’ into the “marks” panel to ensure that this information is visible when hovering over a point.

To form the detailed map we explored the “background layer” option and selected the “outdoors” style. Under marks, we decided to identify each library as a star shape because this design emphasizes places of interest more effectively than a simple dot.

To provide the task of exploring these locations based on neighborhoods by selecting “show feature” under geo-local-area filters as a single-value list.

Once each area was highlighted with a simple gradient related to the number of libraries available, we adjusted the opacity to allow for the original map to show through.

To incorporate the refined links, we selected actions and inserted the link option into the panel. We then created a tooltip to alter the name of the links into an understandable direction comment. 

This design is inspired by Heer’s emphasis on interaction techniques, wherein we designed the map in a way that limits the features of HCI to focus on the project’s main objectives (eg. the saturation of each neighborhood corresponding to the number of libraries, the search panel that identifies library access per region, and the instructions to click each mark to view further information).

The Design Process & Principles

For a more in-depth comprehension, we first drew out our initial concepts for the infographic and the storyline we intended to follow before converting the story of our data into a digital format. These sketches made it easier for us to follow the visual hierarchy and information flow required to ensure that our primary goal—highlighting the gaps in Vancouver’s library distribution—would be clear and compelling (Norman, 2013). Using the principles of expressiveness and effectiveness, we aimed to ensure that every visual element in both the information visualization and the infographic had a function in presenting the information at hand (Munzner, 2014). For instance, the star symbols in InfoVis are utilized expressively to designate libraries as centers of interest, and their usefulness is demonstrated by the way the user’s attention is drawn to the positions of the libraries on the map. In the infographic, however, the percentage of seats available in each area with the number of residents was graphically encoded utilizing proportionate icon sizes and hues, guaranteeing that the information is not only expressive in meaning but also successful in communication. Users’ interaction with the data is enhanced by the deliberate implementation of interactivity, as seen by the URLs we supplied that go to each library website. During our discussions, we planned these features, which were implemented as we transmitted and edited our dataset on Tableau. This interactive component increased the usefulness of the visualization by giving consumers instant access to more in-depth data (Munzner, 2014). Additionally, the infographic was made with consideration for utility, soundness, and beauty. The infographic’s utility is obvious in how it serves a clear goal, which is to advocate for library accessibility (Munzner, 2014). It is further strengthened by the links to the VPL website, as previously indicated, making it a practical resource. Utilizing the exploratory approach, the infographic offers unbiased data so that viewers can draw their conclusions, while also adhering to a narrative approach by directing the viewers through a narrative. Soundness is expressed in the correctness of the data given, which is free of deceptive visual representations. We took great care to have a balanced layout, unified color scheme, and engaging iconography that make the data appealing and consumable to attain beauty, in addition to maintaining clear language to engage the audience (Munzner, 2014). Throughout the process, a few more design concepts were taken into account. The design, for example, eliminated needless clutter and concentrated on displaying the data, exemplifying the idea of simplicity in action (Norman, 2013). In addition, visual hierarchy was produced by element sizing and arrangement. Also, there is a distinct narrative as the design narrates a story that leads one’s attention from comprehending the situation of libraries today to recognizing the necessity of taking action in underserved neighborhoods.

The Story of Our Data

The story of our data starts with the scene:  Vancouver is a city renowned for its diverse culture, which is fueled by knowledge and a strong sense of community. But its libraries are long overdue for an upgrade, especially when compared to other significant global cities like Edinburgh and Paris. There is a considerable gap in satisfying the citizens’ demands for learning and connecting centers. This opening introduces the topic and sets the scene for a story about public library accessibility. The “characters” in the story are the Vancouver neighborhoods – each with its unique traits, goals, and needs. These characters are shown in the infographic not only as geographical locations but also as groups of people with different access levels to libraries. As we continue looking at the data, the primary point of our data story’s rising action becomes clear: there is a notable discrepancy between the seating capacity of libraries and the density of the residential neighborhoods. By using comparable representations, we demonstrate how certain neighborhoods—like West Point Grey and Dunbar-Southlands—are severely underserved, while other areas—like Downtown—have more access to services. The climax of the story occurs when the stark fact is brought to light: neighborhoods like Arbutus Ridge and Shaughnessy have no libraries, despite their substantial residential population. The story’s feeling of urgency and call to action are introduced at this point. In terms of resolution, the call to action serves as a road map. By engaging with the infographic, our goal for the viewers is to not be left with a sense of hopelessness but instead be mobilized towards advocacy. 

Pros and Cons

Pros:

• Stars are a powerful visual indication that attracts attention and is instantly identifiable when indicating library locations on a map.
• Disparities in public library access are communicated successfully by the infographic’s obvious division of neighborhoods and their corresponding library services.
• The narrative component of the infographic, particularly the call to action for advocacy, serves as a powerful motivation for community participation.
• An excellent resource for users that makes it simple to acquire further information is the interactive map that includes URLs for every library.

Cons:

• To make comparisons simpler, a more authentic graphical depiction of the data for the number of libraries per 100,000 inhabitants in multiple cities would be beneficial for the infographic.
• The addition of a better visual contrast, such as a different backdrop color or pattern on the map, could help the project further draw attention to locations that lack libraries.

Bibliography

Biln, Turker (2022, April). Project Proposal. Canvas

Ha, T.-H. (2016, July 28). The best cities in the world for Book lovers. Quartz.     https://qz.com/741099/the-worlds-cities-with-the-most-bookstores-and-libraries-per-capita

Heer, J., & Shneiderman, B. (2012). Interactive Dynamics for visual analysis. Queue, 10(2), 30–55. https://doi.org/10.1145/2133416.2146416  

Home: Vancouver Public Library. (n.d.). https://www.vpl.ca/ 

Libraries. – City of Vancouver Open Data Portal. (2019, March 8). https://opendata.vancouver.ca/explore/dataset/libraries/information/  

Local area boundary. – City of Vancouver Open Data Portal. (2023, June 24). https://opendata.vancouver.ca/explore/dataset/local-area-boundary/export/?disjunctive.name  

Munzner, T., & Taylor & Francis eBooks EBA. (2015;2014;). Visualization analysis and design (1;1st; ed.). CRC Press, Taylor & Francis Group, CRC Press is an imprint of the Taylor & Francis Group, an informa business. https://doi.org/10.1201/b17511 

Norman, D. (2013). The Design of Everyday Things. Basic Books.