Guide Picker
Guide Picker is an open source online tool available at DeskGen platform allowing visualisation and rapid comparison of gRNAs in coding regions of the human genome (GRCh38.81). This repository concerns the graphic component (scatterplots) used in the online tool. Learn more about Guide Picker.
Install
npm install guide-picker --save
Get Started
Guide Picker is written using ES6 modules and can be imported directly into your ES6 application
or using Node
var guidePicker =
Once successfully loaded, Guide Picker needs to be instantiated passing in options
parameter
var options =layout:target: documentwidth: documentoffsetWidthheight: windowinnerHeightmargin: top: 40 right: 80 bottom: 60 left: 60axes:x:name: 'Percent Peptide'path: 'scores.site.percent_peptide.value'round: truey:name: 'Representation'path: 'scores.site.representation.value'round: truetools:force: truevar guidePicker = options
And the draw
method called with data
guidePicker
The DeskGen RPC API can be used to query any gene in the human genome (GRCh38.81). Alternatively, you can use your own data, as Guide Picker is fairly data model agnostic. As along as data
is an array of objects, you only need to supply a path to x and y coordinates in options.axes.x.path
and options.axes.y.path
(see options
object above).
Guide Picker emits two kinds of events: filter
and select
. You can use these events to integrated it into your own application or make multiple Guide Picker components work together
documentdocument
Example
For a working example, clone the repository and run
npm installnpm run buildnpm run build-test
In your browser, navigate to one of the two files
file:///Users/.../open-guide-picker/test/guide-picker/guide-picker.html
file:///Users/.../open-guide-picker/test/guide-picker/multi-picker.html