We Keep Coding

Hover only works in one point in plotly's Scatter3D

I'm trying to visualize the a variable depending on 3 more variables (test score of a ML algorithm depending on 3 hyperparameters), thus I created a 3D scatter plot. It's working well, but hover only works on one of the 100 points and I don't know why. No matter where I hover, the only info displayed is that of that that point.
I tried setting hovermode='closest' and some other stuff but nothing worked so far. How can I made hover work for all of the points?
You can see my plot here:
Thanks!

Solved.
I was setting opacity=1 and apparently you can't do that with 3D scatter plots when you set the line property.
trace = go.Scatter3d(
x=df4['param_max_features'],
y=df4['param_n_estimators'],
z=df4['mean_test_score'],
text=text,
mode='markers',
marker=dict(
size=df4.mean_fit_time * 4,
sizemode='area',
color=df4.mean_test_score,
opacity=0.99,
colorscale='Viridis',
colorbar=dict(title = 'Test score'),
line=dict(color='rgb(140, 140, 170)')
),
)
if you set opacity to any number lower than 1 it works.
Cheers!

Highstock.js diagram is working strange?

The problem is that if I turn off TB1S1 off before I turn TB2S1 and TB3S1 the dynamic line changes its shape, very strange. But if I let TB1S1 be on, and turn off TB2S1 and TB3S1, then the dynamic line stays perfect.
To see the problem, just turn off TB1S1, and look at the lines TB2S1 and TB3S1 changing its shape.
How can I solve this problem that the diagram holds its shape without being attached to TB1S1..?
[JSFiddle - Demo][1]
[1]: http://jsfiddle.net/2jccfson/1/
Kind regards,
Dler H.

get dynamically the x & y values of a raphaeljs element even if it moves

how to get dynamically the x & y values of a raphael js element even after a zoom or a left or right move, I want to show a div near to my element, when I show the element.getBBox() values I found that they don't change even if I move the element or I zoom in/out, my code that I use to get x & y values seems like this :
x = (myElement.getBBox().x+myElement.getBBox().x2)/2;
x+=$("#container").offset().left;
y = (myElement.getBBox().y+myElement.getBBox().y2)/2;
y+=$("#container").offset().left;
and the code that moves my div (a tooltip) is :
$("#myTooltip").css({"left":x+"px","top":y+"px"}).show();
Note : it works when I do the same thing with mouse coordinates (using x=e.pageX;y=e.pageY;) but in this case I want to do it when I click on another button in the page
thank's in advance

I am also using Raphael and came across to what I think you need in your project.
In order to understand how x and y can be shown dynamically, look at this DEMO:
While you are dragging objects around, you can see their coordinates change dynamically. Good Luck

The solution is to use myElement.attr('x') and myElement.attr('y') instead of myElement.getBBox().x and myElement.getBBox().y, thank you A.S. Roma, don't forget to say hello to Totti
Edit :
if someone have the same problem, the best solution I found untill now is to use jquery and raphael, explication :
First of all I need in the definition of the element to add an ID like this : myElement.node.id='myUniqueId' and after that you can access to the element using jquery like this x = $("#myUniqueId").offset().left and y = $("#myUniqueId").offset().top

Kinetic js how to scale layer in a stage?

I want to add zoom feature my app . I use Kinetic js and somewhere I found solutions for this feature but I can't apply these solution for some reason . I tried to adapt the solutions but unsuccesful . I have many Kinetic.Layer , some of them will scale when zooming apply. my challenge is that : zoom will happen on mouse position . solution that I found gives me : layer.setPosition() after scaling . As I mentioned before , I must not use "layer.setPosition" I will do this as using stage.setPosition() but I couldn't calculate new x and y of position 100% accurately. Could anyone suggest me any solution way ?

What you really want to do when zooming is to set the scale.
You can set the scale for any layer, node, or the entire stage. Just do:
layer1.setScale(2,2); // this doubles the layer size from the original
This doesn't affect any other layer, so your overlay will stay in place.
In addition, you should also do:
layer1.setPosition(x,y); // this will move the layer to the fixed point you want.
All together you could do:
function zoom(){
var position = stage.getUserPosition();
layer1.setScale(2,2);
layer1.setPosition(position.x - layer2.getX(), position.y - layer2.getY()); //move the layer by an offset based on the second layer. This isn't exactly correct so it's something you have to experiment with.
}

Check out this: http://jsfiddle.net/TFU7Z/1/ Maybe is what you are looking for, I did not quite understand the question.
var zoom = function(e) {
var zoomAmount = 1;
layer.setScale(layer.getScale().x+zoomAmount)
layer.draw();
}
document.addEventListener("click", zoom, false)
Just click anywhere to zoom. You can attach the "click" event listener to whatever part of the stage / document you want.

These answers seems not to work awith the KineticJS 5.1.0. These do not work mainly for the signature change of the scale function:
stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});
However, the following solution seems to work with the KineticJS 5.1.0:
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

Javascript - mapping mouse clicks over a grid

I have a cube grid made of an array of arrays in javascript. The grid dimensions are stored in variables. So dim is the dimension of the single cube, spacing is the distance between each cube (dim and spacing expressed in pixels).
Now, considering that I can always have the user mouse position in the variables g.mouseX and g.mouseY why this code isn't always so precise?
var j = Math.round(g.mouseX / (dim+spacing));
var i = Math.round(g.mouseY / (dim+spacing));
// user clicked on the cell grid[j][i]
Sometimes I click a cube but it looks like he's considering the one nearby. It looks like the whole mapping of the user click is shifted of half a dim. Probably using Math.round makes everything almost wrong, but I don't see any other way to transform such a chaotic and unpredictable value as the user click to a precise coordinate in my grid.
Hope anyone can help on this!
Thanks in advance...

You want to truncate, not round. You can use Math.floor, which maps (e.g.) 3.7 to 3:
var j = Math.floor(g.mouseX / (dim+spacing));
But really, why not just bind the onclick event of each grid cell?