1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[4773],{40109:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var t=i(74848),a=i(28453);const s={title:"Mark"},r=void 0,l={id:"mark",title:"Mark",description:"Visual marks (e.g., points, lines, and bars) are the basic graphical elements of a visualization. Note here that we call one visualization a track in Gosling.",source:"@site/versioned_docs/version-0.9.20/mark.mdx",sourceDirName:".",slug:"/mark",permalink:"/docs/0.9.20/mark",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-0.9.20/mark.mdx",tags:[],version:"0.9.20",frontMatter:{title:"Mark"},sidebar:"docs",previous:{title:"Genome Builds",permalink:"/docs/0.9.20/genome-builds"},next:{title:"Visual Channel",permalink:"/docs/0.9.20/visual-channel"}},o={},c=[{value:"Point",id:"point",level:2},{value:"Line",id:"line",level:2},{value:"Area",id:"area",level:2},{value:"Bar",id:"bar",level:2},{value:"Rect",id:"rect",level:2},{value:"Text",id:"text",level:2},{value:"Link",id:"link",level:2},{value:"Triangle",id:"triangle",level:2}];function d(e){const n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["Visual marks (e.g., points, lines, and bars) are the basic graphical elements of a visualization. Note here that we call one visualization a ",(0,t.jsx)(n.code,{children:"track"})," in Gosling.\nThe core of constructing a visualization is to bind selected ",(0,t.jsx)(n.strong,{children:"data fields"})," to the ",(0,t.jsx)(n.strong,{children:"visual channels"})," (e.g., size, color, and position) of a chosen ",(0,t.jsx)(n.strong,{children:"mark type"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"mark"})," property of a track is defined by a string that describes the mark type."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'{\n "tracks":[\n /** a track using rect marks */\n {\n "mark": "rect",\n ... // other track properties\n },\n\n /** a track using line marks */\n {\n "mark": "line",\n ... // other track properties\n }\n ],\n ... // other visualization properties\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Gosling supports the following primitive ",(0,t.jsx)(n.code,{children:"mark"})," types: ",(0,t.jsx)(n.a,{href:"#point",children:"Point"}),", ",(0,t.jsx)(n.a,{href:"#line",children:"Line"}),",\n",(0,t.jsx)(n.a,{href:"#area",children:"Area"}),", ",(0,t.jsx)(n.a,{href:"#bar",children:"Bar"}),", ",(0,t.jsx)(n.a,{href:"#rect",children:"Rect"}),", ",(0,t.jsx)(n.a,{href:"#text",children:"Text"}),", ",(0,t.jsx)(n.a,{href:"#link",children:"Link"}),", ",(0,t.jsx)(n.a,{href:"#triangle",children:"Triangle"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"point",children:"Point"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/point.ts",children:["\ud83d\udd17"," source code"]})}),"\n",(0,t.jsxs)(n.p,{children:["The mark ",(0,t.jsx)(n.code,{children:"point"})," represents one data point using a circular shape. Visual channels of the circle, such as radius, color, and vertical/horizontal position, are used to represent values of the data point. Popular charts such as scatter plots and bubble charts use ",(0,t.jsx)(n.code,{children:"point"})," mark."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_point",children:(0,t.jsx)("img",{src:"/img/doc_images/point_example.png",width:"800",alt:"point_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_point",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'// an example of point marks\n{\n "tracks":[{\n "data": {\n "url": ...,\n "type": ...\n },\n // mark type\n "mark": "point",\n // mark visual channels\n "x": {\n "field": "position", // data field\n "type": "genomic", // type of data field\n "axis": "top"\n },\n "y": {\n "field": "peak", \n "type": "quantitative"\n },\n ... // other encodings and styles\n }]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"line",children:"Line"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/line.ts",children:["\ud83d\udd17"," source code"]}
1)}),"\n",(0,t.jsxs)(n.p,{children:["The mark ",(0,t.jsx)(n.code,{children:"line"})," represents a set of data points using a line that connects these points."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_line",children:(0,t.jsx)("img",{src:"/img/doc_images/line_example.png",width:"800",alt:"line_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_line",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'// an example of using line marks\n{\n "tracks":[{\n "data": {\n "url": ...,\n "type": ...\n },\n // specify mark type\n "mark": "line",\n // specify mark visual channels\n "x": {\n "field": "position", // data field\n "type": "genomic", // type of data field\n "axis": "top" // position of the x axis \n },\n "y": {\n "field": "peak", \n "type": "quantitative"\n },\n ... // other encodings and styles\n }]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"area",children:"Area"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/area.ts",children:["\ud83d\udd17"," source code"]})}),"\n",(0,t.jsxs)(n.p,{children:["The mark ",(0,t.jsx)(n.code,{children:"area"})," represents a set of data points as an area shape. The upper edge of the area shape is a line that connects all the points and the bottom edge is the x axis."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_area",children:(0,t.jsx)("img",{src:"/img/doc_images/area_example.png",width:"800",alt:"area_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_area",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'// an example of area marks\n{\n "tracks":[{\n "data": {\n "url": ...,\n "type": ...\n },\n // mark type\n "mark": "area",\n // mark visual channels\n "x": {\n "field": "position", // data field\n "type": "genomic", // type of data field\n "axis": "top"\n },\n "y": {\n "field": "peak", \n "type": "quantitative"\n },\n "color": ...,\n ... // other encodings and styles\n }]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"bar",children:"Bar"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/bar.ts",children:["\ud83d\udd17"," source code"]})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"bar"})," mark is designed for drawing bar charts. Each bar shows the value of one data point through its height."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_bar",children:(0,t.jsx)("img",{src:"/img/doc_images/bar_example.png",width:"800",alt:"bar_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_bar",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'// an example of area marks\n{\n "tracks":[{\n "data": {\n "url": ...,\n "type": ...\n },\n // mark type\n "mark": "bar",\n // mark visual channels\n "x": {\n "field": "position", // data field\n "type": "genomic", // type of data field\n "axis": "top"\n },\n // y indicates the visual encoding of the bar height\n "y": {\n "field": "peak", \n "type": "quantitative"\n },\n ... // other encodings and styles\n }]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"rect",children:"Rect"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/rect.ts",children:["\ud83d\udd17"," source code"]}
1)}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"rect"})," mark is designed for representing genomic intervals using rectangular shapes. Left and right edge of the rectangle indicate the start and end genomic positions, respectively."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_rect",children:(0,t.jsx)("img",{src:"/img/doc_images/rect_example.png",width:"800",alt:"rect_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_rect",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'// an example of rect marks\n{\n "traks":[\n {\n "data": ...,\n // specify the type of mark\n "mark": "rect", \n // bind the color of each rect mark to the data field: Stain\n "color": { \n "field": "Stain",\n "type": "nominal",,\n "domain": ["gneg", "gpos25", "gpos50", "gpos75", "gpos100", "gvar"],\n "range": ["white", "#D9D9D9", "#979797", "#636363", "black", "#A0A0F2"]\n },\n // bind the start position of each rect mark to the data field: chromStart \n "x": { \n "field": "chromStart",\n "type": "genomic",\n "axis": "top"\n },\n // bind the end position of each rect mark to the data field: chromEnd \n "xe": { \n "field": "chromEnd", "type": "genomic"\n },\n "size": {\n "value": 30 // specify the constant height of each rect mark\n }\n }, \n ... // other encodings and styles of the rect mark\n ],\n}\n\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"rect"})," mark can also be used for the matrix visualization of genomic interaction data."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?gist=wangqianwen0418/3080e214ec542db3a108fc2890431c4b",children:(0,t.jsx)("img",{src:"/img/doc_images/rect_matrix_example.png",width:"600",alt:"rect_matrix_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?gist=wangqianwen0418/3080e214ec542db3a108fc2890431c4b",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.h2,{id:"text",children:"Text"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/text.ts",children:["\ud83d\udd17"," source code"]})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"text"})," mark is designed to display textual labels. For example, gene names and nucleobases can be displayed with ",(0,t.jsx)(n.code,{children:"text"})," marks."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_text",children:(0,t.jsx)("img",{src:"/img/doc_images/text_example.png",width:"800",alt:"text_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_text",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'{\n "tracks":[{\n "data": ...,\n \n // specify the type of mark\n "mark": "text", \n \n // specify styles of the mark\n "style": {"textStrokeWidth": 0},\n\n // bind visual channels to corresponding data fields\n "x": {"field": "start", "type": "genomic", "axis": "top"},\n "xe": {"field": "end", "type": "genomic"},\n "y": {"field": "count", "type": "quantitative"},\n "color": {\n "field": "base",\n "type": "nominal",\n "domain": ["A", "T", "G", "C"]\n },\n\n // specify the text content\n "text": {"field": "base", "type": "nominal"} \n }]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"link",children:"Link"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/link.ts",children:["\ud83d\udd17"," source code"]})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:"link"})," mark is designed to show connections between chromosomes.\nGosling supports both ",(0,t.jsx)(n.code,{children:'"withinLink"'}),", links within one track, and ",(0,t.jsx)(n.code,{children:'"betweenLink"'}),", links between different tracks."]}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_link",children:(0,t.jsx)("img",{src:"/img/doc_images/link_example.png",width:"800",alt:"link_example"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_link",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'{\n "tracks": [\n {\n "data": {...},\n\n "mark": "withinLink", // specify the mark type\n\n // bind visual channels to corresponding data fields\n\n // x and xe indicates the start point of the arc \n "x": {\n "field": "s1",\n "type": "genomic",\n "domain": {"chromosome": "1"},\n "axis": "top"\n },\n "xe": {"field": "e1", "type": "genomic"},\n\n // x and xe indicates the end point of the arc \n "x1": {\n "field": "s2",\n "type": "genomic",\n "domain": {"chromosome": "1"},\n "axis": "top"\n },\n "x1e": {"field": "e2", "type": "genomic"},\n\n // specify styles of the mark\n "stroke": {"value": "steelblue"},\n "style": {"linkStyle": "circular"}\n }\n ]\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"triangle",children:"Triangle"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.a,{href:"https://github.com/gosling-lang/gosling.js/blob/master/src/core/mark/triangle.ts",children:["\ud83d\udd17"," source code"]}
1)}),"\n",(0,t.jsx)("a",{href:"https://gosling-lang.github.io/gosling.js/?example=doc_triangle",children:(0,t.jsx)("img",{src:"/img/doc_images/triangle.png",width:"700",alt:"triangle"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_triangle",children:"Try it in the online editor"})}),"\n",(0,t.jsxs)(n.p,{children:["Gosling supports three types of triangle marks: ",(0,t.jsx)(n.code,{children:"triangleLeft"}),", ",(0,t.jsx)(n.code,{children:"triangleRight"}),", ",(0,t.jsx)(n.code,{children:"triangleBottom"})]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-javascript",children:'{\n "tracks": [\n {\n "data": {...},\n\n "mark": "triangleRight", // specify the mark type\n\n // bind visual channels to corresponding data fields\n\n /** x indicates the position of the mark on a genomic axis */\n "x": {\n "field": "end",\n "type": "genomic",\n "axis": "top"\n },\n /** the size of the triangle */\n "size": {"value": 15}\n },\n\n {\n /** another track */\n },\n ...\n ]\n}\n'})})]})}function h(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},28453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>l});var t=i(96540);const a={},s=t.createContext(a);function r(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.