D3 - How to call an array for a tooltip

Question

I am trying to make it so that the name of each item shows up in the tooltip when you hover. I am sure there is a straightforward answer to this, but I am new to D3 so I am not sure what it is.

Example here: http://www.chloesilver.ca/favouritethings/object/

You can see that when you hover, some crazy code shows up so I obviously did it wrong.

In the D3 script, I did this:

$('svg circle').tipsy({  
        gravity: 'w',  
        html: true,   
        title: function() {  
          var o = colors.domain;  
          return o;  
        } 
      });

Where I am trying to call a specific domain label that was specified previously in the code. I was able to do this with a CSV, but the sticky bit here is that all the information is held within the script inside the HTML document.

Answer 1

Delete the code for the tooltips and after line 236: .call(force.drag) add the following:

.on("mouseover", function(d) {
    $(this).tipsy({ 
        gravity: 'w', 
        html: true, 
        title: function() {
            return d.name;
        }
    })
});

You should now see the name of each item as a tooltip.