Semantic Zoom

Why Semantic Zoom

Advanced zooming technique, called Semantic Zooming, allows users to dynamically switch between visual representations upon zooming in and out.

For example, detailed information of nucleotide bases can be shown with textual labels when zoomed in while it can be switched to show the overall distribution of the bases using a stacked bar chart when zoomed out.

Example: Sequence Visualization

Try this example in the online editor

Example: Cyto Band

Top: only rect marks are represented; Bottom: text and triangle marks are presented when zooming in to show more details.
Try this example in the online editor

Semantic Zooming in Gosling

Semantic zoom is achieved by controlling alignment and visibility. alignment enables users to overlap multiple marks on top of one other, thus allowing users to create different visualizations for the same data. visibility controls the visibility of visual marks, thus allowing the switch between different visualizations based on the zoom level.

The visibility of corresponding marks are decided by whether the measure of target and the threshold satisfy the specified operation. For example, in the code below, text marks only show when the width (measure) of the mark (target) is greater-than (operation) 20 (threshold).

{
  // example of semantic zoom: show text marks when zooming in

  "tracks":[{
    "data":...,
    "x": ...,
    "y": ...,
    // overlay overlaps bar marks and text marks for the same data
    "alignment": "overlay",
    "tracks":[
      //a track with bar marks always shows
      {
        "mark": "bar",
        ...
      },
      //a track with text marks only shows when the width of mark is greater than 20 
      {
        "mark": "text",
        "visibility": [{
          "operation": "greater-than",
          "measure": "width",
          "threshold": "20",
          "target": "mark"
        }] 
      }
    ]
  }]
}

Gosling supports users in controlling the visibility based on either the size of the specified target ({"measure": "width"|"height"}) or the zoom level of the specified target ({"measure": "zoomLevel"}).

Control Visibility through Size

property	type	description
threshold	number | string	Required. Specify the threshold as one of: A number representing a fixed threshold in the unit of pixels; "|xe-x|", using the distance between xe and x as threshold
target	string	Required. One of "track", "mark". Target specifies the object that you want to compare with the threshold.
operation	string	Required. One of "less-than", "lt", "LT", "greater-than", "gt", "GT", "less-than-or-equal-to", "ltet", "LTET", "greater-than-or-equal-to", "gtet", "GTET". A string that specifies the logical operation to conduct between threshold and the measure of target. Support greater than : "greater-than", "gt", "GT" less than : "less-than", "lt", "LT" greater than or equal to : "greater-than-or-equal-to", "gtet", "GTET" less than or equal to : "less-than-or-equal-to", "ltet", "LTET"
measure	string	Required. One of "width", "height". Specify which aspect of the target will be compared to the threshold.
transitionPadding	number	Specify the buffer size (in pixel) of width or height for smooth transition. Default: 0
conditionPadding	number	Specify the buffer size (in pixel) of width or height when calculating the visibility. Default: 0

Control Visibility through Zoom Level

property	type	description
threshold	number	Required. Set a threshold in the unit of base pairs (bp)
target	string	Required. One of "track", "mark". Target specifies the object that you want to compare with the threshold.
operation	string	Required. One of "less-than", "lt", "LT", "greater-than", "gt", "GT", "less-than-or-equal-to", "ltet", "LTET", "greater-than-or-equal-to", "gtet", "GTET". A string that specifies the logical operation to conduct between threshold and the measure of target. Support greater than : "greater-than", "gt", "GT" less than : "less-than", "lt", "LT" greater than or equal to : "greater-than-or-equal-to", "gtet", "GTET" less than or equal to : "less-than-or-equal-to", "ltet", "LTET"
measure	string	Required. Must be "zoomLevel". Specify which aspect of the target will be compared to the threshold.
transitionPadding	number	Specify the buffer size (in pixel) of width or height for smooth transition. Default: 0
conditionPadding	number	Specify the buffer size (in pixel) of width or height when calculating the visibility. Default: 0