Vanilla JS Embedding

Graphic Walker provides embed* functions that let you use all components without writing React code. These functions render components into a DOM element directly.

import {
  embedGraphicWalker,
  embedGraphicRenderer,
  embedPureRenderer,
  embedTableWalker,
} from '@kanaries/graphic-walker';

Functions

embedGraphicWalker

Renders a full GraphicWalker instance into a DOM element.

embedGraphicWalker(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps | IGWProps): void

If you pass data and fields, it renders in data-bound mode. If you pass no data props, it renders with a built-in data source manager where users can upload CSV files.

embedGraphicRenderer

Renders a GraphicRenderer instance.

embedGraphicRenderer(element: HTMLElement, props?: ILocalVizAppProps | IRemoteVizAppProps): void

embedPureRenderer

Renders a PureRenderer instance.

embedPureRenderer(element: HTMLElement, props: ILocalPureRendererProps | IRemotePureRendererProps): void

embedTableWalker

Renders a TableWalker instance.

embedTableWalker(element: HTMLElement, props?: ILocalTableProps | IRemoteTableProps): void

Usage with Bundlers

import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const data = [
  { city: 'New York', population: 8336817, area: 302.6 },
  { city: 'Los Angeles', population: 3979576, area: 468.7 },
  { city: 'Chicago', population: 2693976, area: 227.3 },
];
 
const fields = [
  { fid: 'city', name: 'City', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'population', name: 'Population', semanticType: 'quantitative', analyticType: 'measure' },
  { fid: 'area', name: 'Area (sq mi)', semanticType: 'quantitative', analyticType: 'measure' },
];
 
embedGraphicWalker(document.getElementById('app'), {
  data,
  fields,
  appearance: 'media',
});

Usage via CDN

You can load Graphic Walker via a CDN for quick prototypes or static pages. Use the UMD build:

<!DOCTYPE html>
<html>
<head>
  <title>Graphic Walker</title>
  <script src="https://unpkg.com/@kanaries/graphic-walker/dist/umd/graphic-walker.umd.js"></script>
</head>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
  <script>
    const data = [
      { product: 'Widget', q1: 100, q2: 150, q3: 130, q4: 200 },
      { product: 'Gadget', q1: 200, q2: 180, q3: 220, q4: 250 },
    ];
 
    const fields = [
      { fid: 'product', name: 'Product', semanticType: 'nominal', analyticType: 'dimension' },
      { fid: 'q1', name: 'Q1 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q2', name: 'Q2 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q3', name: 'Q3 Sales', semanticType: 'quantitative', analyticType: 'measure' },
      { fid: 'q4', name: 'Q4 Sales', semanticType: 'quantitative', analyticType: 'measure' },
    ];
 
    GraphicWalker.embedGraphicWalker(document.getElementById('app'), {
      data,
      fields,
    });
  </script>
</body>
</html>

Without Data (File Upload Mode)

If you call embedGraphicWalker without data or fields, it renders the full experience with a built-in data source manager. Users can upload CSV files, manage datasets, and create visualizations.

embedGraphicWalker(document.getElementById('app'));

Framework Integration Notes

These embed functions work with any framework — Vue, Svelte, Angular, or plain HTML. Mount them in a lifecycle hook:

Vue 3:

<template>
  <div ref="gwContainer" style="width: 100%; height: 600px" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
const gwContainer = ref(null);
 
onMounted(() => {
  embedGraphicWalker(gwContainer.value, { data, fields });
});
</script>

Svelte:

<script>
  import { onMount } from 'svelte';
  import { embedGraphicWalker } from '@kanaries/graphic-walker';
 
  let container;
 
  onMount(() => {
    embedGraphicWalker(container, { data, fields });
  });
</script>
 
<div bind:this={container} style="width: 100%; height: 600px;" />