CODEWITHSUNDEEP
javascripthtmld3.jssunburst-diagram
Chris
Chris

Reputation: 221

Problem sourcing unipept-visualizations.js

I am trying to reproduce the simple sunburst from this page:-

https://observablehq.com/@unipept/sunburst-example

I created the html below, but for some reason when I run in it in Visual Studio I get:-

Uncaught ReferenceError ReferenceError: Sunburst is not defined

...which I do not quite understand because the Sunburst function is defined in the unipept-visualizations.js file. What could be wrong here?

<!DOCTYPE html>
<html>
<head>
  <title>Sunburst Visualization</title>
</head>
<body>
  <div id="simpleSunburst"></div> 
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/unipept-visualizations@latest/dist/unipept-visualizations.js"></script>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
      const family = {
        "id": 1,
        "name": "John",
        "children": [
        {
        "id": 2,
        "name": "Sarah",
        "children": [
            {
            "id": 11,
            "name": "Lary",
            "children": [
            {
            "id": 15,
            "name": "George",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 2,
            "selfCount": 1
            },
            {
            "id": 12,
            "name": "Susan",
            "children": [
            {
            "id": 13,
            "name": "Martha",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 14,
            "name": "Zack",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 3,
            "selfCount": 1
            }
        ],
        "count": 6,
        "selfCount": 1
        },
        {
        "id": 3,
        "name": "Charles",
        "children": [
            {
            "id": 5,
            "name": "Rick",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
        ],
        "count": 2,
        "selfCount": 1
        },
        {
        "id": 4,
        "name": "Janet",
        "children": [
            {
            "id": 6,
            "name": "Aaron",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 7,
            "name": "Kim",
            "children": [
            {
            "id": 8,
            "name": "Patricia",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 9,
            "name": "Jack",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 10,
            "name": "Thomas",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 4,
            "selfCount": 1
            }
        ],
        "count": 6,
        "selfCount": 1
        }
        ],
        "count": 15,
        "selfCount": 1
        };
      const simpleSunburst = document.getElementById("simpleSunburst");
      new Sunburst(simpleSunburst, family);
    });
  </script>
</body>
</html>

Upvotes: 1

Views: 35

Answers (1)

Frenchy
Frenchy

Reputation: 17037

use new UnipeptVisualizations.Sunburst(simpleSunburst, family);

<!DOCTYPE html>
<html>
<head>
  <title>Sunburst Visualization</title>
</head>
<body>
  <div id="simpleSunburst"></div> 
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/unipept-visualizations@latest/dist/unipept-visualizations.js"></script>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
      const family = {
        "id": 1,
        "name": "John",
        "children": [
        {
        "id": 2,
        "name": "Sarah",
        "children": [
            {
            "id": 11,
            "name": "Lary",
            "children": [
            {
            "id": 15,
            "name": "George",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 2,
            "selfCount": 1
            },
            {
            "id": 12,
            "name": "Susan",
            "children": [
            {
            "id": 13,
            "name": "Martha",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 14,
            "name": "Zack",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 3,
            "selfCount": 1
            }
        ],
        "count": 6,
        "selfCount": 1
        },
        {
        "id": 3,
        "name": "Charles",
        "children": [
            {
            "id": 5,
            "name": "Rick",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
        ],
        "count": 2,
        "selfCount": 1
        },
        {
        "id": 4,
        "name": "Janet",
        "children": [
            {
            "id": 6,
            "name": "Aaron",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 7,
            "name": "Kim",
            "children": [
            {
            "id": 8,
            "name": "Patricia",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 9,
            "name": "Jack",
            "children": [],
            "count": 1,
            "selfCount": 1
            },
            {
            "id": 10,
            "name": "Thomas",
            "children": [],
            "count": 1,
            "selfCount": 1
            }
            ],
            "count": 4,
            "selfCount": 1
            }
        ],
        "count": 6,
        "selfCount": 1
        }
        ],
        "count": 15,
        "selfCount": 1
        };
      const simpleSunburst = document.getElementById("simpleSunburst");
      new  UnipeptVisualizations.Sunburst(simpleSunburst, family);
    });
  </script>
</body>
</html>

Upvotes: 1

Related Questions