Placing dots in an arc

Question

I have an arc and currently the dots that belong to that arc use d3.layout.pack() to place them, this however only places the dots in the arc in a circle obviously.

Is there a way that I could place the dots in an arc to use the whole space of an arc (currently it just clusters the points in the center of the arc in a circle)

I tried messing with the padding but obviously its not what i needed as it can push the dots out of the bounds of an arc

Thanks Mark

EDIT - Code The code is just standard layout pack code. I am trying to see if there is a way i can "pack" the dots in an arc.

var pack = d3.layout.pack()
.sort(null)
.size([_config.RingWidth, _config.RingWidth])//config.RingWidth is the width of the arc
.value(function (d) {
  return 1 * Math.random();//the dots are all the same size
});

The dots are then processed and the pack is used

dots2 = new Array();
for (var clusterNum = 0; clusterNum < _hierarchy.Dots.dotsArray.length; clusterNum++) {
    dots2[clusterNum] = svg.selectAll(".node" + clusterNum)
      .data(pack.nodes(_hierarchy.Dots.dotsArray[clusterNum])
      .filter(function (d) {
         return !d.children;
}));

The top image is how it currently functions and the bottom is how I want it to function. As you can see in large arcs it looks strange that it cannot use all the arc, but i am lost on how I could achieve this (i tried padding the pack but then it goes outside the boundaries of the arc).

Cheers

Balbur

It's not clear to me what you're trying to do. Do you have a picture of what currently happens and what you want to happen? – Kaolinite

You could partition the area of the arc in a grid and place the dots at the grid points if you don't mind a very regular layout. – Kaolinite

Answer 1

One way you can achieve it is by linearly transforming the 1x1 square in which d3.layout.pack draws the bubbles by default, as shown here:

The key functions which do that are these:

// Does the transformation from [(0,0), (0,1), (1,1), (1,0)] sqaure to an arc
// with the parameters [ (r0, theta0), (r0, theta1), (r1, theta1), (r1, theta0) ]
function transform_x(xy, r0, r1, theta0, theta1) {
    var x = xy.x, y = xy.y;
    return ((1 - x) * r0 + x * r1) * Math.sin((1 - y) * theta0 + y * theta1);
}

function transform_y(xy, r0, r1, theta0, theta1) {
    var x = xy.x, y = xy.y;
    return ((1 - x) * r0 + x * r1) * Math.cos((1 - y) * theta0 + y * theta1);
}

A working demo of the code is here: http://jsfiddle.net/tq4rjs7v/

Ladybug