GraphXR API
Intro

Intro to GraphXR API

GraphXR API is a JavaScript library for GraphXR. If you can do it in the GUI, you can do it with the API.

See the reference for examples.

Usage

There are a few ways to use GraphXR API.

1. In Grove

📽️ 1m tutorial: Hello, Grove (opens in a new tab)

  1. In a GraphXR project, open the Grove extension
  2. Create a new Grovebook
  3. Start editing 🎉. You can use the synchronous API: gxr. i.e. as opposed to await gxr()

2. With the iframe adapter

  1. Create a new HTML file
  2. Add the following code to the file
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe
      id="graphxr-iframe"
      src="https://graphxrdev.kineviz.com/share/644c12bcac86dc2e336edd4f/codesandbox/644c12c6ac86dc2e336edda0/23-04-28-14-39"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <script type="module">
      import gxr from "https://cdn.skypack.dev/@kineviz/graphxr-api-iframe";
 
      document
        .getElementById("graphxr-iframe")
        .addEventListener("load", async () => {
          // Wait a few seconds for GraphXR to load.
          console.log("Loading GraphXR...");
          setTimeout(async () => {
            console.log("GraphXR loaded!")
            await gxr().graph().generate().sleep(3000).forceLayout();
            console.log("Done!");
          }, 3000);
        });
    </script>
  </body>
</html>

The pattern to use graphxr-api-iframe is await gxr() and then chain the API functions to that.

Check out concepts, snippets, and the reference.

3. On ObservableHQ, with the iframe adapter

See this example (opens in a new tab).

Example of the GraphXR API iframe adapter

GraphXR APIConcepts