This question is in regards to Mike Bostock's very exciting d3.js library in general, and more specifically the treemap plot. Note: treemap seems to have two versions, the "talk version" and the "example version". My question relates to the "talk version," which has the zoom feature.
My question is more of a wish: How difficult would it be to extend treemap to accommodate and show multiple internal nodes, with multiple levels of zoom? For example, click to go down one level and option-click to go up one level. Perhaps to keep things tidy, only nodes one level deeper are painted -- as you zoom in, deeper levels are resolved.
This is my pie-in-the-sky wish -- I am not familiar with javascript and can't take this on right now -- but it seems do-able on a visual/UI level. I did notice that mbostock commented here that treemap only shows leaf nodes, but I don't know if this is a design constraint or just a SMOP.
Anyone with any interest in doing this? Possibly for a commission? Thanks.
It appears the author posted an nearly exact answer my question on his website the day after I posted this question. Whether or not this question prompted the adaptation, I am excited to try it out!
He is calling it "Zoomable Treemap". He also points out a couple other examples on the net.
Thanks, mbostock!
Related
maybe this is not the place for this question, but maybe someone is an experienced user of D3.js.
I would like to create a dendrogram where I initially show nodes from different levels (precomputed) and nodes are colored differently. The nodes have different tooltips for colored part and for the grey part.
Also I would like to side that with a heatmap.
Do you think combining those thing is possible in D3?
Since the work to do that is quite big I would like to know if it is reasonable to even start.
Part of the result I'm aiming for is here:
The short answer to your question is yes.
I'm looking into the same sort of problem/challenge and found a very nice example that almost exactly does what you describe: https://github.com/MaayanLab/clustergrammer
Since the solution involves 10k+ lines of code and this case is not a simple 'use this to do this' answer I'm not providing code excerpts (for details see their github). In short; it uses D3 libraries + javascript code for dynamic plotting, zooming and sorting of the heatmap and a collapsed dendrogram. It loads (meta)-data from a pre-computed json file that contains the information on clusters and some meta data.
I understand your question you don't prefer a pre-computed input. This is also the case for the application that I am buidling. I'm looking into generalising the generation of the json file from an SQLquery which can then hook up to the clustergrammer.js code. I will update this thread if I find out more/have a different/working solution that does everything on the fly.
I have a simple animated node diagram showing hospital infections over time. It's modeled on Mike Bostock's Wealth of Nations (wonderful work).
I'm trying to understand why I'm seeing nodes 'out ahead' of the nodes being transitioned in the current month. It's a weird thing to try and explain and easier to look at in the diagram itself.
The code charting doesn't seem complicated (however, I suspect I'm doing something wrong with the grouping).
And the CSV data itself looks pretty clean.
So what's happing to cause the transition() of nodes ahead of the current month?
And more importantly, how can I clean this up to prevent it?
I'm a member of a small but fairly sociable online forum, and just for fun we've been plotting a chart of who's met who in real life. Here's what it looked like fairly recently.
(The colour is the "distance" from the currently-selected user, e.g., yellow is someone who's met someone who's met them. And no, I'm not Zak.) Apologies for the faded lines, they don't seem to have weathered the SO upload process very well.
It's generated as SVG, with a big block of JSON defining who's met who. The position (x,y) of each member on the chart is hard-coded into that JSON. Until now, it's been fairly easy to cope when someone meets someone else - at worst, maybe two or three people need to be shuffled around - but it does involve editing the co-ordinates manually. And now that the European and North American contingents are meeting up, and a few on the periphery are showing up at meets, all hell is breaking loose...
We can put some effort into making all the nodes draggable, which would make the job of re-arranging a bit less tiresome. But it seems more sensible to let the computer take care of positioning them, especially as the problem will only get harder with more members.
So, does anyone know of an algorithm for positioning these nodes on the chart, based on which other nodes they're linked with?
Ideally, it would
minimise or avoid long links
avoid having lines run underneath unrelated nodes
take account of the fact that well-connected nodes are bigger
do its best to show the wider "all these guys met each other" relationships (the big circle at the bottom is largely the result of one meet, for example, though the chart has no idea of when any two people met)
but if it gets us close enough to tweak it, that's progress.
And, what's the real name for these charts? I believe they're called "link charts", but I'm not getting good results from Google using that name or anything else I can think of.
We'll likely be implementing this in PHP or Javascript, but right now it's how to begin approaching the problem that's the bigger question.
Edit: Some great answers coming already. I would be very interested in the actual algorithm(s) used, though, as well as tools that do the job.
What you are looking for are f.e. force-based algorithms. There are quite a few libraries, and some have been named already, like prefuse, yWorks. Here a few more: jung, gvf, jGraph.
The real name for it is "graph". To generate graph, and have a good layout algorithm, the best is to use a software which will do the job.
I advise you to use Gephi.
This soft is able to do all the things you want to.
Have a look at the yWorks tools.
You can google for graph visualization. There are more libraries for this, including GraphViz, but probably not all your requirements will be met.
If you can deal w/ Java, take a look at prefuse.
Have a look at NodeXL
Also, this book may be relevant.
I'm looking to display a graph (network diagram, not a chart) and show its changes over time. Is there a standard or best way to do this, or any kind of 'network diff' tool?
I'm looking for an overview of the general layout decisions involved, i.e. a list of options and trade-offs to be made, and best-practice guidelines where these exist.
Wow. Not an easy question! I'm curious if anyone can come up with some authoritative resources for you.
I haven't found any standard or best practice documented anywhere from a design standpoint, nor do I know of any tool specifically designed for determining and displaying the changes, but I have some ideas.
First, a few technical notes. There's GraphML, which you can use (and extend) to represent your graph in a standard format, and there are some parsers available, and it works with Prefuse and probably other display libraries. It's just XML, though - nothing too special. Creating the "diff" by comparing two GraphML files should be pretty simple.
The really interesting part is how to communicate the differences to the user.
In all cases, you should have a visual indicator for nodes and edges that are added or removed. You may use color, showing existing nodes as something neutral, say gray, new nodes as green, and removed nodes as red. There are lots of options.
You might find this slideshow interesting.
It's probably obvious, but, over time, the nodes should not move more than necessary to adapt to the new state of the graph - the layout should evolve, not start from scratch for every state. This is crucial for comparing the states.
Side-by-side before/after comparison. Present before and after snapshots of the same graph side-by-side. If your graph is very large and complicated, a side-by-side layout may be impractical. You could try overlaying one graph over the other, though that is likely to be disorienting.
Side-by-side series comparison. AKA small multiples. Same as above but showing as many points in time as is useful. Even more restrictive than before-after in terms of how much space required, and difficult for.
Animate a single graph. I think the most intuitive method is to smoothly animate the graph changes, though a choppy slideshow could work if the changes between slides are not too drastic.
Showing details. If useful, you can spell out the change event details in a few different ways.
Show labels on the graph node (could be interactive if there are too many to show at once)
Show a list in a sidebar / legend. Nice if reading the progression of changes is useful, but harder to connect to the visual.
Show a timeline instead of a list. This shows the 'real' progression of events better than a simple list, which gives the impression that all the events are evenly spaced over time.
What you actually choose to do would depend largely on the nature of your dataset and your goals. A simple graph of a few dozen nodes and a few changes is a much different challenge than a huge network, like say every constellation in the night sky!
Here is an interesting study: http://publik.tuwien.ac.at/files/PubDat_198995.pdf
This paper presents a prototype, and user tests will be published soon in:
P. Federico, W. Aigner, S. Miksch, F. Windhager, M. Smuc:
"Vertigo zoom: combining relational and temporal perspectives on
dynamic networks";
accepted as talk for: 11th International Working Conference on
Advanced Visual Interfaces (AVI2012), Capri Island; 2012-05-21 -
2012-05-25; in: "Proceedings of the 11th International Working
Conference on Advanced Visual Interfaces (AVI2012)", ACM, (2012),
ISBN: 978-1-4503-1287-5.
http://ieg.ifs.tuwien.ac.at/~federico/pub.php
Your question is kind of general, I'm not clear exactly what kinds of analysis you are aiming for. The are several network analysis packages that have some dynamics capacity. Gephi is one. The networkDynamic and ndtv R packages provide tools for representing and visualizing dynamics as animations and static layouts (disclaimer: I'm a maintainer)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
Like, let's say I had a tree structure, then I would use, naturally a tree control, since that GUI element maps perfectly to the structure.
But what I have is a graph, potentially too wide to fit in one web page. I can't think of examples of GUIs that really match the structure. Some ideas I have that don't quite fit are, the web itself, with hyperlinks, the browser back button, and the forward button. But that just shows you one node at a time. I would like to display as many nodes as I can, and allow navigation to a new area of the graph. Something like Google maps might be a good model, in that you have full freedom to scroll in any direction.
Facebook used to do this, way back in the day, to visualize your friends. They drew nodes as little boxes, with lines connecting them, as expected. They drew the graphs into an SVG image, so you could easily zoom in and out.
Another option might be to draw into a <canvas> tag and scale that somehow. I imagine that's possible, but I don't know much about <canvas>
Another option would be to draw it into an inline frame or other box that allows the user to scroll horizontally and vertically.
Basically the best thing I've seen for this sort of thing would be either Flash or Java that let you drag the nodes around, and it would auto stretch, move, expand based on tension values on the edges.
Brief googlage exposes this. I tried the Java application version, seems to work on a basic level, but perhaps overkill for your needs. :) Check out the AJAX version, maybe?
Perhaps check out ways to drag with jQuery.
For a nice dynamic example of a huge graph displayed by small regions, you can take a look at: Visuwords. They present themselves as a graphical dictionary which shows multiple links between words.
I don't think there is an existing widget which will fit your need like a tree control would for a tree strcuture.
that said I definitely recommand one of the yWorks products.
Get a feel for what it can do, by trying out yEd, then check the documentation which seems very good. they also propose an ajax and flex fronted for their library, which will give you a web compatible representation, including google maps like drag and dropping see graph viewer demo: http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer.html )
I don't work for them, I am not even a paying customer, but I was very impressed by yEd.
You could try prefuse. It is an open source interactive data visualization toolkit. It has a very nice collection of layouts that can be used for displaying node graphs along with other visualization effects. The toolkit comes in two different flavours, one in Java and another in Actionscript, which can be used in Flash/Flex.
GraphViz is the best I've seen. Works on the desktop and on the web, with many examples of both here.