Draw Wordcloud For Each Point In Scatterplot

I create a scatterplot which is defined on the following data (note that only first two fields are currently using for plotting): var data = [[5,3,'{'text':'word1',size:4},{'text':

Solution 1:

You have a couple of problems here.

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

vardata = [[5,3,[{'text':'word1',size:4},{'text':'word2','size':1}]], 
        [3,5,[{'text':'word3',size:5},{'text':'word4','size':4}]],
        [1,4,[{'text':'word1',size:3},{'text':'word2','size':5},{'text':'word3','size':2}]],
        [2,3,[{'text':'word2',size:1},{'text':'word3','size':5}]]];

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:

div.append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .attr("class", "wordcloud")
    .append("g")

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")
    .data(data)
    .enter()
    .append("svg:circle");

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

circle.on('mouseover', function(d){
    div.style("display", "block")
    d3.select("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){
    d3.layout.cloud().size([800, 300])
    .words(thisWords)
    .rotate(0)
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();
}

here is your fiddle: https://jsfiddle.net/jwrbps4j/

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