Code
```javascript
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 800 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
// Wordcloud features that are different from one word to the other must be here
var layout = cloud()
.size([width, height])
.words(myWords.map(function(d) { return {text: d.word, size:d.size}; }))
.padding(5) //space between words
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(function(d) { return d.size; }) // font size of words
.on("end", draw);
layout.start();
// This function takes the output of 'layout' above and draw the words
// Wordcloud features that are THE SAME from one word to the other can be here
function draw(words) {
svg
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size; })
.style("fill", d => {return Math.random(d) < 0.5 ? "#ffae32" : "white"})
.attr("text-anchor", "middle")
.style("font-family", "Impact")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
```
System info
Chromium
Firefox
Code
Code
```javascript var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements // Wordcloud features that are different from one word to the other must be here var layout = cloud() .size([width, height]) .words(myWords.map(function(d) { return {text: d.word, size:d.size}; })) .padding(5) //space between words .rotate(function() { return ~~(Math.random() * 2) * 90; }) .fontSize(function(d) { return d.size; }) // font size of words .on("end", draw); layout.start(); // This function takes the output of 'layout' above and draw the words // Wordcloud features that are THE SAME from one word to the other can be here function draw(words) { svg .append("g") .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size; }) .style("fill", d => {return Math.random(d) < 0.5 ? "#ffae32" : "white"}) .attr("text-anchor", "middle") .style("font-family", "Impact") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } }); ```Fix
Reason: Firefox does not evaluate size without units