jasondavies / d3-cloud Goto Github PK

Hi Mr.Jason

I have trying to add an external txt file. I am getting only blank page can u please help me how to put an external txt file

Is it possible to draw a cloud on server side and get its SVG definition? If so, would you please provide a sample?

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?

Hi Jason,

The demo site with an external URL does not work. It indicates "Fetching" but never completes.
The demo site rotates the letters from -60 to +60 degress but not in your example. How or where do I implement that?
Thanks,
Grant

Great work, I've been prototyping using this (awesome) D3-cloud, but ran into an issue that burned up a lot of time and thought I'd share in case others hit the same issue.

when I changed the line of code in the sample to update d3.select("body").append("svg") to append to anything other than body, the cloud disappeared.

To append to anything other than the body tag, you need to wrap the entire script in the jquery on ready event, otherwise it is rendering before the page gets a chance to load, therefore the target you're appending to doesn't exist!

Any other samples would be hugely helpful to anyone approaching this for the first time.

Hi, is it possible to stop repeating words in the simple example? and also get the words from url instead a variable? thx for ur help

I'm trying to generate a wordcloud using d3wordcloud and some of the words are not plotted. Is this a bug in d3-cloud?

Thanks!

Is it possible to blur the word cloud and then animate it coming into focus? I've tried applying a feGaussianBlur filter to the g container and to each text node itself but nothing is blurring the text objects.

Any pointers?

I'm getting collisions when I try using D3- cloud. I've googled and looked at other issues with the similar problem, but their solution doesn't seem to work for me.

I've attached a picture showing an example of the issue.

 module.keywordGraph = module.keywordGraph.map(function(keyObj){
      return {
        text: keyObj.name,
        size: keyObj.count,
        test: 'haha'
      };
    })

d3.layout.cloud()
    .size([800, 500])
    .words(module.keywordGraph)
    .rotate(0)
    .text(function(d){debugger; return d.text})
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();

  function draw(words) {
    var chart = d3.select("#graph-container").append('svg').attr("class", "wordcloud")
      .attr("height", 500)
      .attr("width", 800)
      .append("g")
      .attr('transform', 'translate(250,250)');

    chart.selectAll("text")
      .data(words)
        .enter().append("text")
        .style("font-size", function(d) { 
          return d.size + "px"; })
        .style("fill", function(d) { return colorScale(d.size); })
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) {
          return d.text; });
        }

Can you please help out to make it work in IE8. Because approximately 23% of Microsoft user still using IE8.

Thanks

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?

It would be nice to support words arriving asynchronously in a streaming fashion. One possibility is to make the layout stateful, so that it can lay out new data while avoiding collisions with the existing layout.

Your work is awesome. And I am using d3-cloud in our project.

I can't find any instruction of installing it via Bower in github-repo/demo page.
It will be great to have it documented.

Hi,

I want to know how to color differently each word in the cloud ?

Thanks for you help

Amine

The text file is not found.

192:test $ node test.js

fs.js:427
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT, no such file or directory 'Genesis.txt'
    at Object.fs.openSync (fs.js:427:18)
    at Object.fs.readFileSync (fs.js:284:15)
    at Object.<anonymous> (/Users/zhangyujun/Workspace/d3-cloud/test/test.js:23:16)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

Would there be a way to allow the cloud() to accept a distribution instead of a string of text? I happen to already have token-count tuples. I have looked at many word cloud programs and this is the only one that looks like it would lend itself to accepting a distribution as input (except the one in flash :( that does it, wordle).

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.

http://jsfiddle.net/duto_guerra/VNurQ/

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

John

https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html is missing a closing </body> and <html> (open and close) tag. Is this optional?

Large data sets can cause the word cloud to spend a lot of time in the step function before drawing the final outcome. A maximum time limit option would be a nice addition.

I submitted a pull request with my own interpretation of this option.

@jasondavies , I'm a bit curious on how the rectangular spiral is generated from the formula (sqrt(1+4*t) - 1) & 3.

https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js#L347

Is there any reference link for further reading?

I'm noticing that if I render the cloud in a relatively small area then some of the words (often one or more of the higher value words) are being missed out.

At the moment my plan is to iteratively reduce the range of font-sizes and re-layout the cloud until all the words fit, but I was wondering if there was a better way to make sure all the words are rendered, assuming the height and width of the cloud cannot be increased?

in a context where you specify the height and or width via variables, its possible they could be null (or negative for that matter).

What is the desired behavior, use the default size values? or throw an error?

cloud.size = function(_) {
      if (!arguments.length) return size;
      if (!_[0] || _[0] < 0) _[0] = DEFAULT_WIDTH;
      if (!_[1] || _[1] < 1) _[1] = DEFAULT_HEIGHT;
      return arguments.length ? (size = [+_[0], +_[1]], cloud) : size;
    };

Is it possible to install d3.layout.cloud without installing cairo?

As I understand, cairo would be used for server-side canvas rendering, which I don't need to do. Having to install cairo on all of my deployment boxes is something that I'd like to avoid doing.

Here are the errors I get when attempting to install d3.layout.cloud -

$ npm install d3.layout.cloud
-
> [email protected] install /Users/bdgibson/dev/bikini/node_modules/d3.layout.cloud/node_modules/canvas
> node-gyp rebuild

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing `cairo.pc'
to the PKG_CONFIG_PATH environment variable
No package 'cairo' found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack     at ChildProcess.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:820:12)
gyp ERR! System Darwin 14.1.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/bdgibson/dev/bikini/node_modules/d3.layout.cloud/node_modules/canvas
gyp ERR! node -v v0.10.35
gyp ERR! node-gyp -v v1.0.1
gyp ERR! not ok 

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 14.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "d3.layout.cloud"
npm ERR! cwd /Users/bdgibson/dev/bikini
npm ERR! node -v v0.10.35
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR! not ok code 0

if so, can you provide an example for this. i need each word alongside text and size, have a link (URL) to go on click

Is there a way to continuously increase word frequency (or continuously increase font size) to create a dynamic cloud. For example, show the results of an active vote. As people continue to vote for a particular word, it would dynamically grow. The objective is to avoid a screen refresh or repaint of the cloud.

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.

Awesome project!

I just had a horrible time tracking down an infinite loop in this library. I had a scenario where an async callback that draws the tag cloud sometimes fired after an element had been removed from the page. It called .size([0,0]) and eventually .start(), which completely tanked the user's browser.

This is my solution, but perhaps .size() should reject the 0 values or throw an error:

  function step() {
    if (size[0] === 0 || size[1] === 0) {
        cloud.stop();
        event.end(tags, bounds);
        return;
    }

Hi, thank you for this nice plug-in. Before I invest time in it, however, is this plug-in responsive and workable with things like Bootstrap? I've noticed other tag/word cloud plug-in break as the screen size changes--the words either get cut-off or they spill over the respective container. Any thoughts and comments are appreciated!

The d3 dependent library has achieved to run without DOM from within a web worker.
However, d3-cloud still requires to run in the main browser thread, blocking UI responsiveness for large cloud elaborations.

At least this is what it appears to me. I get a "ReferenceError: Canvas is not defined" running from a web worker.

Is it possible to solve this, or are there workarounds?

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?

I want display cloud in top page, above all other content but now it auto append in last page.

I have been trying with different settings but there is no way that the words never overlap. The padding option does not seem to work...

On the main page of this project you show the cloud in an eclipse, is it possible to put the cloud in a more complex shape (like a map of the USA?).

Also how did you get it in the eclipse?

for example, I want to use json structure instead of repeated text instances.

[{"word":"keyword1", "count":99}, {"word":"keyword2", "count":14}, ......]

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.

Is it possible to use multiple lines of text as one item? I need to display first name and last name with a line break in between. Any suggestions?

Hi there.
Firstly, thank you for this amazing plugin!

I have found though, that if I supply over 1100 words, the cloud will only display 40 - 70 words in the cloud, even thought I am requesting 250 words.

Is there any particular reason for this?

As I understand it, the d3-cloud library only renders a set of {word, size} pairs into a chart. It does not actually have any functionality to create these pairs, correct? Creating wordcloud will almost always involve converting some big string(s) of text to a set of word/size pairs. Perhaps it would be useful to include an example that illustrates how to go about this? Or perhaps adopt some of this functionality in the library?

This way, with the same seed value, you could ensure you have the same layout each time.

When the canvas is resized, the words are redrawn but they overlap.

When the window resizes, I update svg canvas width and height. I also execute the following code:

this._canvas = d3.select(this._container)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%');

this._cloud = this._canvas.append('g');

this._cloudLayout = d3.layout.cloud();
...
function update() {
   var $canvas = $(this._canvas.node()),
        canvasWidth = $canvas.width(),
        canvasHeight = $canvas.height();

   this._cloud.attr('transform', 'translate(' + (canvasWidth / 2) + ',' + (canvasHeight / 2) + ')');
   this._cloudLayout
        .stop()
        .size([canvasWidth, canvasHeight])
        .start();
}

The original layout upon refresh:

The layout after resizing of the window:

It also seems not to update the bounds somehow.

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.

The cloud being generated has coordinates relative to the window. The "g" tag is used to translate all elements but is there a way to ensure all words are constrained within the containing div? The issue with the translation is that there is no way to predict where elements are rendered and thus, some may be rendered outside the container.

https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js#L288

m = pixels[((y + j) * (cw << 5) + (x + i)) << 2] ? 1 << (31 - (i % 32)) : 0;

If I understand right, it checks the 0, 4, 8 element in the ImageData array. But the content of image data is [r, g, b, a, r, g, b, a, ...]. So the pixels sampled are red channel.

IMHO, we should sample the alpha channel for pixel detection.

Is there a way to generate greyscale font colours?

The conditional require('canvas') statement on line 388 causes the build to break when using Browserify or the RequireJS optimizer.

This happens because the build tools look through the source and find all calls to require() and attempt to eagerly include them, since whether or not the code would actually execute is cannot be known at built time.

This means Browserify / RequireJS attempt to resolve the canvas module, which isn't found (or needed, as we are targeting the browser).

Removal of the require() call fixes this issue.

Hi Jason,

thanks for the great example. I tried to extend it and want to add new words at runtime. Do you know why my approach slows down after about 150 words? I cant see any update after 150 words...

https://github.com/geraldstanje/realtime_wordcloud/blob/master/home.html

Thanks,
Gerald

The default wikipedia cloud example throws these errors:

Failed to load resource: the server responded with a status of 504 (Gateway Time-out)
Uncaught TypeError: Cannot call method 'replace' of null

If I try to enter a custom URL, this error is thrown instead:

XMLHttpRequest cannot load http://en.wikipedia.org/wiki/Sky. Origin http://www.jasondavies.com is not allowed by Access-Control-Allow-Origin.

Can it is possible to apply click event in the tag cloud (on the words)??????

It will be cool if "d" contains the same fields as original data: to have quick access to required additional things (like color and etc.).