I'm currently experimenting with creating a wordcloud using the D3 pack layout in a horizontal format.
Instead of restricting the width, I am limiting the height for my layout.
The pack layout automatically arranges the circles with the largest one in the center and the rest around it. However, when the height is constrained, instead of spreading out horizontally, the circles shrink in size.
Is there a way to prevent the layout from resizing the circles and have them start stacking up on the sides once there is no more space around the larger circle?
I envision something similar to this example: https://i.sstatic.net/nZocQ.jpg
However, my current outcome looks like this: http://jsfiddle.net/v9xjra6c/
This is the code I'm working with:
var width,
height,
diameter,
padding,
format,
pack,
svg,
node;
var initSizes = function() {
var dimensions = { width: 900, height: 288 };
width = dimensions.width;
height = dimensions.height;
diameter = Math.min(width, height);
padding = 12;
format = d3.format(',d');
};
var initLayout = function() {
pack = d3.layout.pack()
.sort(null)
.size([width, height])
.padding(padding);
};
var createSVG = function() {
svg = d3.select('.chart-container').append('svg')
.attr('width', width)
.attr('height', height)
.attr('class', 'bubble');
};
var createBubbles = function() {
var dataset = pack.nodes(DATA);
node = svg.selectAll('.node')
.data(dataset.filter(function(d) { return !d.children; }))
.enter().append('g')
.attr('class', 'node')
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
node.append('title')
.text(function(d) { return d.name + ': ' + format(d.value); });
node.append('circle')
.attr('r', function(d) { return d.r; });
node.append('text')
.attr('dy', '.3em')
.style('text-anchor', 'middle')
.text(function(d) { return d.name.substring(0, d.r / 3); });
};
initSizes();
initLayout();
createSVG();
createBubbles();
Any suggestions or help would be greatly appreciated!