It does show up without an order (words overlapped totally- unreadable) only when the following function is commented out:

function place(board, tag, bounds) { var perimeter = [{x: 0, y: 0}, {x: size[0], y: size[1]}], startX = tag.x, startY = tag.y, maxDelta = Math.sqrt(size[0] * size[0] + size[1] * size[1]), s = spiral(size), dt = Math.random() < .5 ? 1 : -1, t = -dt, dxdy, dx, dy;

 while (dxdy = s(t += dt)) {
   dx = ~~dxdy[0];
   dy = ~~dxdy[1];

   if (Math.min(dx, dy) > maxDelta) break;

   tag.x = startX + dx;
   tag.y = startY + dy;

   if (tag.x + tag.x0 < 0 || tag.y + tag.y0 < 0 ||
       tag.x + tag.x1 > size[0] || tag.y + tag.y1 > size[1]) continue;
   // TODO only check for collisions within current bounds.
   if (!bounds || !cloudCollide(tag, board, size[0])) {
     if (!bounds || collideRects(tag, bounds)) {
      var sprite = tag.sprite,
           w = tag.width >> 5,
           sw = size[0] >> 5,
           lx = tag.x - (w << 4),
           sx = lx & 0x7f,
           msx = 32 - sx,
           h = tag.y1 - tag.y0,
           x = (tag.y + tag.y0) * sw + (lx >> 5),
           last;
       for (var j = 0; j < h; j++) {
         last = 0;
         for (var i = 0; i <= w; i++) {
           board[x + i] |= (last << msx) | (i < w ? (last = sprite[j * w + i]) >>> sx : 0);
         }
         x += sw;
       }
       delete tag.sprite;
       return true;
     }
   }
 }
 return false;

}

I currently have 3.4.3 of d3 and our word cloud has stopped working from upgrading from d3.v2.js . I wonder if d3-cloud is supported for the latest of d3 right now.

What do you think about the option to provide a list of word objects that would include the word and the frequency of that word? Might be handy for people who already have the counts calculated for each word to save passing a lot of repeat words.

Regardless of what .padding is set to, the Words are always relatively tightly packed.

I expected more whitespace when I called .padding(10). Is the padding a true/false setting or is there something missing. I don't see the padding value added anywhere in the code, just a check if it is set. If this is intentional, please clarify in the documentation/example.

I describe this layout in one of the chapters of my book and I'm updating that to the 2nd edition for d3v4 and I was wondering if there will be a v4 version of this chart forthcoming. If not, no worries, I can replace the word cloud section with something else.

Hello!

I am aware that there is already a solved post on a very similar issue, but the solution described there does not apply in my case.

When I try to use the wordcloud layout, I get frequent overlaps.

For a test case I used the example code from this page with some slight changes and a file with some test words. I uploaded the files on Plunker: http://plnkr.co/edit/MfBFgG4dKCyW2gaNBkhf?p=preview

The overlaps do not happen every time, but fairly frequently when you do some reloads. I would really like to prevent that.

Other people reported the same issue and found that it was related to using web fonts or skipping the rotate parameter. This does not apply in my example.

I suspect that it might be related to the fact that there are to many words for the canvas size, however, I also did tests where I signficantly increased the canvas size and it still happened (though less frequently, as the random placement of the words made it less likely). In addition to that, you can see that several words are not shown at all due to the small canvas size. Why leave some out and create overlap for others? I'm pretty confused by this issue. Is there any mistake on my part?

Added bower support, and support for loading as an AMD module

1. Added bower configuration
2. Moved source to src/ directory
3. Wireup so that when used as an AMD module, d3.layout.cloud mixes in with d3
4. Created AMD module example

As far as I can tell IE9+ should support the features needed to layout the word cloud. Unfortunately though it does not work out of the gates.

I have spent some time trying to figure out why, but haven't managed to get it working properly. The problem seems to be related to the getImageData method on the canvas. My tests revealed that in IE9 it was consistently returning all zero values even after the fillText method had been called.

Any ideas?

From the simple.html example

  ...
  d3.layout.cloud().size([300, 300])
      .words([
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font('Impact')     // <!--------- DOESN'T WORK?
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();
  ...

Can anyone advise how to fix it?

Is there a way of removing/reducing the line-height or padding on the text elements?

The reason behind this is that I have mouseover event listener on each word which increases the font-size for the hovered text element. The problem is then trying to hover off the element, but you are still on the transparent padding, and not hitting the item behind.

As you can see in the example above, it's nearly impossible to hit the smaller elements (note, via, etc.) around the bigger words element.

Here is the code that breaks for me - https://gist.github.com/StefanDimov/88a4b2a749c267ab4f78

I want to change the layout size on window resize, so the space will be efficiently used, but sometimes when I shrink the browser's width as much as I can and then expand it some words start to layered on top of others. Doesn't occur consistently, but most of the times it's there.

I know very little about Github so I am not sure how to get started with this library and need some very basic helps.

1) How can I directly use this on a browser? I downloaded the zip file and extracted them to a word folder, and then under the same folder, I create a test.html file:

 <head>
  <script src="/word/build/d3.layout.cloud.js"></script>
  <script src="/word/examples/browserify.js"></script>
</head>
<body>
</body>

The browserify.js file will generate an error. I understand it can only be used under nodejs environment. But how can I directly use it on my webpage?

2) How to install the library through npm? I also tried installing it on my linux server. Again, I extracted the downloaded .zip file to a word folder, and under this folder I ran npm i d3-cloud However, this is what I got: the log says:

verbose stack Error: Refusing to install d3-cloud as a dependency of itself

UPDATE OK. I have been able to install the package by running npm i under the word folder. Still the question is, how can I use this library on my webpage?

version d3 : ^5.15.0 d3-cloud : ^1.2.5

Expected behaviour All words are displayed in circles

Actual behaviour When changing font-size domain, lot of space left unused.

To allow for much larger datasets, it would be very nice to be able to handle the 'easy part' of counting words, and let this app handle the 'hard part' of generating the graphics.

here is what I try to do by using jquery:

var func = (v) => {
    $(v).css('opacity', 0)
    setTimeout(()=> {
        $(v).text(parseInt(Math.random() * 100))
        $(v).css('opacity', 1)
        setTimeout(func.bind(this, v), 3000 + Math.random() * 3000)
    },5000)
}

$('svg text').each((k, v) => {
    $(v).css('transition', 'opacity 5s cubic-bezier(0.4, 0, 0.2, 1) 0s')
    setTimeout(func.bind(this, v), Math.random() * 10000)
})