Comments (4)
BTW you could listen to wordclouddrawn
event and access it's drawn
property to tell the word have been drawn or not.
from wordcloud2.js.
Hi!
In my case, the weight of each words is a number of occurrences. I use the weightFactor function in order to normalize it. The problem is depending on the rotation random some big weighted words are shown or not.
I can change de size of my canvas but by doing so I have sometimes big empty places.Having some normalize functions choices would be a good enhancement (linear, exp, ..., custom).
Being able to have the size (height or width) of the canvas calculated automatically would be good as well.. Maybe having a function for rotation would be a solution since you can choose if you want to rotate depending on the weight...
Indeed. While there is a custom function to specify the color or weight of a specific word, there isn't a function for rotateRatio
. It's possible to patch the code and have it doing so.
I spent quite some time on your wordcloud code looking for a way to have the hover word highlighted. I found your fixed issue but no explanation on how to do so. At the end I found that you use a absolute div (no pointer-event) that you place using dimensions provided by the hover callback. You should say it in your doc :)
The demo page is part of the documentation. This can be made obvious on the doc. Doc sometimes leave important detail because of my inability as non-native English speaker to write great doc, compare to code -- patch to fix either or both is very welcome :)
from wordcloud2.js.
@timdream thank you so much for making this man!
Feedback: I thought "woudclouddrawn" was triggered when the whole cloud was finished drawing, however after reading this thread, it is indeed every time a word is drawn.
Using typescript, one can subscribe to the event like this:
document.getElementById('wordcloud-canvas-container').addEventListener('wordclouddrawn', (data : any) => this.onWordCloudDrawn(data));
wordcloud-canvas-container being a div around a canvas:
<div id="wordcloud-canvas-container">
<canvas id="wordcloud-canvas" width="{{getCanvasWidth()}}" height="{{getCanvasHeight()}}"></canvas>
</div>
Then do something with it in onWordCloudDrawn(), eg print it in the console:
onWordCloudDrawn(eventData : any){
console.log("Word cloud drawn", eventData);
}
The data has a "detail" property with important information, so my onWordCloudDrawn is actually:
onWordCloudDrawn(eventData : eventData){
//console.log("Word cloud drawn", eventData);
console.log(eventData.detail.item[0], eventData.detail.item[1], eventData.detail.drawn);
}
And then eventData is an interface, where I'm able to get the information I'm interested in:
export interface eventData {
detail : {
drawn: boolean,
item: string | number []
}
}
For my own project, I'm going to check if all words has been drawn, and then re-scale using the weightFactor property, or let users adjust it and re-draw.
This comment is only to provide a bit of feedback to you, as well as tell others what I was looking for reading this thread 😄
from wordcloud2.js.
I went into a similar issue today. I found out, that the ordering of the entries is pretty relevant. It seems the the cloud is built inside out. So it might make sense to place the longest words first.
from wordcloud2.js.
Related Issues (20)
- Text is truncated HOT 1
- Uncaught TypeError: ..... Value is not of type 'long'. HOT 1
- No type for version 1.2.2
- First words aligned
- How to randomize the filling order? HOT 3
- How do I change Device pixel density (dppx)? HOT 1
- Canvas not filled on Chromium
- can you please add example for how to add mouse events
- How can we rotate the text to specific angle?
- How we can add background color to the masked image HOT 1
- Keep getting many null is not an object errors
- Semver Dependency Issue
- Demo pages fails to 'run' on Chrome
- Where can we find the code of the demo page? HOT 1
- Next 14
- treat words as a single rectangle to avoid overlapping?
- How to render correct sizes based on order instead of count?
- Fix low font quality rendering
- Fill the whole canvas
- Add data to DOM
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wordcloud2.js.