Based on this work: http://bl.ocks.org/mbostock/7882658
If I substitute the automatic nodes creation by a JSON.stringify() output of the automatically generated data like this...
var nodes = [
{"cluster":2,"radius":1.6180680659922448},
{"cluster":0,"radius":3.3575295077569},
{"cluster":1,"radius":0.9569281165554346},
{"cluster":3,"radius":10.7245554165012}
];
...I get an exception "cannot read property x of undefined" on the line:
var x = d.x - cluster.x,
This is inside the cluster(alpha) function. So, apparently the d3.map function that automatically generates the data is putting something in the structure that the JSON stringification has not caught? Maybe I am just overlooking something simple...help is appreciated. Thanks! Here is a fiddle to help out: http://jsfiddle.net/Nivaldo/FJ3qq/1/
I commented out the code that is not working. Also, another detail, it does not seem like the original code as i left it (except that i reduced the count of clusters and nodes) is actually handling the right number of distinct clusters. It should paint 4 different ones but is only painting with 3 colors.
The problem is that nodes is not the only data structure that needs to be initialised -- clusters needs to be as well. In particular, specific nodes are assigned to specific cluster indices. If you don't do that, things will break.
To fix, do something like
nodes.forEach(function(d) { clusters[d.cluster] = d; });
Complete jsfiddle here.
Related
Is there a way to inspect which variables (and lines of code) contribute to a value in Javascript? For example if I would inspect the parameter input in this code
let x=5;
let y=x+3;
function a(input) {
// analyzing input in this scope/context,
// i would like to see that it is a combination of
// x from line 1 and a constant '3' from line 2.
inspectDataFlow(input);
}
a(y);
I would like to get as output a data structure that would be something like this:
input (line 8)
y (line 2)
x (line 1)
"3" (line 2)
Purpose and goal
My goal for this would be to have a tool where you could see/change the value of a Javascript variable and it would automatically adjust the variables that the value originates from.
For example, you could have a function to draw shapes. And when you adjust visually the shapes that were drawn, the original variables for color, shape positions etc would update accordingly.
Something a bit like this but for editing arbitrary code, even after a user has modified the code lines:
http://yining1023.github.io/p5PlayGround/
Another idea I was thinking was to visualize how a variable has been composed: which lines it is a combination of and how they affect the result.
Potential approach
One approach for this I'm thinking about is to add instrumentation to the code with Esprima/Acorn that is then called on runtime. The instrumentation would keep track on which variables have been called on which lines (and scopes) and how they relate to each other, a bit like this:
http://alltom.com/pages/instrumenting-javascript/
I wonder if this would work and if there is a framework one could use for this? Or if one would have to do the instrumentation from scratch?
Related themes
This could be related to data flow analysis or use-define chains, but I'm not sure, since I don't know much about compilers.
https://en.wikipedia.org/wiki/Use-define_chain
My first idea was that this could be done using static analysis with something like Esprima/Acorn, but I'm not sure if that is the right way, or if this could be done with some custom Javascript interpreter instead.
http://tobyho.com/2013/12/02/fun-with-esprima/
I'm currently working on a project using a modified Zoomable Treemap (http://bost.ocks.org/mike/treemap/) in d3.js but I have run into some difficulty in implementing this specific behavior that I'm looking for.
Ideally, each node in the tree would be sized according to its specified weight rather than the sum of the weights of its children. The only relevant question I could find (d3.js - Treemap where parent's value is greater than sum of its children) isn't quite what I'm looking for, though it could potentially be used to create a similar effect. However, attempting to use the filtered dummy node method to keep the parent's size constant when its children are modified results in ugly transitioning artifacts. I assume this due to the higher level being aware of the dummy node, but the lower level not being aware (as it is filtered, so it is not visible).
How might I go about implementing this behavior?
As it turns out, the implementation that I was using already had a function (accumulate(d)) that was responsible for this behavior. I solved this issue by rewriting it to always return the node's value directly like so:
function accumulate(d) {
var result = (d._children = d.children)
? d.value
: d.value;
if(d.children){
d.children.forEach(accumulate);
}
return result;
}
Now the nodes scale independently of their children as desired.
Hopefully this saves someone else some confusion in the future.
This question builds on Lars Kotthoff's very helpful answer to the problem of transitioning with a D3 sunburst diagram that is based on different JSON data: d3 - sunburst - transition given updated data -- trying to animate, not snap
I've tried the final fiddle that Lars provided but when there is more than one transition, the animation still fails and we get snapping. The problem can be seen in this updated fiddle that contains a second transition.
From what I can tell, the x0 and dx0 values are not properly stored with the path object when calling the arcTweenUpdate function. When I check what the this object looks like inside arcTweenUpdate function, I get an [object SVGPathElement] at the beginning of the function when this.x0 and this.dx0 are read, and I get an [object Window] when the new values are written later. I'm relatively inexperienced with JS but that seemed like it could point to the problem.
Any help with addressing this and making the above fiddle work for multiple transitions (e.g. back and forth between the two JSONs) is highly appreciated. Thanks!
Well you've spotted a bug in my earlier answer :)
The problem is, as you say, that the saved values aren't updated properly. That's because this inside the callback doesn't refer to the path DOM element anymore. The fix is simple -- save a reference to this in the function at the level above and use that reference:
function arcTweenUpdate(a) {
var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
var that = this;
return function(t) {
var b = i(t);
that.x0 = b.x;
that.dx0 = b.dx;
return arc(b);
};
}
Complete demo here.
I want to move nodes in Sigma JS on click event. Say from position x 0.7 to position x -0.7.
Is it possible to move nodes in Sigma js, and if it is, kindly guide me to achieve that.
Yes, it is possible. I created a jsfiddle showing how to change node position, size, and color on mouse click here:
http://jsfiddle.net/kaliatech/P255K/
You can bind to custom "downnodes" events like this:
sigInst.bind('downnodes',onNodeDown);
The event callback contains an array of selected node ids. I don't know when it would be more than one when clicking. Perhaps when zoomed out in a complex graph.
One of the more subtle issues when using sigmajs, is that most methods, such as getNodes, return clones, not the instances themselves. This is to protect "private" data in the graph I think, especially data that can not be redrawn after initialization. To actually modify properties, you need to use the iterator methods. Even then, you are only given clones. The library updates the actual node instances using a list of predefined allowable properties. (See the checkNode function in graph.js).
After properties have been set, you then need to refresh/redraw the graph. While the "refresh" method would seem to be an obvious candidate, it did not work. I was able to get it to redraw using the draw method though. You will need to review the source code to understand the different parameters. Example:
function onNodeDown(evt) {
var sigmajs = evt.target;
var nodeId = evt.content[0];
sigmajs.iterNodes(function(n){
n.size = 10;
n.color = "#0000FF";
},[nodeId]);
sigmajs.draw(2, 2, 2, true);
};
For more advanced needs, the sigmajs website includes plugin examples showing other ways of getting mouse events and updating nodes dynamically. One is the advanced plugin example for a fisheye effect:
http://sigmajs.org/examples/a_plugin_example_advanced.html
Another is the example for accessing node attributes:
http://sigmajs.org/examples/more_node_info.html
The sigmajs documentation is weak, so you will need to review the source code to understand things.
There are plugins permitting to move isolated nodes from the graph.
Check
https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html
I'm posting there because I couldn't find something on other post or on google.
http://jsfiddle.net/CUQaN/9/
As you can see on the JS fiddle, I have a line chart with circle on each point.
I want to update this chart with new data. The problem is that I can receive less or more point than I already have on the graph. For example, I can have 8 point on my line chart and then when I'm updating the chart, I can have just 4, or even 15 point. And my circle are not updating properly because I'm just changing the value of the circle which already exist.
But I really don't know how to update them properly.
I can have that data sometimes :
var data = [
{"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56},
{"date":"27-Apr-12","close":Math.random()*24.00,"open":Math.random()*253.89},
{"date":"26-Apr-12","close":Math.random()*490.70,"open":Math.random()*215.54},
{"date":"25-Apr-12","close":Math.random()*42.00,"open":Math.random()*351.23},
{"date":"24-Apr-12","close":Math.random()*210.28,"open":Math.random()*20.23},
{"date":"23-Apr-12","close":Math.random()*20.70,"open":Math.random()*368.34},
{"date":"20-Apr-12","close":Math.random()*412.98,"open":Math.random()*42},
{"date":"19-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56},
{"date":"18-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45},
{"date":"17-Apr-12","close":Math.random()*26.44,"open":Math.random()*20.56},
{"date":"15-Apr-12","close":Math.random()*48.34,"open":Math.random()*356.45},
];
And just that data other times : (more or less)
var data = [
{"date":"4-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"3-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"2-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"1-May-12","close":Math.random()*568.13,"open":Math.random()*35.12},
{"date":"30-Apr-12","close":Math.random()*354.98,"open":Math.random()*424.56},
];
Is someone can help me please ?
Thanks a lot !
It might be better to remove the old points and add the new ones rather than trying to move them. To do this you can use an id function to make the points unique - see here
A small example:
svg.selectAll("circle")
.data(myData, function(d) { return d.x; })
.enter()
.append("circle");
The important part here is that points are identified by their x-value, rather than their index in the data point array. Infact this might help in your current situation as the points will only move up/down and not side to side.