We Keep Coding

How do I make the text hover over a data point?

When I hover over the data point it keeps the information for that data point locked in the left portion of the screen. How do I get it to be where the users mouse is? Here's what I have
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.attr("style", "position: absolute; opacity: 0;")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px");````
...
.on("mouseover", function(d){
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
d3.select(this)
.transition()
.duration(100)
.attr("r", 23)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
d3.select("#tooltip")
.style("opacity", 0)
d3.select(this)
.transition()
.duration(100)
.attr("r", 15)
.attr("fill", "black");
});

You can use d3.event.pageX and d3.event.pageY built into D3. When you're adding your tooltip, try this:
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
You may need to adjust the top style based on the height of your tooltip.

Change style of the data point based on the text area

I have implemented a scatterplot using d3.js v3.
I would like to change the color of the datapoint if for that particular data point annotation has been added.
But when I try to do so, it is changing the color of the first data point in the array instead of the the circle where the annotation has been added.
The way I am implementing is :
eventGroup.select("circle")
.attr("class", "dot")
.attr("r", 4)
.attr("cx", 10)
.attr("cy", 10)
.attr("fill", function(d) {
return d.evtColor ? d.evtColor : "#229ae5";
})
.attr("stroke", function(d) {
return d.evtColor ? d.evtColor : "#229ae5";
})
.attr("stroke-width", 2)
.on("contextmenu", function(d) {
var position = d3.mouse(this.parentNode);
d3.event.stopPropagation(); // to avoid over-ridding of click event on the chart background
d3.select("#context-menu")
.style("position", "absolute")
.style("left", (d3.event.pageX - 220) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.style("display", "inline-block")
.on("click", function() {
d3.select("#context-menu").style("display", "none");
d3.select("#annotateBox")
.style("position", "absolute")
.style("left", (d3.event.pageX - 220) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.style("display", "inline-block");
d3.select("#eventLabel").text(d.label);
d3.select("#eventTime").text(d.time);
d3.select("#textArea").node().value = d.textArea || "";
d3.select("#done").on("click", function() {
d.textArea = d3.select("#textArea").node().value;
d3.select("#annotateBox").style("display", "none");
if (d.textArea) {
d3.select("circle.dot").style("fill", "#ed6a1c");
}
});
});
});
I cannot do d3.select(this.parentNode) as the parent element is not the circle.dot. What element should be selected in order to change the color of datum where annotation text has been added?

Keep a reference to the clicked DOM element (i.e., the circle)...
.on("contextmenu", function(d) {
var thisCircle = this
etc...
And use it afterwards:
if (d.textArea) {
d3.select(thisCircle).style("fill", "#ed6a1c");
}

Generating tool-tip for dynamic data in D3

I have a scatter plot similar to: http://plnkr.co/edit/MkZcXJPS7hrcWh3M0MZ1?p=preview
I want to give a tooltip on mouse hover for every combination. The tooltip code that i have currently does like:
var tooltip = d3.select("body").append("div") // tooltip code
.attr("class", "tooltip")
.style("opacity", 0);
var circles = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.petalWidth); })
.attr("cy", function(d) { return y(d.petalLength); })
.style("fill", function(d) { return color(d.species); })
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.petalLength+", "+d.petalWidth)
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
This will fail to return the correct tooltip for combinations other than petalWidth and d.petalLength.
Is there any way of knowing which combination has been selected and the associated numerical value for the combination?

To do this:
First store the tool-tip info in a new variable(displayX/displayY) like this:
.attr("cx", function(d) {
d.displayX = d.petalWidth;//so displayX holds the x info
return x(d.petalWidth);
})
.attr("cy", function(d) {
d.displayY = d.petalLength;//so displayY holds the y info
return y(d.petalLength);
})
When you set the combo reset the variables accordingly.
svg.selectAll(".dot").transition().attr("cy", function(d) {
d.displayY = d[yAxy];//reset the variable displayY
return y(d[yAxy]);
});
Same for
svg.selectAll(".dot").transition().attr("cx", function(d) {
d.displayX = d[xAxy];//reset the variable displayX
return x(d[xAxy]);
});
Now in the tool tip mouse hover use variable(displayX/displayY)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.displayY + ", " + d.displayX)//use displayX and displayY
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
working code here
Hope this helps!

Make jQuery mousemove stop

At the moment the overlay div is always showing up. But I only want it to show up when the mouse is passing a value in the chart. The method d3.event.pageX and d3.event.pageY will not work. The code is just a snippet of a greater page and somehow the positions of the mouse are not tracked when using the d3 methods.
Here is a fiddle of the code: http://jsfiddle.net/9z6nmwff/
Here is a snippet of the code:
//draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.open); })
// Tooltip stuff after this
.on("mouseover", function(d) {
//console.log("x: " + d.pageX + ", y: " + d3.event.pageY);
$(document).mousemove(function(event){
console.log("x: " + event.pageX + ", y: " + event.pageY);
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" +d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY ) + "px");
//$("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
How can I do this?
Edit:
Here is the code for my current solution. Thank you for your help!
// Tooltip stuff after this
.on("mouseover", function (d) {
$(document).ready(function(){
$(".clearfix").mousemove(function(event){
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX+3) + "px")
.style("top", (event.pageY+3) + "px");
});
$(".clearfix").mouseleave(function(){
div.transition()
.duration(200)
.style("opacity", 0);
});
});
});

you can use the mouseleave to do the hiding and let the mouseenter do the showing similar to you are doing now
// Tooltip stuff after this
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY) + "px");
}).on("mouseleave", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
});
fiddle http://fiddle.jshell.net/leighking2/277yknrs/

Positioning SVG elements with CSS. Having some problems

Ive added 20 SVG squares to a trend graph I made using D3.js. Ech square is a clickable object which toggles lines on and off the graph. In Firefox the squares appear in the right lace, in Chrome, the CSS apparently stops working completely and the squares just drop to the bottom of the page.
Heres a link to the graph, http://www.andkensol.com/dataviz/TrendGraph/trendMov.html
And here is some of the JavaScript and CSS I used to make and then position the squares. Using position:relative is probably the cause. Would anyone have any advice or suggestions?
//JS
//AVENGERS CONTROLS
d3.select(".chart").append("svg")
.attr("class", "AvengeDot")
.on("mouseover", function(d) {
nameInfo.transition()
.duration(100)
.style("opacity", .9);
nameInfo.html("Marvel's The Avengers")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
nameInfo.transition()
.duration(200)
.style("opacity", 0);
})
//HUNGER GAMES CONTROLS
d3.select(".chart").append("svg")
.attr("class", "HungerDot")
.on("mouseover", function(d) {
nameInfo.transition()
.duration(100)
.style("opacity", .9);
nameInfo.html("Hunger Games")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
nameInfo.transition()
.duration(200)
.style("opacity", 0);
})
//CSS
.AvengeDot{
position:relative;
left:77%;
bottom:118%;
width:15px;
height:15px;
background-color:#FF9604;
cursor:pointer;
}
.HungerDot{
position:relative;
left:75.5%;
bottom:114%;
width:15px;
height:15px;
background-color:#FF9F18;
cursor:pointer;
}