zoom and fill into center instead of left aligned

[btbonval]

When clicking on things which are zoomed, the zoom expands the window but centers the subject on the left side instead of closer to center.

zoom function is here: https://github.com/sethwoodworth/books-library-stack/blob/master/wireframes/03/js/faculty_render.js#L112

[btbonval]

Actually, it is left aligned at all times in Firefox.

Instead of JS, this can probably be fixed via some CSS guides. The elements might be instantiated dynamically, but classes can be added dynamically as well.

[btbonval]

<section class="vis"> contains both the bubbles and the text. One goal was to have bubbles and text both be more centered, in which case the vis class is the correct thing to change. However, I think I prefer the text box being right aligned. My tiny screen does not give much room for both to be squished any further together.

[btbonval]

changing the margin or padding of the .faculty-by-unit class moves the entire drawing, so there is less total drawing, although it is more centered.

It turns out we care more about how the SVG is drawn respective to its container than the positioning of the container itself. CSS is not a good solution.

[btbonval]

It might be better to try to use D3's built in zoom/translate capabilities: https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-zoom

[btbonval]

SVG geometric zooming http://bl.ocks.org/mbostock/3680999

[btbonval]

The above works for moving and zooming around the bubble map as a user. It doesn't respect zoom level in any obvious way, although there would be three zoom levels of interest if that could somehow be captured.

There should be a way to capture the zoom object in order to translate/zoom it when items in the right text box are clicked, but it doesn't seem super easy at first glance.

[btbonval]

New branch feature_d3_zoom was created for this feature.

All text is now shown, for #3. Need to determine zoom level to show/hide text based on node depth, because it is unreadable right now.

One can zoom and translate about the map easily with double click, touch, and mouse wheel.

The connection between text box and circles has been lost, related to #6. This will need to be regained. The text box, when something is clicked within it, should able able to use zoom.center() to focus on the

[btbonval]

click to zoom, much like the function in main, but zooms out when the thing zoomed into is clicked on: http://bl.ocks.org/mbostock/2206590

zoom slider, which should help capture the discrete zoom levels and make it clear where to zoom out: http://thisismattmiller.com/blog/add-zoom-slider-to-d3-js/

[btbonval]

This text is too long to be readable without word wrap. SVG does not do word wrap as such, but peeps be fixin probs: http://svgjs.com/textflow/

[btbonval]

textflow didn't work with the d3 stuff.

manually adjust the text? some wordwrap code: http://james.padolsey.com/javascript/wordwrap-for-javascript/ unlicensed: http://james.padolsey.com/terms-conditions/