Graph Animation

To use graph animation, use the “daniel-graph” class name for the parent/container element.

To create a bubble effect, you can adjust the count of bubbles. Refer to the example below:

<div class="daniel-graph" 
     data-daniel-type="graph"
     data-daniel-graph-xcount="25"
     data-daniel-graph-ycount="25"
     data-daniel-graph-radius="4"
     data-daniel-graph-spacing="10"
     data-daniel-graph-fillColor="rgb(120,120,120)">...</div>

Alternatively, if you prefer to create the graph with fixed width and height, you can follow a different approach. Refer to the example below:

 <div class="daniel-graph"
      data-daniel-type="graph"
      data-daniel-graph-radius="5"
      data-daniel-graph-spacing="10"
      data-daniel-graph-width="360"
      data-daniel-graph-height="520"></div>

data-daniel-graph-xcount and data-daniel-graph-ycount

These attributes allow you to control the number of bubbles in the graph. The data-daniel-graph-xcount attribute represents the count of bubbles along the x-axis, while the data-daniel-graph-ycount attribute represents the count of bubbles along the y-axis.

If you are using the data-daniel-graph-width and data-daniel-graph-height attributes to specify a fixed width for the graph, you don’t need to use xcount and ycount. The script will automatically calculate the appropriate number of bubbles based on the chosen width.