Issue Loading JSON Data Into Pie Chart

Hello, I am having an issue getting my data properly loaded into a pie chart. I am wondering if someone in the community can help me.

I am using this JSON data, a sample of 255 entries:

[
    {
        "SPECIES": "WHITE TAILED TROPIC",
        "COUNT": 5920
    },
    {
        "SPECIES": "TRUMPTER SWAN",
        "COUNT": 10512
    },
    {
        "SPECIES": "CASPIAN TERN",
        "COUNT": 1556
    },
    {
        "SPECIES": "SAND MARTIN",
        "COUNT": 4087
    },
    {
        "SPECIES": "COCKATOO",
        "COUNT": 10310
    },

On this HTML page:

<html>
    <head>
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename='javascript/billboard.css') }}">
        <script src="{{ url_for('static', filename='javascript/billboard.js') }}"></script>
        <script src="{{ url_for('static', filename='javascript/main.js') }}"></script>
    </head>
    <body>
        <div id="chart"></div>
        <script>
const jsonfile = JSON.parse({{json_file|tojson}});

var jsonData = jsonfile;

var data = {};
var sites = [];
jsonData.forEach(function(e) {
    var elem = [e.SPECIES];
    elem.push(e.COUNT);
    sites.push(elem);
})

console.log(sites);

chart = bb.generate({
    data: {
        columns:sites,
        type:'pie'
    },
});

        </script>
    </body>
</html>`

Giving me this result:

https://imgur.com/a/XJRKoxS

Could someone direct me as to what exactly is going wrong with the lack of rendering the pie chart?

naver / billboard.js

Issue Loading JSON Data Into Pie Chart #2618