2.4 Creating a Layout Algorithm

Creating the Layout Structure

[
    {hour:  0, startAngle: 0, endAngle: 0, count: 0},
    {hour:  1, startAngle: 0, endAngle: 0, count: 0},
    ...
    {hour: 23, startAngle: 0, endAngle: 0, count: 0}
]

Counting the Data Items

[
    {hour:  0, startAngle: 0, endAngle: 0, count: 10},
    {hour:  1, startAngle: 0, endAngle: 0, count: 11},
    ...
    {hour: 23, startAngle: 0, endAngle: 0, count: 13}
]

Adding the Start and End Angles

[
    {hour:  0, startAngle: 0,      endAngle: 0.2618, count:  7},
    {hour:  1, startAngle: 0.2618, endAngle: 0.5236, count: 14},
    ...
    {hour: 23, startAngle: 6.0214, endAngle: 6.2832, count: 17}
]

Configuring the Angle Extent

[
    {hour:  0, startAngle: 0.5236, endAngle: 0.6109, count: 14},
    {hour:  1, startAngle: 0.6109, endAngle: 0.6981, count: 15},
    ...
    {hour: 23, startAngle: 2.5307, endAngle: 2.6180, count: 14}
]

Using the Layout: Radial Chart

[
    {hour:  0, startAngle: 0,      endAngle: 0.2618, count: 10},
    {hour:  1, startAngle: 0.2618, endAngle: 0.5236, count: 21},
    ...
    {hour: 23, startAngle: 6.0214, endAngle: 6.2832, count:  8}
]

Using the Layout: Bar Chart (Bonus)

[
    {hour:  0, startAngle: 0,      endAngle: 0.2618, count: 10},
    {hour:  1, startAngle: 0.2618, endAngle: 0.5236, count: 21},
    ...
    {hour: 23, startAngle: 6.0214, endAngle: 6.2832, count:  8}
]