d3 word clouds - too much overlaps occurring

Question

i am using the d3 example from http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=cloud to build my own word cloud.

All i am trying to do is to get some colour attribute added to the words based on property of the objects the words denote.

for instance, there are 4 words - USA, India, UK and Germany - i use thresholds to set colour of the words - let's say this is more like setting a colour based on density of population.

However this does not in any way affect the size of the font - which might denote land mass of the country.

My problem is that the words are all overlapping on one another.

I wonder what i could be doing wrong - see this code - my 'draw' function. what could i be doing wrong here?

    draw: function(countries) {
        var cctrplt = {BuOrPuRd: {
            4: ["#9ebcda","#e32636","#08306b", "#ffbf00"]
        }};
        var fillthr = 
            d3.scale.threshold()
            .domain([2, 5, 10])
            .range(cctrplt.BuOrPuRd[4]);
        d3.select("#ddTagCloudContentRoot").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(300,300)")
            .selectAll("text")
            .data(countries)
            .enter().append("text")
            .style("font-size", function(d) { return (d.size) + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(k,i) { var ccode = colours_list[k.text]; return fillthr(ccode); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")";
            })
            .text(function(d) { return d.text; });
    }

If there is any other code i need to share - let me know.

thank you.

Answer 1

Found the solution. I was not using the rotate() function call as i want text to be horizontally placed. i thought leaving out the call entirely would help.

appears not to be the case. so i add rotate (0) and that's it. now i get a good-looking word cloud.

TIP: i use stroke: black against text styles and this gives a neat presentation.