Perl 6 - the future is here, just unevenly distributed

IRC log for #opentreeoflife, 2014-12-10

| Channels | #opentreeoflife index | Today | | Search | Google Search | Plain-Text | summary

All times shown according to UTC.

Time Nick Message
01:41 towodo joined #opentreeoflife
10:17 prontotest joined #opentreeoflife
10:17 prontotest left #opentreeoflife
10:21 mtholder joined #opentreeoflife
11:15 mtholder joined #opentreeoflife
12:05 mtholder joined #opentreeoflife
12:32 mtholder joined #opentreeoflife
13:54 towodo joined #opentreeoflife
16:08 Lyndon joined #opentreeoflife
16:09 Lyndon Hey @jimallman Are you there by chance?
16:09 jimallman Lyndon: i’m here!
16:09 jimallman what’s cooking?
16:10 Lyndon Quick question. I've implemented a working version of the d3.phylogram script you've used as well. I'm wondering how difficult it would be to add pan / zoom capacity to that?
16:10 Lyndon This is just a simple tool to display a newick tree, but some of the trees are pretty large.
16:11 jimallman Rather then re-plotting the phylogram, i’d recommend more direct manipulation of the SVG “viewBox”. This will be much faster!
16:12 jimallman viewBox is a lightweight way of setting the “viewport” bounds into the (infinite) visual space of SVG.
16:12 jimallman I have code in Tree Illustrator that does this, but it’s complicated by the need to keep rulers, etc. in sync.
16:14 mtholder joined #opentreeoflife
16:14 Lyndon Yeah. I looked at some of that last night. Far more than I need here. I just need a clean simple pan / zoom with the tree. I'll take a look at that. I still get in over my head with Javascript more often that not. Thanks!
16:14 jimallman https://github.com/OpenTreeOfLife/tree-illustrator/blob/8ccd2e93bf2a47d5f6129235825824e95f5408de/stylist/stylist.js#L142
16:15 jimallman the crux of it is here:
16:15 jimallman https://github.com/OpenTreeOfLife/tree-illustrator/blob/8ccd2e93bf2a47d5f6129235825824e95f5408de/stylist/stylist.js#L218
16:15 jimallman you can experiment in the JS console like so:
16:16 jimallman d3.select(‘#mySVG’).setAttribute(‘viewBox’, (myX +’  ‘+ myY +’  ‘+ myWidth +’  ‘+ myHeight));
16:17 jimallman i can probably offer some quick code if I know where you’re working
16:17 Lyndon https://github.com/lcoghill/phyloboost/blob/master/phyloboost/views/convexsubtrees/phylogram.html
16:17 Lyndon that is the view
16:18 jimallman (the main wrinkle is that this x/y/with/height is reckoned in the *internal* units of the SVG element. potential gotchas here, but no biggie if you’re being consistent)
16:18 jimallman cool, reading now...
16:18 Lyndon https://github.com/lcoghill/phyloboost/blob/master/phyloboost/controllers/convexsubtrees.py#L115
16:18 Lyndon and that is the controller.
16:20 jimallman OK, got it. it looks like your resulting SVG will have default values for viewBox and possibly internal units (d3 defaults to px), which keeps things simple..
16:21 jimallman is there a live page, so we can look at the resulting SVG?
16:22 jimallman Lyndon: by the way, i’m getting some interest results by googling “svg viewbox pan zoom”. not surprisingly, there are existing JS helpers for this.
16:22 Lyndon just an amazon ec2 instance. https://54.149.102.178/convexsubtrees/phylogram/3 for example
16:22 jimallman perfect!
16:23 jimallman in Chrome, i see the SVG element has just “width” and “height” attributes, so viewbox and units are defaults. watch for possible quirks in other browsers, but this should make for an easy start
16:25 jimallman apologies, i mistyped my JS snippet above. should have said ‘attr(‘ instead of ‘setAttribute(‘...
16:26 jimallman try this in JS console of ec2 URL above:    d3.select('#phylogram svg').attr('viewBox', '0 0 100 100')
16:27 jimallman … then try this:  d3.select('#phylogram svg').attr('viewBox', '500 200 100 100')
16:29 Lyndon Yep. that definitely gives a high zoom.
16:29 jimallman you’ll find that the width and height will conform to the viewport, even if the proportions are wrong. this behavior can be shaped using the ‘preserveAspectRatio’ attribute, described here:  http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
16:29 jimallman easier examples here: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
16:30 jimallman you’ll notice that in the Tree Illustrator code, we maintain a handy JS object ‘viewbox’ that keeps track of our desired (x, y, with, height). this is quick to modify, then we generate the funky space-delimited string when it’s time to update the SVG viewBox.
16:31 jimallman so pan is simply a matter of incrementing/decrementing the x and y values. zoom is a bit more tricky.
16:32 jimallman i’m handling this by tracking a separate, decimal in JS: ‘viewportMagnification’
16:32 jimallman https://github.com/OpenTreeOfLife/tree-illustrator/blob/8ccd2e93bf2a47d5f6129235825824e95f5408de/stylist/stylist.js#L689-L690
16:34 jimallman this starts (naturally) at 1.0, and the zoomViewport function applies a multiplier to zoom in and out. this value is then used to drive changes to viewBox with and height. hm, but that’s way overkill for your needs.
16:35 jimallman instead, you should be able to just set the multipliers and use them directly (eg, zoom-in means multiply width and height by 1.25)
16:36 jimallman (and possibly adjust the x and y to keep the current elements “centered” in the viewport)
16:37 jimallman Lyndon: ^ sorry for the flood
16:37 Lyndon perfect. thanks Jim. Your skill is amazing as always. This will get me going.
16:48 jimallman cool! we should definitely compare notes about some of the event-driven stuff Rick wanted, like gestures to zoom, etc.
17:25 mtholder joined #opentreeoflife
18:05 mtholder joined #opentreeoflife
19:32 mtholder joined #opentreeoflife
20:35 mtholder joined #opentreeoflife
20:39 towodo joined #opentreeoflife
23:52 josephwb joined #opentreeoflife
23:52 josephwb you there jimallman?

| Channels | #opentreeoflife index | Today | | Search | Google Search | Plain-Text | summary