javascriptjqueryd3.jsword-cloudtag-cloud

Keep d3-cloud consistent between refreshes with a seed value?


Is there a way to pass a seed value to d3-cloud or another javascript based tag cloud in order to keep it consistent between page loads?

Our client wants to use a tag cloud as a navigation/discovery aid but due to d3-cloud randomizing the placement each time it's usefulness is lowered.

Is there a way to pass a seed value or modify the cloud to keep it looking the same if the input is the same? I do not require rotation and the name and size will be (for most of the time) constant and predetermined.

I could save a representation of it to localstorage but when Jenny looks at it on her tablet or goes to help Jane it won't be consistent

Can anyone make any recommendations on how I could create a persistent state word cloud?


Solution

  • We have found a fix :)

    Set random to return 1 to not randomize the initial placement of the words

    var layout = cloud()
        .size([1500, 475])
        .words(sitesList.map(function(d) {
          return {text: d, size: 10, test: "haha"};
        }))
        .padding(5)
        .rotate(function() { return ~~(Math.random() * 1) * 90; })
        .font("Impact")
        .fontSize(function(d) { return d.size; })
        .random(function(d) { return 1; })
        .on("end", draw);
    

    Edit: After further experimentation it looks better to return 0.5, this seems to group the words in the center. Higher numbers appear to push it off to the bottom right corner