Chord diagram - popup label for outer rings (chord groups)

[Brent Edwards]

I created the following chord diagram based on code from this site - http://bl.ocks.org/nbremer/864b11eb83aac3a1f6a2.

The diagram already has popup labels for the chords; however, I would also like to have the same functionality for the outer rings (sorry if this isn't the right term). Here is an example - when hovering over the outer ring, I would like to display the stats for the ring - ex. "Value (% of total)".

How can I do that? I tried to adapt the "popover" code for the "script.js" for this section of code without success:

//Returns an event handler for fading a given chord group.
function fade(opacity) {
  return function(d,i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index !== i && d.target.index !== i; })
 .transition()
        .style("opacity", opacity);
  };
}//fade

[Vlado Z]

Just found the example uses JQuery version 1.11.1. Current 3.1.1

I am also reworking the example with better JavaScript. Once I have the reworked code, will post a link. But cannot answer your question still.

[Vlado Z]

Those boostrap tools contain garbage JavaScript. Million statements with no semicolon at the end.

Were they compiling it from typescript or coffeescript? :D

[Vlado Z]

There are two helper functions: mouseoverChord(d, i) and mouseoutChord(d). You can use the same function mouseoutChord() for the arcs as well but mouseoverChord(d, i) need to be modified. I have done this:

var total = 10000,
    values = [1200, 3400, 400, 2500, 2000, 500];

/**
             * Highlight hovered over arc
             * @param {Object} d
             */
            mouseoverArc: function (d) {
                //Decrease opacity to all
                svg.selectAll("path.chord")
                    .transition()
                    .style("opacity", 0.1);
                //Show hovered over chord with full opacity
                d3.select(this)
                    .transition()
                    .style("opacity", 1);

                console.dir(d);

                //Define and show the tooltip over the mouse location
                $(this).popover({
                    placement: 'auto top',
                    container: 'body',
                    mouseOffset: 10,
                    followMouse: true,
                    trigger: 'hover',
                    html : true,
                    content: (function() {
                        return "<p style='font-size: 11px; text-align: center;'><span style='font-weight:900'>" + values[d.index] +
                               "</span> and <span style='font-weight:900'>" + values[d.index] +
                               "</span> appeared together in <span style='font-weight:900'>" + d.value + "</span> movies </p>";
                    }())
                });

                $(this).popover('show');
            },//mouseoverArc

And modify the code that draws the outer arcs to this:

// Draw outer Arcs
outerArcs = svg.selectAll("g.group")
   .data(chord.groups)
   .enter()
   .append("g")
   .attr("class", "group")
   .on("mouseover", mouseoverArc)
   .on("mouseout", mouseoutChord);
   //.on("mouseover", self.fade(0.1))
   //.on("mouseout", self.fade(opacityDefault));

you can remove the console.dir(d) statement but it will give you useful information about the arc and how to set up data for each arc. Also the function that sets the content key needs to be modified to fit the data you will be showing on mouseover.

[Vlado Z]

Small modification to the mouseoverArc(d, i)  function:

             mouseoverArc: function (d, i) {
                var value = values[d.index];

                //Decrease opacity to all
                svg.selectAll("path.chord")
                    .filter(function(d) {
                            return ((d.source.index !== i) && (d.target.index !== i));
                    })
                    .transition()

                    .style("opacity", 0.1);

                //Show hovered over chord with full opacity
                d3.select(this)

                    //.filter(self.fade(0.1))

                    .transition()
                    .style("opacity", 1);

                console.dir(d);

                //Define and show the tooltip over the mouse location

                jq(this).popover({

                    placement: 'auto top',
                    container: 'body',
                    mouseOffset: 10,
                    followMouse: true,
                    trigger: 'hover',
                    html : true,
                    content: (function() {

                        return "<p style='font-size: 11px; text-align: center;'>Appeared in <span style='font-weight:900'>" + ((value * 100) / total) + "% </span> movies </p>";
                    }())
                });

                jq(this).popover('show');
            },//mouseoverArc

Added the i parameter to the mouseoverArc() function and added the filter() call to the chords same as in the fade() function:

.filter(function(d) {
         return ((d.source.index !== i) && (d.target.index !== i));
 })

Previously it was hiding all chords.

[Vlado Z]

[Vlado Z]

Check some of the reworked code here: https://github.com/bluePlayer/practices/tree/master/D3js%20Exercises/ChordDiagramStep4/

[Brent Edwards]

Thanks so much... that's exactly what I was looking for! Just need to figure out how to insert/adapt these functions into my code.