Example of adding foreignObject tags in d3 chart, from a jsonp query. (ATTENTION: foreignObject not supported by IE, switched to rickshaw library for that)

d3_annotations.js

$.getJSON("<url>?callback=?",function(data){
    svg.selectAll(".names")
          .data(data.entries.filter(function(d){ if(d.type == "SONG") return d;}))
          .enter().append("foreignObject")
          .attr("x",function(d){ return x(d.timestamp);})
          .attr("y", height)
          .attr("width",300)
          .attr("height",margin.between)
          .append("xhtml:div")
          .attr("class","songLabels")
          .html(function(d){ 
            var temp = "";
            switch(d.type)
            {
              case "SONG":
                temp = "<p'>" +d.title+ "</p><p>" + d.artist + "</p>";
                break;
              case "UNKNOWN":
                temp = "<p> "+ d.type+"</p>";
                break;
              default:
                temp = "<p> "+ d.type+"</p>";
                break;
            } 
            return temp;
          });
  });