These are chat archives for biojs/biojs

20th
Feb 2015
Joey Lin
@linjoey
Feb 20 2015 03:45

@thirdknife, when you mentioned that your data is not structured as d3 works, do you mean that it’s not bound to each chromosome band? The original data join in the chromosome code only contain band info, such start, stop, and band id etc, and noting about your genes. If you want to attach a tool-tip info to each band, you can manually calculate and attach the gene info on the bands’ onClick as @greenify mentioned.

//your genes data array
var genesData

// from the chromosome code, band is the enter() selection from the data join, aka each ‘band’
band.on(“click”. function(d){
    1. Get the current band’s name -> this is in the data d 
    2. Get the list of genes in the band -> loop your genesData array that matches this band
    3. Get svg drawing coordinates for the tooltip by using the xscale’s inverse function, i.e. if you give it chromosome band coordinates, it’ll spit out relative x coordinates for you to draw
   4. Those coordinates will correspond exactly to the chromosome band, use it to append your tool-tip
   5. set the tool tip with the list of genes, etc, and other attributes

});

with that, each of the band’s <g> grouping will contain a tooltip item, and have the click/or mouseover behaviour you’ve specified.

Shakeel Shafiq
@thirdknife
Feb 20 2015 03:49
@linjoey that is exactly how I want but instead of tooltip on click of a band I want my genes to be drawn and when I click on each gene it shows a tooltip about the gene info.
Joey Lin
@linjoey
Feb 20 2015 03:53

then maybe you need to create a new data join for your genes data.
something like var genes = d3.selectAll(''g").data(your data).enter().append("g")

and you can specifiy genes.on('click', tooltip)?

thats my raw data
then I group it into something like this
I group on the basis of bands
and when the draw function loops over the band I select all the genes in that particular band and draw my genes using band.append("foreignObject")
Shakeel Shafiq
@thirdknife
Feb 20 2015 04:03
first I was using bootstrap tooltip which was working great if the band has no padding/margin
tyreek
@tyreek
Feb 20 2015 04:03
(biojs-registry via irc) BioJS package update: angularplasmid to 1.0.2 by @Rehan Chawdry
Shakeel Shafiq
@thirdknife
Feb 20 2015 04:04
now I am trying to integrate this https://github.com/zmaril/d3-bootstrap-plugins
Prasun Anand
@prasunanand
Feb 20 2015 14:36
@greenify angular plasmid has already been added to biojs.io . I want to work on this biojs/biojs#118 Plz help.
Sebastian Wilzbach
@wilzbach
Feb 20 2015 14:37
@prasunanand: what specific question do you have?
Prasun Anand
@prasunanand
Feb 20 2015 14:38
I am not sure whether to continue on creating a plasmid visualisation.
component
Sebastian Wilzbach
@wilzbach
Feb 20 2015 14:39
It was never to create a new - just to see whether what we have atm is reusable
but you are right - angularplasmid is beautiful
Prasun Anand
@prasunanand
Feb 20 2015 14:40
yes. Its perfect.
Sebastian Wilzbach
@wilzbach
Feb 20 2015 15:41
so you have answered your question whether or not to work on SNAP ;-)
@thirdknife: Sorry that I had to leave abrupt. Are you making progress?
Shakeel Shafiq
@thirdknife
Feb 20 2015 17:35
@greenify yes I have fixed the issue and used d3-bootstrap-tooltip
Sebastian Wilzbach
@wilzbach
Feb 20 2015 17:36
(: