Sunburst Data Visualization - additional ring - javascript

I found this nice framework for data visualization purposes:
http://thejit.org/static/v20/Jit/Examples/Sunburst/example2.html
For my project I need 4 rings. So I tried to figure out how to add two rings to the template JS, which you can find here:
http://thejit.org/static/v20/Jit/Examples/Sunburst/example2.js
It is basically a cascaded structure, but simply adding a level doesn't work out.
Does anyone have a clue on how I could add two levels?
In case you have another framework which works a like or similar, I would appreciate your feedback.
Cheers, D

I'm a big fan of the Protovis library, and it easily supports N-level sunbursts: http://mbostock.github.com/protovis/ex/sunburst.html
d3 is another library by the same developer, and it supports sunbursts as well: http://mbostock.github.com/d3/ex/sunburst.html

I am wondering the same, will try this at home, but
https://github.com/philogb/jit/blob/master/Source/Options/Options.Node.js
changing dim from 3 to 5 might do it ( assuming the center circle is 1 dim ).

All I needed to modify was the data: I added some new children to the children array of a leaf node and it automatically created a third ring.
The one caveat was that the id has to be unique, or only the first instance will be displayed. This may be why your experiments weren't working. It will just skip duplicates without a warning.
See http://philogb.github.io/jit/static/v20/Docs/files/Loader/Loader-js.html for the basic requirements for the JSON format that should be used.

Related

Family Tree with multiple parents using D3, VX & React

Currently, I'm trying to have a family tree which will have
Spouses/Partners (Multiple)
Children of Spouses/Partners
I want to get this done in React.js, and I am using VX for it.
As per D3 tree structure, we could have only one parent for a child, so in order to generate a tree as per my choice, I had to align partners as children of a member. And with additional JSON key, I style the partners. See the example below.
The same is available in my repo
I am impressed the way how Cyril Cherian tried to implement the tree with partners in this JSFiddle
`https://jsfiddle.net/cyril123/fcd5q8fv/1/`
and I made a fork of it (Javascript)
`https://jsfiddle.net/Vaishak/x6bg9dcu/`
and made some changes.
But the problem with this is that it cannot have multiple spouses/partners in a clean/straighforward way, will have to modify the JSON very badly.
Same JSFiddle script is also avalable in my repo
I would like to have the mix of both, where
Partners will be aligned with member of the tree
Partner will not have the line from any other node (unless mentioned)
Children will be originating from the mid of Partners line
Any solution here? :)
Note: I've posted the same on VX's github issue page, not sure whether this will be addressed there.
For making it easier for people who look for answer for this question.
I could tackle it down and got solution as seen here
Please feel free to look at the data structure and the way I drew spouse line.

Using Skeleton without the skin in three.js

I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.

Javascript Library to dynamically create graphs?

Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.

Javascript plugin for graph rendering (tree and nodes)

I'm looking for a Javascript API to draw this kind of graph :D3 graph
Except I don't need/want the "force" effect. Something static is ok, it can be an image generated or some JS rendering (I prefer this).
I've gone through a lot of google results without success, and every JS plugins i've found based on D3 is overkill.
The data will be from 10 to 100 nodes, and performance is not the key (though highly appreciated).
Thank you !
EDIT : a perfect solution would accept XML as data input, but I can accomodate with other formats. Also, I need something as "plug-and-play" as possible, I'm far from mastering JS/webdesign, which is the reason why I don't create my own rendering based on D3.js
You could simply delete this part of the example that you have found, and it will become static :
.call(force.drag);
Use This..
http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html

What JavaScript or how to build this chart/graph?

I come across http://flyspy.com/miles/ and been impressed by their chart/graph (the 2 and 3 one, I don't know is this 2 consider chart/graph)
Does anyone know how to build it? Or did they use any JavaScript script to build it?
marcgg might be right. You should also consider using a svg library to draw vector graphs, though.
Have a look at Raphaël / gRaphaël.
Even though Raphaël is my favorite library, there are several others.
The small ones (#3) must be using Sparkline: http://omnipotent.net/jquery.sparkline/
I'm not sure about #2, but you can get the same result using flot: http://code.google.com/p/flot/

Categories