d3-cloud | Create word clouds in JavaScript | Data Visualization library

I have seen similar questions here and I've tried a lot of solutions mentioned earlier such as:

1. Altering svg and canvas dimensions.
2. Changing the font style like .font('Helvetica')
3. Using variations of 10 words, 30 words, and 50 words.
4. Specified a text accessor function like this .text(function(d) { return d.word; })
5. Exploring options in .padding()
6. Used .rotate(0)

Here is my code on JS Fiddle.

For the sizing of words, instead of the frequency of occurrence of the word, I'm using rank in my code. This is because the sizing gets disrupted due to the outliers in my dataset. Say the highest frequency is 32, and the lowest is 1, there is a large difference between the two sizes as they are proportionally mapped.

So I opted to size the words based on rank. I have used Javascript to sort this data.

This is my first question here, so apologies if there is a lack of clarity. Would love any feedback or help/solution to this!

Thanks so much in advance :)