Class vq.CircVis
Extends
vq.Vis.
Represents the circular ideogram layout. It includes all of the features of Circvis: feature glyphs/labels,
ring plots, legends, and a circular network layout. The visualization is configured with a JSON object that specifies the data and
interactive effects/behaviors.
The JSON Object passed into the CircVis#draw function as input to the visualization:
GENOME: {
DATA:{
key_order : {Array} - An array of string characters denoting the keys for each ideogram ex. ['1','2','X','Y'],
key_length : {Array} - An array of numbers denoting the total length of each ideogram. The total is fitted to the
circumference of the circular plot ex. [3231323,2437865,2265741,1987347]
},
OPTIONS: {
key_reverse_list : {Array} - Array of ideogram labels to plot in the reverse (counter-clockwise) direction.
eg. ['16','17']. Defaults to empty array,
radial_grid_line_width : {Number} - Width of radial grid lines. Default is null (no grid lines),
label_layout_style : {String} - Layout style for ideogram key labels. either 'clock' or 'default'. Default is 'default',
listener : {function} - Function handler to execute on click of ideogram label,
label_font_style : {String} - Ideogram label font style. ex. '20pt helvetica bold'. Defaults to '16px helvetica, monospaced'.
radial_grid_line_width : {Integer} - If defined with a numeric value, ideograms will be partitioned with radial lines having the
given width.
}
},
PLOT: {
width : {Number} - total width of tool. Defaults to 400,
height : {Number} - total height of tool. Defaults to 400,
container : {Element or String} - Div to render the tool onto. Omission of this parameter causes the tool to be
rendered to the document body. The parameter may be either the HTMLElement or the string id (eg. "circvis_div"),
vertical_padding : {Number} - The number of pixels to pad above and below the rendered tool. Defaults to 0,
horizontal_padding : {Number} - The number of pixels to pad to the left and right of the rendered tool. Defaults to 0,
enable_pan : {Boolean} - Enable mouse drag 'pan' behavior for entire plot. Defaults to 'false',
enable_zoom : {Boolean} - Enable mouse wheel 'zoom' behavior for entire plot. Defaults to 'false',
show_legend : {Boolean} - Enable display of a legend for circular plot. Defaults to 'false',
legend_corner : {String} - Anchor point for legend. Either ('ne','nw','se','sw') Defaults to 'ne',
legend_radius : {Number} - Outer radius for legend circle plot.
},
DATA:{
data_array : {Array} - An array of Circvis data nodes, ex : [ {"chr": "1", "end": 12784268, "start": 644269,
"value": -0.058664}]
value_key : {String} - The property of each array element that signifies the value to evaluate for the ring. This
is useful for scatterplots and other types of rings.
},
PLOT :{
type : The type to be drawn. Options are 'heatmap','histogram','scatterplot','karyotype'. Defaults to 'histogram',
height : Radial width (in pixels) of the ring plot. Defaults to 100,
},
OPTIONS: {
tile_padding : {Number} Distance (in pixels) between tiles that arranged at different heights. default is 5 ,
tile_overlap_distance : {Number} Minimum number of base pairs of separation in order to display tiles as neighbors. default is 0.1 ,
tile_height : {Number} - Number of pixels in height for tile type rings. Default is 5 ,
tile_show_all_tiles : {Boolean} - value to determines whether to overlap tiles in order to displa them all. default : false ,
legend_label : {String} - optional string describing ring. Default is '',
legend_description : {String} - Optional string to display when cursor is hovered over ring in legend. Default is '',
draw_axes : {Boolean} - Determines whether to draw axes and axes labels on a histogram or scatterplot. Defautlts to true,
outer_padding : {Integer} - Padding of outer edge of ring (in pixels), Dfault is 1,
base_value : : {Number} - base value from which to plot in ring. Optional,
min_value : {Number} - minimum value to plot in ring. Optional,
max_value : {Number} - maximum value to plot in ring. Optional,
fill_style : {Function or String} - Either a function that returns a css color string or the string itself. Default is
function(d) { return d.value >= 0 ? "rgba(20,40,200,0.6)" : "rgba(200,20,40,0.6)";} },
stroke_style : {Function or String} - Either a function that returns a css color string or the string itself. Default is
function(d) {return d.value >= 0 ? "#00f" : "#f00";},
shape : {Function/String} - Scatterplot glyph shape. 'triangle','diamond','cross','square','circle','tick','bar'. Defaults to
function(d) {return 'circle';},
radius : {Function/Number} - scatterplot glyph radius. Defaults to function(d) {return 2;}
listener : {Function} - the function to call on a click. it is passed {key,{start:{Integer},end:{Integer},value:{Number}},
tooltip_items: {Tooltip Items} - Defaults to {Chr:'chr',Start:'start',End:'end',Value:'value'},
tooltip_links: {Tooltip Links} - Displays links that can be constructed from datapoint attributes. Defaults to {}
}
}
],
TICKS : {
DATA: {
data_array: {Array} - An array of Circvis data nodes where the 'value' is expected to be the label of the tick.
},
OPTIONS : {
height : {Number}, - The radius(in pixels) of the ring containing the tick labels/feature glyphs . Defaults to 60,
listener : {Function} - A function to execute on click of a glyph. Function is passed {key, start,end, value}
fill_style: {Function or CSS Color String} - A declared CSS color or a pv.Color must be the result Default is function(){return 'red';},
stroke_style : {Function or CSS Color String} - A declared CSS color or a pv.Color must be the result Default is function(){return 'white';},
display_legend: {Boolean} - Setting this to true will display a legend on the upper left corner mapping the tick color
to the color_keys array.
legend_corner : {String} - Anchor point for legend. Either ('ne','nw','se','sw') Defaults to 'nw',
outer_padding : {Number} - The distance between the tool boundary and the feature glyph ring. Defaults to 0,
overlap_distance : {Number} - Used in tiling of the feature glyphs. The maximum distance (in base pairs) that constitutes overlapping features. Defaults to 7000000.0
tile_ticks : {Boolean} - Declare whether to tile feature glyphs or lay all of them out at the same level. Defaults to true,
label_key : {String} - The property of the feature data which denotes the feature label. eg. {label:'GENEA'} would require label_key: 'label'
label_map : {Array} - A mapping of an example feature label to a string describing that feature type. Each element is an object.
eg. [{key:'TP53', label:'Gene'}]. Default is no mapping.
wedge_height : {Number}, - The height(in pixels) of each tick/feature glyphs . Defaults to 10,
wedge_width : {Number}, - The width(in degrees) of each tick/feature glyphs . Defaults to 0.5,
tooltip_items : {Tooltip Object} - JSON object that configures the tooltip display of a feature glyph. The mapping of each property is:
tooltip label : 'data_point_property'.
The data_point_property can be statically defined or be a function that operates on the data point and returns a string. Default is:
{ Chr : 'chr', Start : 'start', End : 'end', Label:'value'}
tooltip_links: {Tooltip Links} - Displays links that can be constructed from datapoint attributes. Defaults to {}
}
},
NETWORK:{
DATA:{
data_array : {Array} - An array of Circvis network objects, which consist of 2 data nodes, a linkValue, and a linkOptions
},
OPTIONS: {
node_listener : {Function} - function to execute on click on a node. Default is function() {return null;},
link_listener : {Function{ - function to execute on click of a link. Default is function() {return null;},
link_alpha : {Number or Function} - a value between (0.0,1.0) which defines the link 'alpha' for a given edge. Default is function() {return 0.7;},
link_line_width : {Number or Function} - link width in units of pixels. Default is function(node,link) { return 1; },
node_fill_style : {Function or String} - Either a function that returns a css color string, the string itself, or 'ticks'. Default is
function() { return 'blue';},
link_stroke_style : {Function or String} - Either a function that returns a css color string or the string itself. Default is function() { return 'red';},
tile_nodes : {Boolean} - Determines whether network nodes are 'tiled' to prevent visual occlusion by proximal features. Defaults to 'false'.
node_key : {Function} - Function that accepts a node object argument and returns the ideogram 'key' label. Defaults to function(node) { return node['chr'];},
max_node_linkdegree : {Number} - A number greater than zero which filters out all nodes with a higher linkDegree ex. 100. Defaults to 9999,
min_node_linkdegree : {Number} - A number greater than zero which filters out all nodes with a lower linkDegree ex. 2. Defaults to 0,
node_overlap_distance : {Number} - When tiling the graph nodes, the maximum distance (in base pairs) that constitutes overlapping tiles. Defaults to 12000000.0
node_tooltip_items : {Tooltip Object} - Defaults to { Chr : 'chr', Start : 'start', End : 'end'},
link_tooltip_items : {Tooltip Object} - Defaults to { 'Node 1 Chr' : 'sourceNode.chr', 'Node 1 Start' : 'sourceNode.start', 'Node1 End' : 'sourceNode.end',
'Node 2 Chr' : 'targetNode.chr', 'Node 2 Start' : 'targetNode.start', 'Node 2 End' : 'targetNode.end'},
node_tooltip_links: {Tooltip Links} - Displays links that can be constructed from datapoint attributes. Defaults to {},
link_tooltip_links: {Tooltip Links} - Displays links that can be constructed from datapoint attributes. Defaults to {}
}
}
};
Defined in: vq.circvis.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Method Attributes | Method Name and Description |
|---|---|
|
draw(circvis_object)
Constructs the Circvis model and adds the SVG tags to the defined DOM element.
|
|
|
selectNodeLabel(label)
Highlight the network and tick corresponding to the requested tick.
|
|
|
setMaxNodeLinkDegree(max_linkDegree)
Set the maximum link degree for which a node will be displayed
|
|
|
setMaxPlotValue(ring_number, max_value)
Set the maximum value on the y-axis of a ring plot.
|
|
|
setMinNodeLinkDegree(min_linkDegree)
Set the minimum link degree for which a node will be displayed
|
|
|
setMinPlotValue(ring_number, min_value)
Set the minimum value on the y-axis of a ring plot.
|
|
|
setSize(height, width)
Changes the plot size and re-renders the plot.
|
|
|
setZoomEnabled(zoom_enabled)
Include/Remove the zoom effect using a mousewheel
|
Method Detail
draw(circvis_object)
Constructs the Circvis model and adds the SVG tags to the defined DOM element.
- Parameters:
- {JSON Object} circvis_object
- - the object defined above.
selectNodeLabel(label)
Highlight the network and tick corresponding to the requested tick. Passing the empty string('') causes the
highlighting to be turned off.
- Parameters:
- {String} label
- - the node id (commonly the tick label string) of the feature to highlight
setMaxNodeLinkDegree(max_linkDegree)
Set the maximum link degree for which a node will be displayed
- Parameters:
- {Number} max_linkDegree
- - the value to assign as the maximum link degree allowable.
setMaxPlotValue(ring_number, max_value)
Set the maximum value on the y-axis of a ring plot.
- Parameters:
- {Integer} ring_number
- - the index of the ring to set the value for. Zero is the outermost ring.
- {Number} max_value
- - the value to assign as the maximum to plot.
setMinNodeLinkDegree(min_linkDegree)
Set the minimum link degree for which a node will be displayed
- Parameters:
- {Number} min_linkDegree
- - the value to assign as the minimum link degree allowable.
setMinPlotValue(ring_number, min_value)
Set the minimum value on the y-axis of a ring plot.
- Parameters:
- {Integer} ring_number
- - the index of the ring to set the value for. Zero is the outermost ring.
- {Number} min_value
- - the value to assign as the minimum to plot.
setSize(height, width)
Changes the plot size and re-renders the plot.
- Parameters:
- {Number} height
- - plot height in units of pixels
- {Number} width
- - plot width in units of pixels
setZoomEnabled(zoom_enabled)
Include/Remove the zoom effect using a mousewheel
- Parameters:
- {Boolean} zoom_enabled
- - the index of the ring to set the value for. Zero is the outermost ring.