I have tried a sample for you to fiddle with,
Please have a look.
wordcloud without overlap
essentially:
<div id="cloud"></div>
// First define your cloud data, using `text` and `size` properties:
var fill = d3.scale.category20();
var words = {
"Battery Related": "52382",
"Billing": "52412",
"Break Related": "52490",
"Chain Related": "52471",
"Clutch Related": "52468",
"Dealer attitude": "52488",
"Electrical Related": "52352",
"Engine Related": "52446",
"Handle Bar Related": "52486",
"Happy": "52472",
"Jerking": "52325",
"Jerking Problem": "52325",
"Low Mileage": "52489",
"Noise": "52462",
"Poor Pickup": "52406",
"Running Off": "52242",
"Service Quality": "52488",
"Silencer Problem": "52468",
"Starting Trouble": "52490",
"Suspension Related": "52365",
"Vehicle Noise": "52467",
"Vibration": "52463",
"Washing": "52488"
};
var max_freq = 52490;
var cloudwords = ["Battery Related", "Billing", "Break Related", "Chain Related", "Clutch Related", "Dealer attitude", "Electrical Related", "Engine Related", "Handle Bar Related", "Happy", "Jerking", "Jerking Problem", "Low Mileage", "Noise", "Poor Pickup", "Running Off", "Service Quality", "Silencer Problem", "Starting Trouble", "Suspension Related", "Vehicle Noise", "Vibration", "Washing"];
var url = 'http://xxx.yyyy.zz.ww/?q=abc/';
var width = 800,
height = 800;
var leaders = cloudwords
.map(function(d) {
return {
text: d,
size: 5 + (words[d] / max_freq) * 0.9 * 30 // *the size of the "box" occupied by each word. has no relation to text size.
};
})
.sort(function(a, b) {
return d3.descending(a.size, b.size)
});
var leaderScale = d3.scale.linear().range([1, 20]); // *scale range to plot the relative sizes of the words.
leaderScale.domain([d3.min(leaders, function(d) {
return d.size;
}),
d3.max(leaders, function(d) {
return d.size;
})
]);
// Next you need to use the layout script to calculate the placement, rotation and size of each word:
d3.layout.cloud().size([width, height])
.words(leaders)
.padding(0) //fiddle with padding here, does not really have any effect on overlap.
.rotate(function() {
return ~~0; //to keep the words horizontal
})
.font("Impact")
.fontSize(function(d) {
return d.size;
})
.on("end", drawCloud)
.start();
function drawCloud(words) {
d3.select("#cloud").append("svg")
.attr("width", width)
.attr("height", height)
.attr("text-align", "center")
.append("g")
.attr("transform", "translate(" + [width >> 1, height >> 1] + ")") //for transalting words to their different postions.
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) {
return leaderScale(d.size) + "px"; //used scale to resize words to a linear scale.
})
.style("font-family", "Impact")
.style("fill", function(d, i) {
return fill(i);
})
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) {
return d.text;
})
.on("click", function(d, i) {
window.open(url + d.text);
});
}
// set the viewbox to content bounding box (zooming in on the content, effectively trimming whitespace)
var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);