Multi-view Visualizations

In Tutorial 2, we introduce how to create a multi-track visualization, as shown below.

The fallback content to display on prerendering

In Gosling, we call a visualization with several tracks as a single view. Sometimes, we may wish to create a visualization with multiple views, e.g., one overview + several detailed views.

Create Multiple Views

Let's say we use the above circular visualization as the overview that visualizes all the chromosomes. To achieve this, we remove the specified x.domain in the overview.

# **remove the domain specification in overview**
-  "domain": {"chromosome": "1"},

We then create two linear detailed views for two different chromosomes, e.g., chromosome 2 and chromosome 5.

Detailed View 1

The fallback content to display on prerendering

Detailed View 2 is the same as Detailed View 1 except the x.domain.

-  "domain": {"chromosome": "2"}
+  "domain": {"chromosome": "5"}

Arrange Multiple Views

So far, we have created one overview and two detailed views. In Gosling, multiple views can be arranged using the arrangement property.

{
    "arrangement": "parallel"
    "views": [
        {/** overview **/},
        {
            "arrangement": "serial",
            "spacing": 20,
            "views": [
                {/** detailed view 1 **/},
                {/** detailed view 2 **/}
            ]
        }
    ]
}

Link Multiple Views

We need to link the overview and the two detailed views. We overlay two brush objects to the overview, and link the two brush objects to the two detailed views using linkingId (i.e., "detail-1", "detail-2"). To help users visually link the brush objects and the detailed views, we assign the same color to the brush in the overview and the background of the corresponding detailed view.

# **add two brushes to the overview**
+ "alignment": "overlay",
+ "tracks": [
+    {
+        "mark": "area"
+    },
+    {
+        "mark": "brush",
+        "x": {
+            "linkingId": "detail-1"
+        },
+        "color": {
+            "value": "blue"
+        }
+    },
+    {
+        "mark": "brush",
+        "x": {
+            "linkingId": "detail-2"
+        },
+        "color": {
+            "value": "red"
+        }
+    }
+ ]

# **link detail view 1 to the first brush**
+  "linkingId": "detail-1",

+  "style": {
+     "background": "blue",
+     "backgroundOpacity": 0.1
+  }

# **link detail view 2 to the second brush**
+  "linkingId": "detail-2",

+  "style": {
+     "background": "red",
+     "backgroundOpacity": 0.1
+  }

The fallback content to display on prerendering