A crucial aspect that sets a data application apart from an ordinary visualization is interactivity. In an application, visualizations can interact with each other. For example, clicking on a point in a scatterplot may send corresponding data to a table. In an application, visualizations are also enhanced with simple filtering tools, e.g. selections in a list can update results shown a heat map.
You can already try some linked visualizations to find the perfect taco. Now, we'll look at how some simple filtering elements enhance visualization, using a tech stock exploration xap I built over a couple of days. (A xap is what we call a data application built with the Xap Builder.) A few simple, but flexible interactive elements can help transform ordinary visualizations into powerful, insightful data applications. Humble check boxes and lists help produce extra value from charts and plots.
From the beginning, we've included essential user-interface (UI) elements in our xaps like buttons and select lists. Recently, Exaptive developers upgraded many of these original UI elements and added a few more.
We didn't re-invent the wheel when it came to UI elements; we stuck with what works well. We used the Semantic UI library, a visually attractive, highly-regarded design library, and created new interface components to compliment the interactivity of our visualizations.
What does that mean for our xaps? UI elements can react to changes and interactions in other parts of the xap. For example, the options in a select list could change based on what a user does elsewhere in a xap. And groups of buttons could be be highlighted to show a user what to do next. Colors, text, and really the entire "mood" of a xap could be tailored by user interactions.
One of our new components is the Result List, which organizes and paginates search results from other components. Depending on how a xap is configured, clicking on an entry in a result list could cause the text of the result to be visualized in a word cloud, meaning that users could grasp the gist of a result without having to read an entire document. Result lists also can feature buttons allowing the user to display a search result's page in a new tab.
In our tech stock exploration xap, clicking on an area in the area chart will initiate a Google search for the given stock ticker at a designated financial quarter, likely returning that company's quarterly report to investors. Clicking on a point in the line chart will initiate a search for that ticker at that point in time, ostensibly to find news items on the cause of any price fluctuation. In both cases, Google's search results are displayed in a Result List that slides out from the left-hand side of the window. Each search result will have a short description, and a link to take you to the item.
Apple stock experienced a price jump on February 1. What was the cause? Clicking on that point in time in the line chart will generate search results for APPL stock on 2017-02-01. As it turns out, Apple released a positive earnings report that day.
At the bottom of the xap, a third visualization shows any cash dividend payouts for a given ticker. A tool tip will appear when a user mouses over a payout in the dividend visualization (hint: only Apple and Microsoft have payouts in Q1 and Q2 2017). Mousing over any cell in the dividend vis will select the corresponding date. By mousing over a payout, and tracking the selected point in the price vis, you'll note that a dividend payment didn't necessarily correspond to a major price fluctuation.
The multiple line chart and stacked area chart are both newly-released visualizations built using the D3 and Plotly libraries. These new components also can influence other components, and can be customized to suit a particular user's design tastes. The color palettes for these components are extensive and expressive.
This is, of course, just a simple xap that was put together over a couple of days. But going forward, you can expect more xaps to make use of these UI elements in the future.