right hand text display needs to be more flexible about books-library-stack HOT 14 OPEN

Here's a link for collapsing menus horizontally. It isn't ideal, but it is pure CSS3.
http://designmodo.com/css3-accordion-menu/
A version using jQuery for browsers that don't support the CSS3 stuff fully:
http://designmodo.com/jquery-accordion-menu/

from books-library-stack.

Fun fact: right now, the side panel does stack:

    $("#academic-units-box").hide();
    $("#faculty-info-box").show();

If both are allowed to show, they stack. It's long, and it's ugly. Possibly hide() could perform a collapse function.

from books-library-stack.

Need to call the D3 zoom/translate stuff to center on an object clicked on in the menu.

from books-library-stack.

ugh. zoom.translate() is absolute (not relative to the cursor), yet relative in some crazy way to zoom.scale(). Given some object's x/y, it does not seem clear at all how to determine the correct translation without knowing how it is relative to scale. Probably some function of the window. This seems like a horrible oversight for the zoom behavior functionality.

Good note on how to actually do this:

// prepare handler
handler = d3.behavior.zoom();
// install handler into svg while creating it
var svg = d3.select(".faculty-by-unit").append("svg")
    .append("g")
      .call(handler.on("zoom", function () {
        // handler intercepts mouse scroll, drag, and all kinds of nonsense, converts it into translate/scale events.
        svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      }));
// programatically force a "translation" to (0,0) at scale 1.
// repeating this line multiple times leaves the image in the same place, so translate is not a delta.
handler.translate([0,0]).scale(1).event(svg);

from books-library-stack.

reverse engineering FTW!

Centered a name at the origin, zoomed out, then recentered the same name at the origin as best as I could. The results indicate a multiplicative relationship between translate and scale. Now the question is how to map the object's belief of its x and y coordinates into the coordinates that translate is using...

zthandler.scale()
17.87659420915552
--
zthandler.translate()[0] / zthandler.scale()
-91.4156211392312
zthandler.translate()[1] / zthandler.scale()
-338.27150951122053

zthandler.scale()
10.852834619581376
--
zthandler.translate()[0] / zthandler.scale()
-91.47949506746745
zthandler.translate()[1] / zthandler.scale()
-338.86453065750396

from books-library-stack.

nearly total win:

function zoom_to(d) {
    // zoom to the given node object in the graph
    var scale = depth_to_scale[d.depth];
    var position = [-1*scale*d.x, -1*scale*d.y];
    zthandler.translate(position).scale(scale).event(svg);
}

presently this puts the center of the bubble of the chosen list item in the upper left of the graph, so only one quarter of the bubble is showing. a quick modification to take into account the bubble radius should fix that.

an offset is also needed, but that is part of #1

from books-library-stack.

woops above commit does not close this ticket. it makes things much easier for this ticket though!

from books-library-stack.

Right hand menu dynamically zooms to points on the map and rebuilds the list items in the new dynamic unordered list. There is no CSS for the new addition.

Presently, only the current node parent, current node, and current node children are shown. There is no nesting: just a flat list.

Ideally the list would be nested as ancestor peers, parent peers, peers and current node, node children.

Using D3 optimally requires a bit more thought here, because the pack structure is actually flat rather than structured as the JSON is. Perhaps the data should be accessed in a more raw fashion to access the hierarchy present in the JSON file, prior to being processed into pack.

from books-library-stack.

Well, The datum that loads is nested HBS > UNIT > FACULTY. It's how I
generate the nested circles in the first place. Ideally, we can double the
process of creating nested circles for creating enough nested

• elements.

  On Mon, Nov 4, 2013 at 2:56 AM, Bryan Bonvallet [email protected]:

  Right hand menu dynamically zooms to points on the map and rebuilds the
  list items in the new dynamic unordered list. There is no CSS for the new
  addition.

  Presently, only the current node parent, current node, and current node
  children are shown. There is no nesting: just a flat list.

  Ideally the list would be nested as ancestor peers, parent peers, peers
  and current node, node children.

  Using D3 optimally requires a bit more thought here, because the packstructure is actually flat rather than structured as the JSON is. Perhaps
  the data should be accessed in a more raw fashion to access the hierarchy
  present in the JSON file, prior to being processed into pack.

  —
  Reply to this email directly or view it on GitHubhttps://github.com//issues/6#issuecomment-27668316
  .

from books-library-stack.

Agreed. pack.load() flattens the nested array, but the thing it is called
on will still be a nested array. That'll be the basis for creating nested
lists.

There's still some issues in my head about how to know when the leaf is
hit, since there will be no need for unordered list in the leaf. I'll have
to play around with the D3 syntactic sweeteners.

On Mon, Nov 4, 2013 at 5:42 AM, Seth Woodworth [email protected]:

Well, The datum that loads is nested HBS > UNIT > FACULTY. It's how I
generate the nested circles in the first place. Ideally, we can double the
process of creating nested circles for creating enough nested

• elements.

  On Mon, Nov 4, 2013 at 2:56 AM, Bryan Bonvallet [email protected]:

  Right hand menu dynamically zooms to points on the map and rebuilds the
  list items in the new dynamic unordered list. There is no CSS for the
  new
  addition.

  Presently, only the current node parent, current node, and current node
  children are shown. There is no nesting: just a flat list.

  Ideally the list would be nested as ancestor peers, parent peers, peers
  and current node, node children.

  Using D3 optimally requires a bit more thought here, because the
  packstructure is actually flat rather than structured as the JSON is.
  Perhaps
  the data should be accessed in a more raw fashion to access the
  hierarchy
  present in the JSON file, prior to being processed into pack.

  —
  Reply to this email directly or view it on GitHub<
  https://github.com/sethwoodworth/books-library-stack/issues/6#issuecomment-27668316>

  .

  —
  Reply to this email directly or view it on GitHubhttps://github.com//issues/6#issuecomment-27685159
  .

from books-library-stack.

I was already using the nested root structure. Forgot.

So the problem is peers. If you are selecting an inner node, you may access its parent. The only way to get peers is d.parent().children(). If the parent has peers but no parent of its own, the peers are inaccessible. This seems like a poor structure for the need.

A combination of the pack() flat structure and root hierarchical structures might provide all the needed info, but only if the identity problem can be solved between them. Given object X from structure A, where is object X found in structure B? Unsure if this is supported by some fast procedure.

from books-library-stack.

If the node doesn't have a .children() is how I have previously checked for
leaf status.

On Mon, Nov 4, 2013 at 3:04 PM, Bryan Bonvallet [email protected]:

I was already using the nested root structure. Forgot.

So the problem is peers. If you are selecting an inner node, you may
access its parent. The only way to get peers is d.parent().children(). If
the parent has peers but no parent of its own, the peers are inaccessible.
This seems like a poor structure for the need.

A combination of the pack() flat structure and root hierarchical
structures might provide all the needed info, but only if the identity
problem can be solved between them. Given object X from structure A, where
is object X found in structure B? Unsure if this is supported by some fast
procedure.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/6#issuecomment-27717877
.

from books-library-stack.

The problem in my last comment isn't the leaf nodes, but the root nodes if there are more than one. For example, right node the root node is always a list of one: HBS. But if the root had peers, for example an array like [HBS interests, HBS units], then the root's peers are invisible given some inner node. The inner node could see its parent (either interests or units), but from interests or parents, there is no way to see the peer without a parent to expose children.

Regardless, D3 recursion is driving me into a mad house. Ultimately we need nested JSON to be built into UL/LI nested structures. Maybe an alternative approach to D3 is better for generating the DOM in the first place.
http://stackoverflow.com/questions/4017122/jquery-reading-nested-json

from books-library-stack.

Sorting from the root node down to the target node is very wasteful. The approach seems to make sense because of how nesting works, but there is simply too much to keep track of that is irrelevant. Instead, the list should be built from the deepest target node and nest around it while backing up through parents.

The hardest problem will be putting the nodes in the right place, given that you start from a child, then iterate through the parent and the parent's peers. The child and its peers could be embedded in the parent, and then loop the parent and parent peers into the parent's parent. So on.

from books-library-stack.