Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Most important words (highest counts) are excluded if they don't fit #36

john-guerra opened this issue Apr 22, 2014 · 25 comments

Most important words (highest counts) are excluded if they don't fit #36

john-guerra opened this issue Apr 22, 2014 · 25 comments


Copy link

@john-guerra john-guerra commented Apr 22, 2014

Right now the algorithm leaves out words that are too big to fit on the available width/height. This is OK for smaller words that aren't that important, but it also leaves out the most important words on a cloud without any warning.

I can think of two solutions:

  1. If the word doesn't fit, draw it at least partially.
  2. Adjust the size range to guarantee that the biggest word will always fit

I was planning on trying to do this myself and send you a pull request, but I would like to hear your preferences and opinion


Copy link

@lauvil lauvil commented Sep 25, 2014

We are running into this problem too. I think either solution suggested above would work. Has anyone implemented one of them? Although these words are often the highest ranking ones, they could occur anywhere in the list.

Copy link

@john-guerra john-guerra commented Sep 26, 2014

I implemented an overflow option here

Copy link

@tribe84 tribe84 commented Oct 31, 2014

@john-guerra I tried to replace my version of the layout with your version, and while it does work the scaling and arrangement seem a bit off.

It does not seem to take all available width into account.

See pictures below to see what I mean.



Copy link

@john-guerra john-guerra commented Oct 31, 2014

@tribe84 your solution looks cool, have you posted your code somewhere?

Copy link

@sedenardi sedenardi commented Jan 26, 2015

@john-guerra nice job on the overflow code.

Copy link

@john-guerra john-guerra commented Jan 26, 2015

Thanks a lot!

On Mon Jan 26 2015 at 12:54:19 PM Sanders DeNardi

@john-guerra nice job on the overflow

Reply to this email directly or view it on GitHub
#36 (comment).

Copy link

@xellos86 xellos86 commented Mar 5, 2015

i've runned into this problem at first, too. But i noticed when you set a domain, the words won't get drawn bigger than your range value:

var fontScale = d3.scale.linear()
.domain([words min size, words max size])
.range([min font size, max font size]);

See this fiddle for an example:

While this doesn't change the Issue, that the words won't get drawn when they are bigger than the height/width, it let's you controll it through the size parameters.

hope this helps someone

Copy link

@vvitvits vvitvits commented Jun 25, 2015

I ran into the same problem as @tribe84. That forced me to rethink my approach to this issue. I ended up increasing the layout space in the place function, such that it is no longer checks sizing bounds but enlarging sizing bounds. Of course I scale my entire SVG on the subsequent draw method. I understand that this solution is not ideal but it seemed to work for me.

Copy link

@ghostsquad ghostsquad commented Jul 15, 2015

+1 this feature is super needed

Copy link

@eformx eformx commented Jul 18, 2015

My fix was to create a maximum font size based on the largest size and scale all other words point size. I found that the words are always visible. If you want a larger size simply adjust the maxFontSize variable...


//add a variable or dynamically control this value from an input box
var maxFontSize = 36;[width, height])
.words( (d) {
return { text: d.text, size: d.size };
//.rotate(function () { return ~~(Math.random() * 2) * 60; })
.rotate(function (d) { return 0; })
.text(function (d) { return d.text; }) // THE SOLUTION
.fontSize(function (d) {
//restrict font size to max of 36
//largest size / word current size * maxFontSize
//Example: 1st word is Canada and size is 444. Calculation is 444/444 = 1 * 36 sets largest word to 36 (points)
//Example: 2nd word is item and size is 327. Calculation is 327/444 = 0.734 * 36 = 26.5 (points)
return eval(d.size / largest_size * maxFontSize);
.on("end", draw)

Copy link

@supaMUC supaMUC commented Aug 26, 2015

Having the same issue. If I have long words they are just left out depending on the position of the other words. Specifying a max font size is not really helping because short words are then very small even they could be a lot bigger...


Copy link

@bartaelterman bartaelterman commented Sep 11, 2015

+1 @supaMUC

@eformx I don't see how Canada would get a size of 444 in your example. If you set the largest font size to 36, how does your solution prevent that a really long word like blablablablablablabla would fall off?

Copy link

@ghostsquad ghostsquad commented Sep 13, 2015

You need one more calculation in there.

Max size of div / # characters = max pixels per character
then you would need to figure out the size/character for the font you are using at each font size.

This might help.

So, the above calculation will actually give you the max font sized based on the longest word with the highest value.

Copy link

@satotake satotake commented Oct 17, 2015

I found a way of fixing this issue.

I confirm that all words are rendered by the recursive strategy.

  • set domain and range
  • compare between the length of input and output
  • if the length(s) are not equal, call the function recursively decreasing font size.


var words = [
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].map(function(d) {
        return {text: d, size: 10 + ~~(Math.random() * 90)};
        }).concat([{text:"OneBigWord", size: 150}]);

maxSize = d3.max(words, function(d) { return d.size; });
minSize = d3.min(words, function(d) { return d.size; });

function drawcloud (range_max) { // declare the function
var fontScale = d3.scale.linear()
  .domain([minSize, maxSize]) 
  .range([5, range_max]); // the argument here 

var fill = d3.scale.category20();[300, 300])
  .rotate(function() { return ~~(Math.random() * 2) * 90; })
  .fontSize(function(d) { return fontScale(d.size) }) 
  .on("end", function(output) {
      if (word.length !== output.length) {  // compare between input ant output
           drawcloud ( range_max - 5 ); // call the function recursively
           return undefined;  
      else { draw(output); }     // when all words are included, start rendering

function draw(words) {"body").append("svg")
//// please refer

Although it does not always fit your situations, it might help some people annoyed with this issue
And I hope that this issue is solved in the d3-cloud.

Copy link

@axelson axelson commented Oct 29, 2015

@satotake that looks like a decent idea for a solution. Although the jsfiddle you link is currently broken and doesn't render anything. Probably best to load d3-cloud from github rather than

Copy link

@fallenartist fallenartist commented Nov 25, 2015

Building on examples above, I've successfully implemented sorting and sizing of the words by frequency of appearance with duplicate removal:

As for the max font size for the biggest word, it could be done with measureText() method.

Copy link

@BhumikaSarswat BhumikaSarswat commented Dec 10, 2015

hi @john-guerra i used your algorithm but its performance is not good.
Kindly help me in that.

Copy link

@john-guerra john-guerra commented Dec 10, 2015

@BhumikaSarswat I'm sorry but your request is too vague

JTFouquier added a commit to SuLab/mark2cure that referenced this issue May 5, 2016
also, repair scaling in cloud.min.js: ["input[name=scale]:checked").property("value")]().range([20, 50]),  Based on known issue: jasondavies/d3-cloud#36
Copy link

@Frozenfire92 Frozenfire92 commented Jun 23, 2016

Any update on this?

Copy link

@samkugji samkugji commented Dec 27, 2016

@satotake @axelson
I fix satotake's broken jsfiddle

Copy link

@samkugji samkugji commented Dec 27, 2016

I try to make that word size is bigger proportionately word frequency
like cool, nice and fabulous jasondavies's (

I really wonder how do I make it?
Is it possible with this d3-cloud api?

Here is my best to make now below based on satotake's

function wordFrequency(words){
  var newArray = [];
  var wordObj;
  words.forEach(function(word) {
    wordObj = newArray.filter(function (w){
      return w.text == word;
    if (wordObj.length) { wordObj[0].size += 1; }
    else { newArray.push({text: word, size: 1}); }
  return newArray;

var words = $("#data").data("words");
var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
words = words.replace(regExp, '').split(' ');
words = wordFrequency(words).map(function(d) {
      return {text: d.text, size:50 * ( 1+Math.sqrt(d.size) )};
Copy link

@wildgarden wildgarden commented Jan 9, 2017

Satotakes and samkugij jsfiddle did not include his proposed workaround using recursive calls.
Here is a enhanced jsfiddle

Copy link

@owendall owendall commented Feb 28, 2018

Wow, I just stumbled on the same issue in 2018. Thanks for your posts... :-)

Copy link

@khushbu-maurya khushbu-maurya commented Oct 8, 2019

I implemented an overflow option here

hello @john-guerra
can you provide this expmple in d3 v5?
if I am try to run this exaplme in d3 v5 its noy working

Copy link

@john-guerra john-guerra commented Oct 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet