The Urban Systems Lab (USL) Dataviz Platform is an interactive web application to visualize Social, Ecological, and Technological Systems (SETS). This platform is being used to encourage participatory processes, produce new knowledge, and facilitate collaborative analysis within nine Urban Resilience to Weather-related Extremes (UREx) Sustainability Research Network cities. It allows seamless shifts across contexts, scales, and perspectives for analysis within the SETS framework. How is digital space conceptualized for urban analysis and interventions? What is the capacity for reciprocal relationships between digital and physical space? How do we visually understand urban systems and complex spatial relationships? This chapter provides a comprehensive overview of the application stack and the different representational categories embedded in the Dataviz Platform. Offering a common visual language to various stakeholders, we explore new ground as we believe it has the potential to change how we think about, plan, and design our cities. (“Map devices such as a frame, scale, orientation, projection, indexing and naming reveal artificial geographies that remain unavailable to human eyes.” (Corner,.Cosgrove (ed), Mappings, Reaktion Books, London, 1999)
- Spatial narratives
- Social-ecological-technological systems (SETS)
- Data visualization
- Web-based visualization
10.1 The USL Dataviz Platform
Facilitated by a UREx team of academic researchers, city planners, first responders, NGOs, and local community groups, the 3D visualizations featured on the USL Dataviz Platform (Sauter et al. 2019) are used to support cross-city analysis, collaboration, and conversation, with an individualized focus on local priorities in each city. For example, the Dataviz Platform has been used for stakeholder engagement in a number of UREx scenario workshops, providing the spatial context and SETS data to explore desirable and plausible pathways for reducing risks in improving resilience of vulnerable communities and critical infrastructure in cities such as Phoenix, Portland, Miami, and San Juan.
The platform is a public repository for a variety of visual outputs in one integrated project platform. It serves as an engagement tool and supports seamless shifts in context and perspective for analysis within a SETS framework (see Chap. 3); for instance, by switching from geospatial maps focused on heat (Fig. 10.1) to those focused on flood risk, and from city-wide analysis to block-level views. For the sake of inclusivity, common digital and mobile devices can be used to view the intricacies of geospatial layers presented on the platform in a simple and rich way. Additionally, the platform leverages common visual assets from location-based services and maps on mobile devices to relate to user expectations.
UREx city teams have used the platform to draft narratives in a content management system and share them publicly. For example, diverse stakeholders in Syracuse, New York have been able to use the platform to view important SETS data of the city together. This collaboration provides a basis for exploration of resilience futures, as well as a starting point for asking questions about the systemic interactions that drive current challenges in the city. The platform enables teams to manage the publication life cycle and add context and metadata to complex visual outputs such as future heat, flood, and land-use projections (e.g., UREx 2050 and 2080 scenarios). Doing so provides a better understanding of the underlying data and computational models that generated a particular output.
10.2 Representation of Space
In Social Justice and the City (1973), David Harvey argues the importance of reflecting on the nature of spaces to understand urban processes—what we call today “urban systems.” We use Harvey’s spatial classification from “Space as a Key Word” (2004) as a vocabulary to name the contextual and perspective shifts featured within the online USL Dataviz Platform:
Absolute, a fixed space, true to reality, one frame, independent
Relative, multiple geometries to choose from, “spatial frame depends upon what is being relativized and by whom” (Harvey 2004, p. 3)
Relational, processes occur and define their own spatial frame, object exists only in the relationship with another object
An interactive platform holds a dynamic range of these spaces (absolute, relative, and relational). Absolute space is represented by building footprints, land use, coastal flooding and everything that can be visualized and measured in space at scale (Fig. 10.2). Relative space is exponentially richer within an interactive tool, because the relativization changes according to user input, zoom levels, and data resolution. Because space is dynamic, data is relative to its container: pixels. While navigating the platform, data gets sorted, selected, abstracted, and slowly unpacked to add detail as the user moves closer in.
Data are meaningful on a screen insofar as it is visualized in its relation to other layers at different levels of abstraction. Sometimes the accuracy of elements in an (absolute) geospatial space is secondary; e.g., by using extruded building footprints as an approximation of a building’s shape. In other instances, visual elements represent data beyond its (relative) location; e.g., by showing the flow of people, a volume of water, or associated costs. In contrast, relational space is independent from absolute and relative dimensions, operating at the highest level of abstraction based on its own design rules; e.g., diagrams showing stakeholder networks, labor processes, or icons signifying sensations.
A good example for a dataset that shifts from a relative to absolute space paradigm is the green roofs layer in New York City (NYC); zooming out, we can see circles with some transparency showing the green roofs location in NYC (Fig. 10.3). These circles are not at scale but are able to show a distribution of green roofs across the city, relative to each other. As we zoom in, the circles disappear and transition into absolute space, uncovering both the geolocation and footprint of green roofs, as well as their elevation in three-dimensional space (Fig. 10.4).
Harvey further develops the classification where absolute, relative, and relational space intersects to create a matrix of combinations:
Material space, as in what you can experience with your senses
Representations of space, including diagrams, collages, infographics, writing, and geospatial maps. The visualization platform lies mostly in this category because it shows data within a specific location on earth, attributing information to the built environment (cities).
Spaces of representation, a symbolic space produced by cultural memories, symbols, emotions, images, and imaginaries such as artistic interpretations and narratives
Considering the different kinds of practices at work in the URExSRN, conceptualization of space varies considerably among the different stakeholders, and spans the full range of Harvey’s classification. “The problem of the proper conceptualization of space is resolved through human practice with respect to it.... The question what is space is therefore replaced by the question: How is it that different human practices create and make use of different conceptualizations of space?” (Harvey 1973, pp 13–14).
For example, a hydrologist might look at a particular storm event as a predictable nuisance that occurs at a certain frequency and can be represented accordingly. An emergency responder might view the same event through the emotional account of callers in distress. A resident (materially) experiences the event and its implications from a viewpoint centered at the actual site. And a City official manages those external forces and points of view to develop long-term resiliency plans, using spatial representations such as maps and diagrams to engage and communicate. The different stakeholders and practices therefore require a common (visual) language to bridge those gaps and points of view. This challenge is our objective, organizing a web of spatial relationships and representations into one integrated visualization platform.
10.3 Visualization Concepts
Web-based visualizations operate at the intersection of visual design, statistical analysis, and computer science (Drucker 2014). They create dynamic representations that can shift seamlessly between narrative modes and spatial representations. To balance the two for a range of use cases, the USL Dataviz Platform requires a high level of customization and is therefore unique in how it is constructed from source data to the finished design. Geospatial Information Systems (GIS) are historically used to produce maps for print media, and are tailored towards expert audiences versed in reading geospatial information. The following section discusses the different spatial capacities of the USL Dataviz Platform in relation to spatial categories that are inherent in working with GIS. They are arranged as opposite sides of a representational spectrum, along with a discussion of the design implications for the platform:
Static versus Dynamic: Static GIS maps often function as visual evidence to convey a particular point of view, placed intentionally into a larger narrative by an author. When visualizing data at different scales and levels of fidelity, two factors remain constant: the resolution of the underlying data and the size of the canvas it is displayed within. Hence, there are obvious limitations for constructing complex visualizations where time, space, and scale work interdependently together to produce a visual output within the constraints of the browser canvas. A framework that is flexible enough to shift spatial representations requires an interactive system that can process user inputs and render graphic outputs based on those interactions, dynamically. This approach has the advantageous capacity to do the following: Conduct self-serve analysis on various datasets, display dynamically updated (and real-time) data, facilitate collaboration and dissemination, provide varying levels of access, and collect structured feedback. Additionally, a dynamic system can harness principles of cinematography and motion graphics to tell stories in a linear or nonlinear fashion for different audiences and purposes, such as identifying risks, managing interventions, and planning adaptation strategies (Amini et al. 2015). Such participatory processes are fundamental for an inclusive approach, connecting researchers, practitioners, and residents around particular issues. To that end, a key feature of the platform is the ability to share a specific geospatial view through short URLs, available in the browser (bottom-right) corner, to show the exact same view and settings to a person who opens the link on another device.
Global versus Local: One of the primary affordances of interactive 3D maps is to provide viewers the freedom to seamlessly explore and compare the data at local, regional, national, and global scales. A resident engaged in a local issue, for instance, might therefore better understand how local social-ecological-technological systems, or SETS, compare to a regional picture. At the most local level (fully zoomed in), we use 3D extrusions of building footprints as a visual canvas to display the underlying data. The demographic data we use are accurate at a census block level, and while we extrude each building on the lot, the underlying data are not available at a lot level. Therefore, multiple buildings on the lot show the same census data. As a representation, building geometry (extruded from footprints using height information) provides a much better sense of the built environment, especially in urban settings, but also suggests higher accuracy—a trade-off and a design decision. Moving from a local to a regional zoom level, the accuracy of building geometry loses significance. Computationally, to display a city-wide view requires the ability to reduce complexity of the data to allow it to be rendered quickly in an online environment. This involves reducing the graphic complexity of buildings shown on the platform as the viewer moves around, thereby balancing the available computational resources and ensuring that the user experience is fluid. For example, showing all buildings on the more than one million building lots of NYC requires significant computation, and in order to find balance, thus requires reducing building detail to maintain a sufficient frame rate and a good user experience across a range of devices, including mobile phones. At a distance, administrative boundaries become more relevant and hold more weight for analysis, and the map geometry adapts accordingly into aggregate bins where necessary.
Raster versus Vector: Vector data format, which is essentially a database of point, line and polygon coordinates, is ideal for representing discrete data and geometries. It plays well with digital applications that demand a suite of interactions on top of the data layer, letting users “touch” and interact with the data itself. On the contrary, working with raster data is suitable for working with continuous data, where working with pixels instead of coordinates is a more computationally sensible approach. Such may be the case for working with digital elevation models (DEM), satellite imagery (Fig. 10.5) and similar remote sensing data. Depending on the workflow requirements, the data can be converted between raster to vector and vice versa (Fig. 10.6).
Narrative versus Representational: A key decision in the development of the USL Dataviz Platform was the objective to show qualitative data and narrative content developed during stakeholder workshops held in each network city (Fig. 10.7), and to convey connections between various vulnerabilities and exposures; for instance, food and energy security, coastal flooding, and urban and river flooding. Using an online editor, authors can draft narratives in the content management system, embed rich media such as images and movie clips, and link those with geospatial views and layers provided through the platform. Multiple views can be recorded and animated to tell a particular story, presented in a split-screen view that allows for analytic comparisons while navigating the narrative. This design choice balances the qualitative and quantitative representations that are displayed, while keeping the interactive features of the platform active. The design implication is the need for a highly customizable mapping engine,Footnote 1 along with the data structures that allow for customizable views, virtual camera settings, user permissions, and metadata. For data representations such as flood risk or land cover, one limitation of the popular Mapbox-GL engine is that it currently does not display elevation as 3D terrain, but as flat images with different color values corresponding to the height of the terrain.
10.4 Application Stack
The USL Dataviz Platform is implemented as a web application using open source libraries, and thus it can be replicated using standard web development tools and best practices.Footnote 2 The following workflow diagram broadly illustrates the end to end framework for creating spatial visualizations with the platform, presented as individual layers in the front-end web interface. These layers are interactively transformed client side by viewers through their individual web browsers (local storage) (Fig. 10.8).
The data visualization workflow operates as follows:
Data preparation: This stage involves collecting the geospatial data and applying necessary transformations, such as adjusting map projection, aggregation, filtering, geocoding, spatial joins, etc. to make the data interoperable with other server-side components for further processing. This is the most meticulous and time-consuming part of the process. The methodology varies highly for each dataset depending on the programmer’s domain expertise and desired output specifications for the visualization, as prioritized by local stakeholders.
Tile generation: Once the data are converted into the desired raster or vector format, the next step is to generate a tile map from it, generating a set of individual images that are loaded and displayed in the browser as a seamless map. Tippecanoe,Footnote 3 a command line utility, is a popular tool that we use to generate tiles from large datasets. It provides extensive options to customize both raster and vector data types.
Tile server: After encoding the map layers, tiles can be self-hosted on cloud infrastructure or commercial service providers.Footnote 4 Many libraries, like D3.jsFootnote 5or Deck.gl,Footnote 6 require data to be loaded within the client browser. However, streaming the complete datasets used to a client’s device is not feasible. When viewing large datasets in excess of a few megabytes, streaming the data as slippy mapsFootnote 7 is a standard and preferred approach. The data are split into a grid of tiles for each zoom level. Based on the web browser’s viewport, only the tiles within view are requested from the tile server and stitched together into a seamless canvas, which happens while zooming or panning a map. There are a number of tile server solutions available that can be deployed according to usage and demand.Footnote 8
Front-end application: The data are finally consumed and rendered by a front-end application operating on a user’s mobile or desktop device. It is responsible for accepting interactive user inputs and querying the data from the hosted tile server.
Our objectives are to support the exploration and understanding of complex geospatial relationships in a simple and organized way and to avoid visual outputs that cognitively overwhelm the viewer, both for a variety of use cases. By categorizing the representational concepts that inform our design decisions, the hidden operations within the visualization platform become more transparent. Intentionally, every design decision serves a specific narrative or representational purpose, which might not be apparent at first glance.
As explained by James Corner, maps are artificial geographies that reveal “the invisible” to the human eye. Whether in absolute, relative, or relational space, our interactive platform explores new ground in which maps function as dynamic data aggregates that shift scale and context, reveal transformative narratives, and enable participatory processes. This exploration has the potential to change how we think about, plan, and design our cities.
As a platform designed to provide spatial context and a digital common ground for various stakeholders in group settings, some viewers find the 3D environment more difficult to navigate than others, especially if they are not used to working with spatial data. Along with the spatial shifts from regional to local views, the “artificial geographies” produced by the platform can be cognitively taxing, especially when switching between different SETS data layers. Narrative text, hyperlinks, legends, and sources provide additional information through the platform’s narrative panel. This however also requires more in-depth study and sustained engagement in order to process and understand interconnected data.
The impact of the USL data visualization platform lies in its capacity to communicate the invisible through a common visual language, suitable for different human practices and stakeholders. As we continue to research and visualize urban social–ecological–technological systems in the future, we plan on pushing the boundaries between absolute and abstract spatial representations in contexts such as social relationships, traffic flows, green infrastructure, and questions of equity.
The USL Dataviz Team reviewed a set of mapping libraries to decide on the visualization software stack for the project, including MapBox-GL (which renders buildings as well as building-part extrusions), CesiumJS (using WebGL to render more detailed CityGML geometries), Mapbox SDK for Unity (useful for rendering extruded buildings over a terrain mesh, high-end graphics rendering, and post-processing), along with cloud-based mapping services such as Google Maps, Earth, and ArcGIS Online. Criteria for building a custom platform included the level of customizability, user experience across devices leveraging WebGL, cost to develop, scale, and host a tile server online, available support by a developer community, as well as the graphics roadmap for future development. The decision was to build the platform on Mapbox-GL.
Including Kosmtik, available at https://github.com/kosmtik/kosmtik, and Tileover, available at https://github.com/fl orianf/tileoven.
Amini F, Henry Riche N, Lee H et al (2015) Understanding data videos: looking at narrative visualization through the cinematography lens. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, Seoul, South Korea, pp 1459–1468
Corner J (1999) The agency of mapping: Speculation, critique and invention. In: Cosgrove D (ed) Mappings. Reaktion Books, London, pp 231–252
Drucker J (2014) Graphesis: visual forms of knowledge production (metaLABprojects). Harvard University Press, Cambridge, MA
Harvey D (1973) Social justice and the city. John Hopkins University Press, Baltimore
Harvey D (2004) Space as a keyword. Presented at the Marx and Philosophy Conference, London: Institute of Education
McPhearson T, Pickett STA, Grimm N et al (2016) Advancing urban ecology toward a science of cities. . Biosci 66(3):198–212. https://doi.org/10.1093/biosci/biw002
Sauter D, Randhawa J, McPhearson T (2019) USL Dataviz Platform. http://nyc.urbansystemslab.com/. Accessed 30 Jun 2020
Editors and Affiliations
Rights and permissions
Open Access This chapter is licensed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits use, sharing, adaptation, distribution and reproduction in any medium or format, as long as you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license and indicate if changes were made.
The images or other third party material in this chapter are included in the chapter's Creative Commons license, unless indicated otherwise in a credit line to the material. If material is not included in the chapter's Creative Commons license and your intended use is not permitted by statutory regulation or exceeds the permitted use, you will need to obtain permission directly from the copyright holder.
© 2021 This is a U.S. government work and not under copyright protection in the U.S.; foreign copyright protection may apply
About this chapter
Cite this chapter
Sauter, D., Randhawa, J., Tomateo, C., McPhearson, T. (2021). Visualizing Urban Social–Ecological–Technological Systems. In: Hamstead, Z.A., Iwaniec, D.M., McPhearson, T., Berbés-Blázquez, M., Cook, E.M., Muñoz-Erickson, T.A. (eds) Resilient Urban Futures. The Urban Book Series. Springer, Cham. https://doi.org/10.1007/978-3-030-63131-4_10
Publisher Name: Springer, Cham
Print ISBN: 978-3-030-63130-7
Online ISBN: 978-3-030-63131-4
eBook Packages: HistoryHistory (R0)