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>
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>