Develop Reference

Linking two elements on mouseover and dual tooltips

I'm looking for some advice on how to get two elements in a visualization, which are linked by a common data value, to respond simultaneously.
Here is the visualization as it stands now.
http://bl.ocks.org/natemiller/2686e5c0d9a1a4bb0895
Note that the different colored points are for the 50 US states in 2005 (green) and 2013 (blue), so there is a blue point and a green point for each state. I have two things I would like to get working here.
I would like to be able to mouseover either a blue point or a green point and have the corresponding point (for the same state) highlighted.
I would like a tooltip with some basic data to appear next to both points, providing point specific data.
Regarding the first point above. Right now when you mouseover a blue point the corresponding green point is highlighted, however, when you mouseover a green point only that point is highlighted and not its corresponding blue point. I imagine this is a simple fix, but for the life of me I can't figure out to reverse the reference so I get green to blue references as well.
Regarding the second point. Right now a tooltip with relevant information appears near the moused-over point, but I would like to have a similar tooltip appear next to the corresponding point from the alternate year of data, so that direct comparisons across years are easier. I am quite new to adding HTML tooltips so I'm not clear on how to do this and suspect it may require a new method for adding tooltips. Can any help to steer me in the correct direction for how to have a tooltip appear near the moused-over element and a corresponding linked element?

1) Remember that ids are unique and you're creating multiple circles with the same id, use a class instead
circles.attr("class", function(d) { return d.state })
2) You're creating a single tooltip, if you want to show one for each pair of states create multiple tooltips
Assuming that you make these changes you can easily create multiple tooltips for each pair of states
circles.on('mouseover', function (d) {
// selection for 2 states
var states = d3.selectAll('circle.' + d.state)
// code to style those nodes goes here ...
// tooltips for the states
var tooltips = d3.select('svg').selectAll('text.tooltip')
.data(states.data())
// initial styling of the tooltips goes here...
tooltips
.enter()
.append('text')
.attr('class', 'tooltip')
// update
tooltips
.html(function (d) {
// text of the tooltip
return 'something'
})
// positioning, it requires some margin fixes I guess
.attr('x', function (d) { return xScale(d.child_pov) })
.attr('y', function (d) { return yScale(d.non_math_prof) })
})
Finally remove the tooltips created on mouseover when the mouseout event is triggered
circles.on('mouseout', function (d) {
d3.select('svg').selectAll('text.tooltip').remove()
})

You cannot have multiple elements with the same id. Use a class .circleHawaii instead of an id #circleHawaii.

D3 highlight corresponding table entry when hovering over donut chart slice

I started working with D3 and had a little help yesterday getting some code to work. I have one new quick question. I have a donut chart representing some soon to be JSON object. When you hover over some of the pieces of the chart, they animate and pop out. There is a corresponding table that is populated by the same object. I was able to get the data in the table mapped out so that when you hover over the data, it animates the corresponding pie chart slice. I'm trying to get it to work in the opposite way as well, so that when you hover over the donut slice, it highlights the table.
Currently, I have it highlighting the entire table, but I can't seem to figure out how to map it to the individual and correct table entry.
Fiddle for context
My arc mouseover, where I currently have it highlighting everything,
.on("mouseover", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arcOver);
var path = paths[0][i];
d3.selectAll("#testtable .dataRow")
.style("background-color","red");
Can someone provide a little help on how to map to the correct table entry?
Thank you!

Since your pie chart and table are ordered the same, you can do it by index:
.on("mouseover", function(d,i) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arcOver);
var row = d3.selectAll("#testtable .dataRow")[0][i]; // i is the index
d3.select(row)
.style("background-color","red");
})
Updated fiddle.

Label placement outside circles without overlap using layout.pack

I'm very new to d3 and I'm building a chart using d3.layout.pack.
I would like to place the text labels of every circle outside the circle, but without overlapping other labels or other circles.
Like this:
bubble chart using d3.layout.pack
Any ideas?
Thanks a lot
pd: this is what i've tried:
var nodes = d3.layout.pack()
.value(function(d) { return d.size; })
.size([w, h]).padding(333)
.nodes(data);

I would suggest another approach: to place labels/text along the top of the circles, and only for fairly large circles... This will not solve overlap problem completely, but visual organization will be better, in my opinion.
Here is the jsfiddle of an example illustrating the approach.
The details are described in another SO question/answer

d3js SVG:title tooltip doesn't show up

d3js SVG:title tooltip doesn't show up
I have a graph which contains a lot of circles, now I would like to insert to each circle a tooltip but it doesn't work neither as title in circle nor as tooltip box. I cannot find my mistake:
var circleSmall = canvas.append("circle")
.attr("cx", 869)
.attr("cy", 693)
.attr("r", 10)
.attr("fill", "green")
.append("svg:title").text("Your tooltip info")
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
http://jsfiddle.net/WLYUY/57/

The most important obstacle here was your rects. They were appended AFTER the circles and were preventing mouse events from reaching the circles. So, first thing to do is:
/* do this or append circles AFTER appending recs */
rect {
pointer-events: none;
}
I have added the mouseover and mouseout events necessary to show/hide the tooltip.
Complete FIDDLE here.
NOTE: For demonstration, I have painted the one circle receiving the events in large orange with an orange-red border (you can't miss it). This is just an example...normally you would apply the event listeners to all circles. And this brings me to a sanity check: you are currently appending shapes "manually" but I assume you will eventually do it based on data binding, one of the main points of D3.

Show d3.layout.force link tooltip on mouse over

How do I implement tooltips on mouse over for links in a D3 directed graph layout? I'm adapting the D3 force example, so setting up node tooltips was straightforward using code like this:
node.append("title")
.text(function(n) {
return n.id;
});
Trying a similar technique with the links didn't result in mouse over tool tips:
var link = svg.selectAll("line.link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) {
return 4;
});
link.append("title")
.text(function(n) {
return n.info;
});

You can find different solutions suggested by Mike Bostock on this Google Groups thread "show value when click or move mouse over on d3.svg.line"

I think what you are looking for is a combination of these two answers:
d3js: _on()_ doesn't send the current datum object to the onmouse function
and
Adding tooltip to bar chart generated using svg path
Both have jsFiddles you can play with.

Setting the link title as shown above does result in mouse over tooltips -- iff you let the mouse hover over any portion of the link a couple of seconds.