Comments (8)
Once I have my data to display, I normalise each size value with something like this:
newValue = (oldValue - min ) / (max - min) * (maxFontSize - minFontSize) + minFontSize
Obviously you need to find your max/min values for each dataset you want to display.
from wordcloud2.js.
or a method to proportionally size the words working backwards from the largest word?
This is a very hard problem. With enough time I can definitely improve the script to do so, but I don't, unfortunately.
Is there an option to make sure no word grows so large it can't be displayed
The problem is we don't really know the biggest the size of the word that would fit either. So we would have to go to the first solution eventually.
from wordcloud2.js.
This is considered fixed when you set the new option drawOutOfBound
to true
.
from wordcloud2.js.
I know that this is a closed issue, but I'm having the same problem.
When I tried to use drawOutOfBound: true
in combination with weightFactor
(for example: weightFactor: 0.9
) the drawOutOfBound
is ignored, meaning that I'm having words that are not displayed in the cloud. Do I use the weightFactor
parameter wrong?
from wordcloud2.js.
I know that this is a closed issue, but I'm having the same problem.
When I tried to use drawOutOfBound: true in combination with weightFactor (for example: weightFactor: 0.9) the drawOutOfBound is ignored, meaning that I'm having words that are not displayed in the cloud. Do I use the weightFactor parameter wrong?
Should not be related... please create a new issue for that and paste the options on the issue.
from wordcloud2.js.
I give the small font-size, the words show.But I found out that the official website examples have words show even though it gives a font-size 30.
from wordcloud2.js.
I fixed it in my own way, it works good to me.
About weightFactor
Read the source code, the rendering font size is:
fontSize = wordWeight * weightFactor
//wordWeight = the value of the word (I'll call it Value below)
fontSize = value * weightFactor
so we can do something limit the biggest font size:
- Find the word with max value, let's call it maxWord.
- In some case, every letter is square, same height & width, like CJK.
If we want the maxWord width = canvas short edge, the font size of the maxWord should be:fontSize = shortEdge / word.length
- So, we can get:
weightFactor = shortEdge / value / word.length
- Add a fontSizeRatio to control the width.
In square letter, if you wish the maxWord's width is half of edge, fontSizeRatio = 0.5.
weightFactor = shortEdge / value / word.length * fontSizeRatio
In case you use font family like Impact, a narrow width font, maybe the fontSizeRatio = 2.
Code
My data source is a json file, with the format below:
{"word1": 999,
"word2": 321,
...}
Javascript (I am not familiar with js)
<script>
// set canvas size as container
var c = $("#wordCloud"),
ctx = c[0].getContext('2d');
cw = $('#canvas-container').width()
ch = $('#canvas-container').height()
ctx.canvas.width = cw;
ctx.canvas.height = ch;
// load data
$.getJSON("test2.min.json", function(json) {
// format data
var data = [];
var max = 0;
var shortEdge = Math.min(cw, ch)
var wf = 999 // weightFactor
for (var word in json) {
//缩小数据差异
var scaleData = 0.4 // 1:不变, <1:缩小差异, >1:放大差异
var v = Math.round(Math.pow(json[word], scaleData))
data.push([word, v])
// 获取weightFactor
var fontSizeRatio = 0.5 // 1:与短边同宽(方块字)
if (v >= max) {
max = v;
// 相同v,但word字数可能不同,取最长,也就是最小字号。
wf = Math.min(wf, shortEdge / v / word.length * fontSizeRatio)
}
}
console.log(max, data);
var options = eval({
// Presentation
'list': data,
// 'fontFamily': '★風雲',
'fontFamily': 'source han pro black, sans-serif',
'fontWeight': 900, // 'normal', 'bold' or a callback
'color': function(word, weight) {
return 'hsl(' +
(Math.round(Math.random() * 0) + 0) + ',' +
(Math.round(Math.random() * 0) + 90) + '%,' +
(Math.round(Math.random() * 0.6) * 50 + 0) + '%)'
}, // 'random-dark' or 'random-light'
// 'class': 'test',
'minSize': 12, // 隐藏低于这个的值
'weightFactor': wf,
'backgroundColor': '#FFF', // the color of canvas
// Dimension
'gridSize': 10, // 间隔距离
// 'origin': [500,100], // 原点
// 'drawOutOfBound': true,
//Rotate
'minRotation': Math.PI / 18, // 默认值正负Math.PI/2
'maxRotation': Math.PI / 18,
'rotationSteps': 5, // n-1方向 5=4方向
// 'shuffle':true,
'rotateRatio': 1, // probability for the word to rotate. 1 means always rotate
// Shape
'shape': 'square',
});
var canvas = document.getElementById('wordCloud');
WordCloud(canvas, options);
});
</script>
PS: 我还有改一个部分,是关于 minSize,这部分直接改了源码。
if (fontSize <= settings.minSize) {
fontSize = settings.minSize // Erimus
// return false;
}
因为这部分,我觉得可以考虑加一个参数,让用户选择小于minSize是隐藏还是保持,我比较倾向于保持。
但毕竟我非常不熟悉js,所有语法都是一边google一边改的,所以就不提PR了。
作者如果方便,可以考虑下。
另外我还在考虑一个算法,关于如何控制字号或其它参数,让数据刚好填满图形区域。
from wordcloud2.js.
另外,即便设置了'drawOutOfBound': false,仍然有部分字体会超出canvas边界一点点(可能是字体本身问题/或者倾斜角)。
虽然可能可以用mask来限制范围,但如果有一个padding设置,应该更好一些。
比如把现在的origin参数,改成range:[x1,y1,x2,y2]。
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.