Comments (14)
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.
Related Issues (8)
- zoom and fill into center instead of left aligned HOT 10
- add functionality to display by faculty interest HOT 2
- the pack bubbles need to display their purpose HOT 1
- Back button HOT 1
- back function to zoom out in full HOT 1
- svg text renders slowly, without text the svg is super quick HOT 5
- Add search/filtering for the Units/Intersts > people sidebar
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from books-library-stack.