emepyc

Example of how to use zoom.extent and zoom.translateExtent to limit panning/zooming in d3 v4. The initial state of the visualisation are centered on coordinates [500, 1500] using zoom.transform. The limits for panning/zooming are set to [0, 5000].

emepyc

{"tree":{"events":{"type":"speciation"},"branch_length":0,"children":[{"events":{"type":"speciation"},"branch_length":0,"children":[{"events":{"type":"speciation"},"branch_length":0.141044,"children":[{"events":{"type":"speciation"},"branch_length":0.137872,"children":[{"events":{"type":"speciation"},"branch_length":0.183219,"children":[{"events":{"type":"speciation"},"branch_length":0.007354,"children":[{"events":{"type":"speciation"},"branch_length":0.196061,"children":[{"exon_boundaries":{"boundaries":[28,138,163,195,208,246,284,307,685,2766,2800,2831,3003,3065,3128,3186,3314,3368,3419,3465,3535,3592,3651,3742,3811],"number_of_exons":26},"sequence":{"mol_seq":{"seq":"----MDSCIQN---MYDAFKDEIWK--ELGPLDPNWFEVLTAQASLNEGN---VADNDE--LCANQEGYFKVPLEKTAVESQLFSTPKVFRHCQIV---SP------------------------DTEDDTSFTAAQEKEMLPWMPTQSPCLFQP---PKLCVSNLKCEGVQPQTE----------A----SFDLLHSPE--KSP-ASYANHISESLGAQINPDISWTSSFNTPRALPSTLILSKTDESPCPESVTADR--KVVFV-----------------RKLFPSLSNSSLNTSR-TSLGPVFPVTDTCSKSPLNQSESHQQQ---K------VPDALEG-

emepyc

TnT Tooltip example simulating a tooltip to display async data. Clicking on the red circle fires a plain tooltip with a spinner. After 2 seconds, this spinner is substituted by a table tooltip displaying the data.

emepyc

Example of TnT Tooltip showing on mouseover information.

emepyc

TnT Tooltip example created using the generic tooltip interface.

emepyc

Example of TnT Tooltip showing how different IDs affect the displayed tooltips. Red circles display tooltips with the same ID which is different from the ID of the blue circles. For this reason only one tooltip of each type (red / blue) can be displayed at the same time.

emepyc

Example of table tooltip created with TnT Tooltip

emepyc

height: 2500

emepyc

Example of vertical axis in a track

emepyc

Example of TnT visualisation showing tree updates.