How to subdivide a figure into sections of a given size

Question

I'm currently trying to build some kind of pie chart / hybrid chart diagram (in canvas / javascript). I do not know if this is possible. I am very new to this and I have not tried any approaches yet.

Suppose I have a circle, and a set of numbers 2, 3, 5, 7, 11.

I want to divide the circle into sections equivalent to numbers (like a pie chart), but forming a grid / honeycomb shape.

Is it possible? Is it ridiculously complicated, especially for those who have just done some basic rendering pie charts?

Answer 1

This is my opinion on this after a quick look.

The general solution, assuming the presence of n polygons with k vertices / edges, will depend on the solution of n equations, where each equation has at most 2nk (but exactly 2k non-zero). The variables in each polygonal equation are the same variables x_1, x_2, x_3... x_nk and y_1, y_2, y_3... y_nk . Exactly four of x_1, x_2, x_3... x_nk have non-zero coefficients, and exactly four of y_1, y_2, y_3... y_nk have non-zero coefficients for each polygon equation. x_i and y_i limited differently depending on the parent form. For simplicity, we will assume that the shape is a circle. Boundary condition: (x_i)^2 + (y_i)^2 <= r^2

Note. I say no more than 2nk , because I am not sure of the bottom, but I know that it cannot be more than 2nk . This is the result of polygons, as a requirement, separation of vertices.

The equations are a set of defined but variable limited integrals representing the area of ​​each polygon, with an area equal to ith for the polygon:

A_i = pi*r^2/S_i

where r is the radius of the parent circle, and S_i is the number assigned to the polygon, as shown in the diagram.

Four separate pairs (x_j,y_j) , as with non-zero coefficients in the polygonal equation, will give vertices for the polygon.

This can be significantly difficult.

Answer 2

Is the border fixed from the start, or can you warp it a bit?

If I had to solve this, I would sort the areas from large to small. Then, starting with the largest area, I first created a random convex polygon (vertices along the circle) with the required size. The next region would divide the edge with the first region, but otherwise would be random and convex. Each polygon will then select an existing edge from existing polygons and will also share any “convex” edges that start from there (where the “convex edge” is one that, if used for a new polygon, will result in a new polygon still convex )

By evaluating the various estimated positions of the polygon for a “common border approaching the desired border,” you can probably create a cheap approximation to your original goal. This is very similar to what cloud words do: step by step put things from the largest to the smallest, trying to fill a more or less enclosed space.

Answer 3

Given a set of voronio centers (i.e. a list of center coordinates for each of them), we can calculate the area closest to each center:

 area[i] = areaClosestTo(i,positions) 

Suppose this is a little wrong, because we do not have centers in the right place. Thus, we can calculate the error in our current set by comparing the areas with ideal areas:

 var areaIndexSq = 0; var desiredAreasMagSq = 0; for(var i = 0; i < areas.length; ++i) { var contrib = (areas[i] - desiredAreas[i]); areaIndexSq += contrib*contrib; desiredAreasMagSq += desiredAreas[i]*desiredAreas[i]; } var areaIndex = Math.sqrt(areaIndexSq/desiredAreasMagSq); 

This is the vector norm of the vector of differences between regions and desired ones. Think of it as how good a line with least squares is.

We also need some kind of honeycomb template, so we can call it honeycombness(positions) and get a general assessment of the quality of the thing (it's just a starter, the weight or shape of this can be anything that the boat floats):

 var overallMeasure = areaIndex + honeycombnessIndex; 

Then we have a mechanism to know how bad the assumptions are, and we can combine this with a mechanism for changing positions; The easiest way is to simply add a random amount to the x and y coordinates of each center. Alternatively, you can try moving each point to neighboring areas with too high an area and away from those with too low an area.

This is not a direct solution, but it requires minimal mathematics, in addition to calculating the area closest to each point and accessible. The hard part can be recognized by local lows and deal with them.

By the way, it's easy enough to get the starting points for the process; pie centroids should not be too far from the truth.

A definite plus is that you could use intermediate calculations to animate the transition from pie to voronoi.