Urban Land Use Visualization

It is not trivial to visualize the semantics of Points of Interest (POIs) of an urban area. Due to the high number of points and related categories, as well as the associated textual information, maps become heavily cluttered and hard to read. Using traditional visualization techniques (e.g., dot distribution maps, typographic maps) partially solves this problem. We propose a method that is based on this rationale – to represent clusters of points of interest as geometric shapes with attached textual information. The calculated shapes characterize sets of points and allow their use as containers for placing text. In what concerns the latter, we present our strategy for aligning text with the edges of polygons. We also purpose a method that solves the problem of overlapping text that occurs on the edges of polygons. Last, but not least, our method employs typographic characteristics (e.g., weight) to encode quantitative information.

**Figure 1**
A zoom-in of downtown area of Boston. The final visualization that combines the methods for shapes of clusters with rounded corners and label placing.

Concept

Our approach consists in creating visual elements that convey spatial distribution of POIs of the same category organized in clusters, as well as their distribution within an urban area. More precisely, our algorithm, which is based on a vacuum bag metaphor, generates a shape for each cluster of POIs revealing its unique visual form regarding their geographic distribution. Additionally, textual information — category and POI names — are drawn using different typeface weights and scaled according to the relevance of each cluster. To obtain organic-looking shapes, we defined several parameters that control both the vacuum bag algorithm and the roundness of the corners of the resulting polygons.

Dot map

To understand the distribution of POIs in space and within the corresponding clusters, we plotted them using a dot distribution map (see Figure 2). In this visualization, each POI is depicted by a dot. The category it belongs to is represented with a color. The observation of this visualization led us to the conclusion that each cluster has its unique and recognizable shape. For instance, similar happens with the shapes for countries and continents of the world, to which diverse meanings and symbolisms are associated. We found this idea particularly interesting and implemented a method that allows us to depict sets of POIs through their shapes. Also, this approach allows us to eliminate color from representation reducing visual overload. Regardless, due to the amount and diversity of categorical data, the use of color is inefficient.

**Figure 2**
Direct representation of data – names of categories and POIs represented as colored points. Points of equal color belong to the same cluster.

Vacuum Bag algorithm

The calculation of a polygon is an iterative process with the maximum number of iterations defined by a user. The process starts with the calculation of a convex hull, which defines an initial set of edges. Each edge is characterized by starting and ending points in an ordered array, and by stretchiness, which models the behavior of an elastic band. Finally, the shape of each set of points is calculated through a simulation of vacuum bag behavior, which metaphorically speaking consists of putting the points into the bag and sucking all the air from it. In the end, the resulting polygon is a concave hull that describes a given set of points (see Figure 3). A more detailed description can be found in the paper.

**Figure 3**
Calculated shape of clusters of two sets of points. Black dots represent points that compose a hull, with the arrows inside that indicate the order of points. Red line represents simulation of the algorithm.

Corner smoothing

In the first place, the polygon should be extruded by the d value which is one of the parameters of the algorithm. The interior and exterior corners we calculated with different strategies. For the outside corners, the approach was a simple segmentation of the circle centered on the corner with the radius equal to d. The number of segments is controlled by another parameter of the algorithm and should never be less than 2. The smoothing of the interior corners employs a linear Bézier curve, with the endpoints placed in the middle of each edge, and the control point placed on the crossing of the two edges that make up the corner (as represented in Figure 4).

**Figure 4**
Schematic construction of round corners. The symbol with the X form with and without a dot represent control points and endpoints, respectivelly.

Text placement

For placing the names of POIs on the polygons they belong to, we used an approach inspired by typographic maps. In basic terms, the names of POIs are placed onto polygon and the words are curved along with the shape. One of the problems of curved words is the fact that they visually distort the word when placed on the path junctions. This is, the words are visually breaking apart creating discontinuous reading. Our solution is twofold: draw the letters perpendicularly to the segment line; when a letter coincides with a junction of two segments we use a weighted angle depending on the percentage of occupied space on each of the segments. In other words, the imaginable rectangle that holds a character always keeps its base corners on top of each segment (see Figure 5). Finally, the tracking (i.e., the space between characters) is increased for external crones and decreased for internal corners, resulting in diminished visual discontinuities.

**Figure 5**
Placing characters onto segments and their joints.

**Figure 6**
Result applied on a polygon.

Typography as a visual variable

The cluster tags were positioned at the center of the gravity of the corresponding polygon. The relevance of each category is represented using typeface weights and size. So, we used typographic weight as a visual variable to represent the relevance of each category of POIs. In typography, all typefaces are organized into families. Within a family, typefaces are divided and ordered according to their weights (e.g. regular, medium, bold). In modern typography, there are families that contain up to nine weights classified as fallowing – thin, extra light, light, regular, medium, semi-bold, bold, black and heavy. So, we used these to encode the relevance of each category, which was converted to discrete eight ranges. Due to the ordered nature of data, the typographic weights were assigned starting with thin up to heavy typefaces (see Figure 7).

**Figure 7**
Combination of font size and weight used redundantly to highlight the relevance of categories.

Interactive application

The interactive web-based application follows the principles of Visual Seeking Mantra – overview first, zoom and filter, then details-on-demand. On the first screen, the user can find a general view of the map. In this view, the visualization depicts only the shapes of clusters, which provides a first glance at the data and its distribution in space. It is important to note that POI clusters may overlap, which means that overlapping areas provide multiple services (e.g., restaurants and shopping). That said, the user can easily identify these cases in the general view (see Figure 8, the image on the left).

Filtering and zoom-and-pan are also important functionalities of the application. Using the panel on the left the user can select individual categories to display and filter the visualization by the average weight of a category, by the number of POIs in a cluster, among others. Selecting the categories also reveals their names and places them as described previously, although using only one typographic weight. To navigate on the map the user can use zoom-and-pan. The visualization implements semantic zooming and dynamically updates details of the shapes presenting different levels of cluster aggregation according to zoom level (see Figure 8, the image in the middle).

Finally, the application provides additional details on demand. This is done by directly selecting clusters on the map. In this case the panel on the left updates and displays more detailed information about the selected cluster (e.g., a list of POIs in the group, impact of each category the cluster belongs to, number of POIs). Additionally, the clusters that share the same category are also highlighted on the map, such that the distribution of clusters within the similar categories is revealed (see Figure 8, the image on the right).

Publications

E. Polisciuc, A. Alves, and P. Machado, “Understanding Urban Land Use through the Visualization of Points of Interest,” in Proceedings of the Fourth Workshop on Vision and Language, Lisbon, Portugal, 2015, pp. 51-59.
- Bibtex
- |
- PDF

Author

Evgheni Polisciuc

Ana Alves