storage-sunburst / index.html
Saba Noorassa
explain interactivity support
6644ddd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Xet Storage Sunburst</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-scale.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-hierarchy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-shape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-format.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-scale-chromatic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-interpolate.min.js"></script>
<script defer src="sunburst.js"></script>
</head>
<body>
<div id="content">
<h1>&#9728;&#65039; Xet Storage Sunburst &#9728;&#65039;</h1>
<p>
This sunburst diagram represents all public data stored using Xet.
</p>
<p>
The diagram presents this information hierarchically first by repo type
(model, dataset, or space) then owner (user or org), repo name, and
finally individual files within the repo backed by Xet.
</p>
<p>Click a node to zoom in, or the center to zoom out.</p>
<svg id="sunburst"></svg>
</div>
</body>
</html>