Seven Tips for Creating an Interactive App

Published on December 2, 2015

In Arcadia Instant, you create apps to collate all relevant information about a dataset. In apps, you can create different visuals, link them, and arrange them in any order. Because the purpose of an app is to best display the most relevant information on a single screen, there are a few tips you should keep in mind while creating an app.

Use Case

In this exercise, you’ll be working with the dataset SFPD Reported Incidents [Data source].

In this post, I’ll show you how to build an app that shows the reported incident categories, as well as the exact number of incidents per district and the occurrence of each incident category in different districts in quarters 1 through 4.

I’ll create an app with the following visuals:

  • A driving visual that shows the categories of incidents, in descending order
  • A target visual that shows  the incident count for each category across districts in 2014
  • A target visual that shows the incidents of a category, for each district, in each quarter
  • Dynamic Wikipedia pages that reference category information details

Seven Things to Remember

  1. Choose the right chart

Choosing the right visual type is the first and most crucial step toward creating an effective app. The appropriateness of a visual depends on the data type and the objective of the visualization. Arcadia Instant offers a variety of visualization options. Some visuals may not be appropriate to show certain type of data. For example, bubble charts and scatter plots are not ideal for visualizing time series data. At the same time, there may be more than one appropriate charts to represent certain data.

In our scenario, a packed bubbles chart in a descending order is ideal for showing the reported incident categories, sorted from highest to lowest number of incidents.

rtaimage

Similarly, a trellised grouped bar chart is very effective in showing the incident categories per district in quarters 1 through 4.

rtaimage01

To display the exact number of incidents for each district, a simple table is sufficient.

  1. Use colors

Use colors to distinguish and compare variables. When you drop a field on the Colors shelf, Arcadia automatically applies different colors to the field values. In this example, the pddistrict field on the Colors shelf shows each district in its own color for all quarters. The legend on the right maps the district to color.

You can customize colors using the Color Palette. Furthermore, different types of color customization options are available for specific visuals.

  1. Use filters

As emphasized earlier, the purpose of an app is to display the most relevant information. Arcadia Instant gives you the ability to filter information on all fields of information.  You can apply filters at two levels—at the visual level, on the Filter shelf,and at the app level, to enable click behavior.
For the current app, use pddistrict and category as filters at the visual and the app levels, respectively.

  1. Enable click behavior

In Arcadia Instant, you can apply drilldowns by enabling click behavior on one visual (the driving visual) that controls the display of one or more target visuals. In this manner, you can define what a click on a particular field on the driving visual will display on the target visual.

In the current app, you could enable click behavior on the packed bubble chart to display in the trellis chart the incidents for the specified category across all districts.

  1. Use Dynamic Titles

When the target visuals dynamically change to show information of different categories, the titles of the visuals should change to clearly indicate the change. Use dynamic titles for this.

  1. Use Tooltips

Tooltips display additional details when you hover over a mark or field in a visual. Tooltips show certain information by default, as they do in the following image.

However, you can also edit tooltips to add further details.

rtaimage02

  1. Embed external links

Whenever extra information may be desirable, embed an external web page in an app to show a respected source for reference or encyclopedic details. I recommend enabling click behavior on the app to make it dynamically change the embedded web pages according to the selected dimension.

rtaimage03

Using the tips discussed in this posting, you can create an app that effectively displays the reported incident categories and the occurrence of each incident type in various city districts.