using GraphicWalker in VanillaJS
The following is an example of using GraphicWalker in Vanilla JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Graphic Walker</title>
</head>
<body>
<div id="container"></div>
<script type="module">
import { embedGraphicWalker } from 'https://cdn.jsdelivr.net/npm/@kanaries/graphic-walker@0.4.61/+esm'
const data = [
{
id: "1",
label: "Node 1",
x: 0,
y: 0,
},
{
id: "2",
label: "Node 2",
x: 100,
y: 0,
},
{
id: "3",
label: "Node 3",
x: 50,
y: 100,
},
];
const fields = [
{
fid: "id",
semanticType: "nominal",
analyticType: "dimension",
},
{
fid: "label",
semanticType: "nominal",
analyticType: "dimension",
},
{
fid: "x",
semanticType: "quantitative",
analyticType: "measure",
},
{
fid: "y",
semanticType: "quantitative",
analyticType: "measure",
},
];
const props = {
data,
fields,
};
embedGraphicWalker(document.getElementById("container"), props);
</script>
</body>
</html>