Exploring Urban Densification with the ArcGIS Maps SDK for JavaScript and Chart.js

January 3, 2023

Michael Luubert

A web-based dashboard has been developed to visualize the impact that various growth, energy and emission, and transportation policies have on urban livability in Vancouver, Victoria, and Price George. This dashboard can be used to inform long range urban planning.

More information about the densification scenarios visualized with the dashboard can be viewed on this ArcGIS Hub Page. The main functionality of the dashboard was developed using the ArcGIS Maps SDK for JavaScript and Chart.js.

Work on the dashboard began with several prototype sketches created in Balsamiq, which allowed for quick iterations of the design. These designs are shown in the following image.

The Balsamiq mockup drawings of the Scenario Explorer and Scenario Comparison tabs are displayed above screen captures of the final version of the app. There are many similarities in the layout, colour scheme, and overall design of the mockup and the final version, but the design was not reproduced exactly in the app.

Once the prototypes were approved by the researchers, work began to implement the design as a web app.

A previous version of the dashboard used the Bootstrap framework for user interface (UI) elements and to provide a responsive layout. Esri Inc. released the Calcite Design System in 2021, close to the time of development. Hence, the decision was made to replace the user interface components with Calcite, while maintaining the responsive behaviour and tabbed interface from Bootstrap. The dropdown elements were replaced with Calcite’s select component. Cards from Calcite were used for each scenario in the comparison view and tooltips were added to most elements to provide help when hovering the mouse over the interface components. Using the Calcite library helped to achieve a consistent and clean look across the scenario explorer and comparison tabs.

Screenshots of the previous version of the dashboard are displayed above screenshots of the current version to show the preservation of the tabbed interface and the addition of the Calcite components. The user interface design of each tab was changed significantly from the previous version.

Screenshots of the previously developed dashboard compared with the current version

The Chart.js JavaScript library was used for all the charts in the dashboard. In the final implementation, violin, doughnut, and bar charts were used. Three statistical queries are performed on the ArcGIS Online building feature service when the dashboard loads. The charts are initialized and populated once the statistical queries are returned. One of the queries updates the chart on the main page while the other queries are executed to populate the charts in the comparison view.

The main chart updates quickly when a selection is made to a group of buildings on the map due to the use of client-side statistical queries. If you are interested in how you can use client-side queries in your own apps, you can find more information in this code sample in the ArcGIS JavaScript documentation. The sample also shows how Chart.js can be used with the ArcGIS Maps SDK for JavaScript.

Design Decisions

User testing was performed once the dashboard was feature complete. Further changes were made to the original design of the app as a result of this review process.

Comparison View

The comparison view was designed as a three row by four column grid, with the rows representing cities and the columns representing the scenarios. Due to the amount of text, images, and charts on each card, they couldn’t be resized smaller for mobile devices without reducing legibility or the amount of information present. Thus, when the browser window was resized, the cards would overflow to the next row, making it difficult to scan across to compare each city, as shown in the image below.

The original design of the comparison view is resized to show the difficulty comparing across the Prince George row of cards.

The decision was made to remove this overflow behaviour and make the three by four grid scrollable if the screen size was too small to display all the cards. When the browser window is small enough to display a single card across the entire width, the cards overflow into a single column of cards. This makes the app more usable when viewing it on a smartphone, since the scenarios can be explored by scrolling through a single column of cards.

Violin Chart

An interesting graph used in the dashboard is the violin chart, which show the distance of buildings to open space, commercial, public space, bike lanes and transit. In the original design, a scatter chart was used with semi-transparent circles that represented each building. When more of the transparent circles overlapped, the colour in the chart would be more intense, indicating that there were a greater number of buildings at that distance. However, this method of visualizing the data made it difficult to comprehend the distribution of points because one needed to distinguish between variations in intensity. With a violin graph, a greater number of buildings at a distance is represented by a wider shape, which more clearly shows the distribution of values.

The scatter chart is compared side-by-side with the violin chart from the current version of the dashboard to show how the distribution of data can be more clearly visualized in the latter.

The scatter chart compared with the violin chart

Consistency

Several comments from the review were related to difficulty comparing scenarios because of inconsistencies with how the data were presented in the charts and map.

The colours used on the map to symbolize the buildings were updated to better match the corresponding hues on the accompanying charts.

The building selection was originally cleared when the theme was changed. This selection is now maintained to compare the metrics for selected buildings across different themes.

The charts that have land use labels along the x-axis were updated to always show land use categories that have a zero value instead of removing them. The order of the land use categories is also consistent with the order of the legend and is the same across all the charts. These changes made data comparisons easier as the land use categories no longer shift or disappear when the scenario is changed.

In the original design, both horizontal and vertical bar charts were used depending on the chosen theme, while the final design is more consistent and only has vertical bar charts.

Discoverability

A few of the review comments expressed uncertainty about the dashboard’s functionality because of the placement of elements or a lack of documentation and visual feedback.

The Reset Camera and Clear Selection buttons were moved to the top right of the map because they are actions that are performed on the map and can be more easily seen when manipulating the view.

When the user selects the 3D view button, the camera is now tilted down to show the buildings from an oblique view. This was updated because the previous version only enabled the ability to tilt the camera when the button was clicked and did not provide the user with any change to the map indicating the camera rotation could be manipulated.

The ability to select buildings was not easily discoverable since it requires the use of the ALT key. Thus, a popup was added to appear when the dashboard is opened explaining how to select groups of buildings.

The combination of 3D visualization and statistical queries using the ArcGIS Maps SDK for JavaScript along with the charting capabilities of Chart.js provided a strong foundation to create a dashboard to explore and aggregate statistics on thousands of building features. The JavaScript libraries helped to speed up development, so time could be committed to improving usability of the app based on user testing. Thank you to everyone who tried the app and provided feedback during the testing phase. You can try out the dashboard for yourself here.