Exploring the Possibilities of Embedding Heterogeneous Data Attributes in Familiar Visualizations

Heterogeneous multi-dimensional data are now sufficiently common that they can be referred to as ubiquitous. The most frequent approach to visualizing these data has been to propose different solutions for representing these data. These new solutions are often inventive but tend to be unfamiliar. We take a different approach. We explore the possibility of extending well-known and familiar visualizations through including Heterogeneous Embedded Data Attributes (HEDA) in order to make familiar visualizations more powerful. We demonstrate how HEDA is a generic, interactive visualization component that can extend common visualization techniques while respecting the structure of the familiar layout. HEDA is a tabular visualization building block that enables individuals to visually observe, explore, and query their familiar visualizations through manipulation of embedded multivariate data. We describe the design space of HEDA by exploring its application to familiar visualizations in the D3 gallery. We characterize these familiar visualizations by the extent to which HEDA can facilitate data queries based on attribute reordering.

Extended Materials

The following table shows our explored design space of applying HEDA to familiar visualizations in the form of a hierarchy.

The following table shows our explored design space of applying HEDA to familiar visualizations in the form of a 2D space table.

In the following, we provide a brief description of our implemented prototype for extending dual arc diagrams with HEDA.

Some brief descriptions of how the ArcDigram-HEDA prototype works
Figure 1 shows the ArcDiagram-HEDA in the stretched mode. Pressing the stretch/Unstretch button in the control panel results in revealing/hiding HEDA, respectively. By selecting attributes in the control panel, then dragging and dropping the selected attribute labels, the reordering priority of entities alters. As a result, we can see the black rectangles (showing entities), their corresponding arcs, and the corresponding vertical HEDS smoothly animated and reordered according to the location of selected attributes in the control panel in relation to each other. For example, if "status", and "age" have been selected in order, then, the entities, their arcs, and their HEDA will be reordered first based on "status" attribute and then based on "age".

Hovering over each black rectangle highlights the outgoing arcs from the hovered node in blue color. Also, hovering shows the detail data of lawyers in a detail view below the query panel.

The location of the attribute rows in HEDA can be changed by dragging and dropping the label of the attributes shown on the left hand side of HEDA.

Categorical Data Encodings: Here are the categorical encodings we used in ArcDiagram-HEDA prototype.

* The prototype may have some bugs as it is still under development to fix some small issues. However, it is well-capable of showing how HEDA could be embedded into arc diagrams. While interacting with the prototype, please wait for each animation to be completed before triggering another one.

In the following, we provide a brief description of our implemented prototype for extending dual arc diagrams with HEDA.

Some brief descriptions of how the Scatterplot-HEDA prototype works
In Scatterplot-HEDA, we provide the possiblity of extending X, Y, or both axes for exploring the data. Before loading Scatterplot-HEDA visualization, a page appears asking you to select a dataset for the visualizastion. We provided the ability to work with two datasets: country ranking dataset, and automobile dataset.

Automobile dataset: If the automobile dataset is chosen, then, by default, the X axis shows "city-mpg" which stands for "city mileage per gallon". Y axis shows the price of the car. Pressing "Stretch X" shows HEDA on X axis with the attributes including "horsepower", "engine-size", "symboling" (showing the level of car safety which could be a value between 0-6. Cars with symboling value of "0" are the least safe cars, and those with value "6" are the most safe ones), and "fuel-type" (either gas or diesel). Pressing "Stretch Y" extends the Y axis and shows the attributes including "body-style", "fuel-type", "compression ratio", and "curb-weight". "fuel-type" is repeated on both axes to show the possibility of visualizing one attribute in relation to both X and Y axes. The visualized categorical attributes are "symboling", "fuel-type", and "body-style". The encoding of these attributes are shown in the follwoing:

Country Ranking datset: If you select the country ranking dataset, then by default, the X axis shows country ranking between "1" to "100"(OA), in which "1" is the top-rated country and "100" is the lowest-rated country. The Y axis shows the countries' health index (HI), in which higher values show higher health index. Pressing the "Stretch X" button in the query panel extends the X axis and shows HEDA with the attributes including: "incGroup" (the country's income group which could be "Low", "Middle", or "High"), "popGroup" (the country's population group which could be "Small", "Medium", or "Large"), and "Relig" (the country's level of religiosity). Pressing the "Stretch Y axis" extends Y axis and shows the vertical HEDA with the attributes "QOL" (Quality of Life), "ED" (education), and "incGroup". In this dataset, the defined categorical attributes are "incGroup", and "popGroup" which are both ordinal. We selected the following encodings for these attributes:

In general, in Scatterplot-HEDA, the attributes that appear on the X and Y axes are shown on the query panel. Selecting these attributes using the checkboxes and reordering them by dragging and dropping the corresponding labels results in changing the ordering priority of entities on the X and Y axes. The first selected attribute under the label "X Attributes" will appear on the X axis itself, and the rest of the attributes are visualized using the HEDA extended on the X axis. This is similar for Y axis and the attributes that appear under the "Y Attributes" label in the query panel. In this prototype version, HEDA attributes that appear on X and Y axes are fixed into two groups under the labels "X Attributes" and "Y Attributes" in the query panel. Attributes within one group canbe reordered by drag and drop action. However, they are not supposed to move between groups.

Hovering over each entity highlights the point as well as its attributes that appear in HEDA, using the red color.

Filtering entities in scatterplot is possible through using lasso-selection on the entity points. It is possible to deselect the filtered entities, by clicking anywhere on the screen.

The location of the attributes in HEDA can be altered by dragging and dropping the label of the attributes shown besides HEDA.

* The prototype may have some bugs as it is still under development to fix some small issues. However, it is well-capable of showing how HEDA could be embedded into scatterplots. While interacting with the prototype, please wait for each animation to be completed before triggering another one.