1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[919],{14490:(e,i,t)=>{t.r(i),t.d(i,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>c});var a=t(74848),n=t(28453);const s={title:"Getting Started",slug:"/"},r=void 0,o={id:"getting-started",title:"Getting Started",description:"Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web.",source:"@site/versioned_docs/version-1.0.0/getting-started.md",sourceDirName:".",slug:"/",permalink:"/docs/",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-1.0.0/getting-started.md",tags:[],version:"1.0.0",frontMatter:{title:"Getting Started",slug:"/"},sidebar:"docs",next:{title:"Usage",permalink:"/docs/usage"}},l={},c=[{value:"What is a grammar for data visualization?",id:"what-is-a-grammar-for-data-visualization",level:2},{value:"JavaScript API",id:"javascript-api",level:2}];function d(e){const i={a:"a",em:"em",h2:"h2",p:"p",strong:"strong",...(0,n.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.p,{children:"Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web."}),"\n",(0,a.jsxs)(i.p,{children:["To get started with Gosling, we recommend going through the ",(0,a.jsx)(i.a,{href:"/tutorials",children:"Create Single Track Visualization Tutorial"}),". Then, you can explore examples in the ",(0,a.jsx)(i.a,{href:"https://gosling.js.org",children:"online editor"}),", go through the ",(0,a.jsx)(i.a,{href:"category/grammar-guide",children:"grammar guide"}),", and start building your own Gosling visualizations using the the ",(0,a.jsx)(i.a,{href:"reference",children:"grammar reference"})," and ",(0,a.jsx)(i.a,{href:"js-api",children:"JavaScript API"})," documentation."]}),"\n",(0,a.jsxs)(i.p,{children:["Please see ",(0,a.jsx)(i.a,{href:"usage",children:"usage guide"})," to learn about all the contexts in which Gosling can be used."]}),"\n",(0,a.jsx)(i.h2,{id:"what-is-a-grammar-for-data-visualization",children:"What is a grammar for data visualization?"}),"\n",(0,a.jsxs)(i.p,{children:["Words are combined together into sentences based on their parts of speech and grammar rules. In a similar way, visual components (e.g., a coordinate axis, plot markers, and legends) have specific roles and are combined according to certain rules. You probably know these rules without realizing it! These roles and rules have been made explicit, such as in the ",(0,a.jsx)(i.a,{href:"https://link.springer.com/book/10.1007/0-387-28695-0",children:"Grammar of Graphics"}),"."]}),"\n",(0,a.jsxs)(i.p,{children:["Similarly, ",(0,a.jsx)(i.em,{children:"genomic"})," data visualizations can be understood as being made up of components which follow a set of rules. The ",(0,a.jsx)(i.strong,{children:"Gosling grammar"})," formalizes these rules for genomic data visualizations."]}),"\n",(0,a.jsxs)(i.p,{children:["How is the Gosling grammar used in practice? A Gosling visualization is defined using a ",(0,a.jsx)(i.strong,{children:"Gosling specification"}),", which is a ",(0,a.jsx)(i.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON",children:"JSON object"}),". The structure and values within this JSON object are determined by the Gosling grammar. See the example below to see how parts of a Gosling specification corresponds to its visualization."]}),"\n",(0,a.jsx)("img",{src:"/img/spec-vis.png"}),"\n",(0,a.jsx)(i.h2,{id:"javascript-api",children:"JavaScript API"}),"\n",(0,a.jsxs)(i.p,{children:[(0,a.jsx)(i.strong,{children:"Gosling.js"})," takes the Gosling specification as an input and creates the visualization defined by it. You can programmatically interact with this visualization using ",(0,a.jsx)(i.a,{href:"js-api",children:(0,a.jsx)(i.strong,{children:"JavaScript API functions"})}),"."]}),"\n",(0,a.jsx)(i.p,{children:"For example, you can use an API function to make the visualization zoom to a particular genomic position, or you can subscribe to click events in the visualization. This is useful to building your own interactive visualizations with Gosling!"})]})}function h(e={}){const{wrapper:i}={...(0,n.R)(),...e.components};return i?(0,a.jsx)(i,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},28453:(e,i,t)=>{t.d(i,{R:()=>r,x:()=>o});var a=t(96540);const n={},s=a.createContext(n);function r(e){const i=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function o(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),a.createElement(s.Provider,{value:i},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.