Gosling: Vector Data

README.md

Vector Data

A simple data showing how to load vector data.

property	type	description
type	string	required, "vector"
url	string	required, URL pointing to a HiGlass server's tileset_info endpoint
column	string	required, the name of center position of bins.
value	string	required, the name of the bin value.
bin	number	bin the genomic interval in tiles
start	string	assign a field name of the start position of genomic intervals
end	string	assign a field name of the end position of genomic intervals

value, column, start, and end essentially just define identifier so that you can reference them later in the channel encoding. The name you assign doesn't matter. The only thing that matters is that it matches the channel encoding. For instance, you could set value to ryan and then encode that information via the color channel using "color": { "field": "ryan", "type": "quantitative" }.

Live example at https://gosling.js.org?gist=flekschas/a065f1fa9c29cdae7ac130563be06184

gosling.js

{
  "assembly": "mm9",
  "layout": "circular",
  "spacing": 0,
  "tracks": [
    {
      "data": {
        // URL pointing to a HiGlass server's tileset_info endpoint
        "url": "https://resgen.io/api/v1/gt/paper-data/tileset_info/?d=EFrYq959TueayvzD78UQwA",
        // Data type
        "type": "vector",
        // The `column` property just defines the name of the x-axis
        "column": "position",
        // The `value` property just defines the name of the value
        "value": "value",
        // Aggregate four bins into one
        "binSize": 4
      },
      // Not important for this demo, it just makes sure the data is rendered as a bar chart
      "mark": "bar",
      "x": { "field": "position", "type": "genomic" },
      "y": { "field": "value", "type": "quantitative" },
      "color": { "field": "value", "type": "quantitative" },
      "size": {"value": 2},
      "width": 500,
      "height": 50
    }
  ]
}