Embedding pgVis Renderer

To render a pgVis visualisation in your website, you need to include the pgVis stylesheet and renderer JS library.

Minimal HTML page:

<html>
    <head>
        <!-- The pgVis main stylesheet -->
        <link rel="stylesheet" type="text/css" href="https://pgvis.org/latest/pgvis-renderer/pgvis.css" />
        <!-- The pgVis renderer-->
        <script src="https://pgvis.org/latest/pgvis-renderer/pgvis-renderer.umd.min.js"></script>
    </head>
    <body>
        <!-- The container that the pgVis visualisation will be rendered into -->
        <div id="pgvis"></div>
        <!-- Call pgVis to render -->
        <script>
            /* Your pgVis definition */
            var def = {...};
            /* Render it */
            pgVis(def, { "container": "pgvis" });
        </script>
    </body>
</html>

The pgvis-renderer library exports one function:

function pgVis(/* Object */ definition, /* Object */ options)

The definition argument is the pgVis visualisation definition which is generated from the pgVis PostgreSQL extension.
The options argument is a plain Javascript object which passes rendering options to the pgVis renderer, options passed at this level will override options defined in the visualisation.

Options include:

container the id of the HTML (div) element which the visualisation will be rendered into, this defaults to pgvis .
header a boolean value, if true then display the visualisation header, defaults to true.
footer a boolean value, if true then display the visualisation footer, defaults to true.
updatePageTitle a boolean value, if true then update the page title to append the visualisation title, defaults to false.

Using pgvis-renderer Directly

You can import the pgvis-renderer directly as an ES6 module and call it from within your Javascript application.

I'm aiming to publish the library on NPM in the near future.