1"use strict";(self.webpackChunkgosling_website=self.webpackChunkgosling_website||[]).push([[3118],{40655:(n,e,i)=>{i.r(e),i.d(e,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>l});var t=i(74848),a=i(28453);const s={title:"User Interaction"},r=void 0,o={id:"user-interaction",title:"User Interaction",description:"Zooming and Panning",source:"@site/versioned_docs/version-0.10.1/user-interaction.md",sourceDirName:".",slug:"/user-interaction",permalink:"/docs/0.10.1/user-interaction",draft:!1,unlisted:!1,editUrl:"https://github.com/gosling-lang/gosling-website/edit/main/versioned_docs/version-0.10.1/user-interaction.md",tags:[],version:"0.10.1",frontMatter:{title:"User Interaction"},sidebar:"docs",previous:{title:"Composition",permalink:"/docs/0.10.1/composition"},next:{title:"Semantic Zoom",permalink:"/docs/0.10.1/semantic-zoom"}},c={},l=[{value:"Zooming and Panning",id:"zooming-and-panning",level:2},{value:"Linking Views",id:"linking-views",level:2},{value:"Brushing and Linking",id:"brushing-and-linking",level:2}];function d(n){const e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:"zooming-and-panning",children:"Zooming and Panning"}),"\n",(0,t.jsx)(e.p,{children:"Each visualization in Gosling supports the Zooming and Panning interaction.\nUsers can zoom in/out a visualization using the scrolling up/down actions.\nUsers can pan by clicking on the visualization and then drag it in the desired direction."}),"\n",(0,t.jsxs)(e.p,{children:["Zooming and panning are controlled through the ",(0,t.jsx)(e.code,{children:"static"})," property, which has a default value of ",(0,t.jsx)(e.code,{children:"false"}),".\nWhen ",(0,t.jsx)(e.code,{children:"static = true"}),", zooming and panning are disabled.\nUsers can set the ",(0,t.jsx)(e.code,{children:"static"})," property of all tracks at the root level or specify it in a single track definition."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-javascript",children:'{\n "static": true, //disable zoom & pan for all tracks\n "tracks": [\n {\n "static": false, // enable zoom & pan for this track\n ...\n },\n {\n ...\n },\n ...\n ]\n}\n'})}),"\n",(0,t.jsx)(e.h2,{id:"linking-views",children:"Linking Views"}),"\n",(0,t.jsx)(e.p,{children:"When views/tracks are linked, the zooming and panning performed in one view/track will be automatically applied to the linked views/tracks."}),"\n",(0,t.jsx)(e.p,{children:(0,t.jsx)(e.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_linking_tracks",children:"Try it in the online editor"})}),"\n",(0,t.jsxs)(e.p,{children:["Views and tracks can be linked through an user-assigned id.\nThis id is assigned to a ",(0,t.jsx)(e.code,{children:"track"})," through the ",(0,t.jsx)(e.code,{children:"x.linkingId"})," property, and assigned to a ",(0,t.jsx)(e.code,{children:"view"})," through the ",(0,t.jsx)(e.code,{children:"linkingId"})," property."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-javascript",children:'// linking serveral tracks\n{\n "tracks":[\n // track A\n {\n "data": ...,\n "mark": "rect",\n "x": {\n ..., // other properties of x channel\n "linkingId": "a unique string" // assign a linking id for the track A\n }\n },\n // track B\n {\n "data": ...,\n "mark": "point",\n "x": {\n ..., // other properties of x channel\n "linkingId": "a unique string" // the same linking id links track A and track B\n }\n },\n ... // other tracks\n ]\n}\n'})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-javascript",children:'// linking views and tracks\n{\n "views": [\n {\n // view A\n "linkingId": "detail",\n ....\n },\n {\n // view B\n "linkingId": "detail",\n ....\n },\n {\n // view C\n "tracks":[\n {\n // this track wil be linked to view A and view B\n "x": {"linkingId": "detail", ...}, \n ...\n },\n {...} // without the linkingId, this track will not be linked\n ]\n }\n ]\n}\n'})}),"\n",(0,t.jsx)(e.h2,{id:"brushing-and-linking",children:"Brushing and Linking"}),"\n",(0,t.jsxs)(e.p,{children:["Users can use ",(0,t.jsx)(e.strong,{children:"brushing"})," to select a subset of the data items using a rectangle. Users can modify the left and right edge of the rectangle to modify the selection. The selected data items can be linked to data items in another track."]}),"\n",(0,t.jsx)(e.p,{children:(0,t.jsx)(e.a,{href:"https://gosling-lang.github.io/gosling.js/?example=doc_brush",children:"Try it in the online editor"})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-javascript",children:'{\n "tracks":[\n // track A\n {\n "data": ...,\n "mark": "line",\n ..., \n\n // create a rectangle brush\n "alignment": "overlay",\n "tracks": [\n {}, // this dummy object cannot be removed\n {\n "mark": "rect-brush", \n "x": {"linkingId": "linking-with-brush"}, // assign a unique id to the brush\n "color": {"value":"steelBlue"}\n }\n ]\n },\n // track B\n {\n "data": ...,\n "mark": "point",\n "x": {\n ..., // other properties of x channel\n "linkingId": "a unique string" // the same linking id links track B and the brush in track A\n }\n },\n ... // other tracks\n ]\n}\n'})})]})}function h(n={}){const{wrapper:e}={...(0,a.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}},28453:(n,e,i)=>{i.d(e,{R:()=>r,x:()=>o});var t=i(96540);const a={},s=t.createContext(a);function r(n){const e=t.useContext(s);return t.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(a):n.components||a:r(n.components),t.createElement(s.Provider,{value:e},n.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.