Accepted answer

You have a couple of problems here.

First, your data has strings for the words. I changed that for an array of objects:

var data = [[5,3,[{'text':'word1',size:4},{'text':'word2','size':1}]], 

After that, I changed the function draw: instead of appending a new div every time you hover a circle, it just change the div content:

    .attr("width", 300)
    .attr("height", 300)
    .attr("class", "wordcloud")

But now comes the most important change:

You are displaying the wordcloud every time the user hover a circle, but you're calling the mouseover for the group element. That way, we cannot access the data bound to each specific circle.

Instead of that, we'll set a variable for the circles:

var circle = g.selectAll("scatter-dots")

Thus, we can get the data for each hovered circle, which is the third element in the array:

circle.on('mouseover', function(d){"display", "block")"krog").style("fill", "orange");
    generate(d[2]);//here, d[2] is the third element in the data array

And we pass this third element (d[2]) to the function generate as a parameter named thisWords:

function generate(thisWords){[800, 300])
    .fontSize(function(d) { return d.size; })
    .on("end", draw)

here is your fiddle:

PS: you'll have to improve the translate for that words.

Related Query