tessl/npm-vega-embed

Publish Vega visualizations as embedded web components.

—

Pending

Overview

Eval results

Files

Container Creation

Name: tessl/npm-vega-embed
Author: tessl

Specialized function for creating standalone visualization containers with embedded views. The container function is optimized for Observable and interactive environments where you need a self-contained div element with the visualization.

Capabilities

Container Function

Creates an HTML div element with an embedded Vega-Lite or Vega visualization, with the view accessible as the value property.

/**
 * Create a container div with embedded Vega/Vega-Lite visualization
 * @param spec - Vega/Vega-Lite specification as object or URL string
 * @param opt - Optional configuration options
 * @returns Promise resolving to HTMLDivElement with value property containing the view
 */
function container(
  spec: VisualizationSpec | string,
  opt?: EmbedOptions
): Promise<HTMLDivElement & { value: View }>;

Usage Examples:

import { container } from "vega-embed";

// Create container with default options
const wrapper = await container(spec);
document.body.appendChild(wrapper);

// Access the view through the value property
console.log(wrapper.value); // View instance

// Create container with custom options
const wrapper = await container(spec, {
  actions: { export: true, source: false, compiled: true, editor: true },
  renderer: "svg"
});

Observable Integration

The container function is specifically designed for Observable notebooks where the return value needs to be a DOM element:

// In Observable
viewof myChart = {
  const wrapper = await embed.container(spec, options);
  return wrapper;
}

// Access the view in other cells
myChart // This is the View instance

Default Action Configuration

By default, the container function enables most actions except for the source action, making it suitable for interactive environments:

// Default actions for container function
const defaultActions = {
  export: true,
  source: false,
  compiled: true,
  editor: true
};

Container Structure

The returned container has a specific DOM structure:

<div class="vega-embed-wrapper">
  <div>
    <!-- Vega visualization content -->
  </div>
</div>

Usage Examples:

const wrapper = await container(spec);

// The wrapper has CSS class for styling
console.log(wrapper.classList.contains('vega-embed-wrapper')); // true

// The visualization is in the first child
const vizElement = wrapper.firstElementChild;

// The view is accessible via the value property
const view = wrapper.value;

Differences from Embed Function

Key differences between container and embed:

Return Type: Returns a div element vs Promise<Result>
DOM Integration: Creates its own container vs requiring existing element
Observable Optimized: Designed for notebook environments
Default Actions: Different default action configuration
Value Property: View accessible via .value property

// container() - creates its own element
const wrapper = await container(spec);
document.body.appendChild(wrapper);

// embed() - uses existing element
const result = await embed("#existing-div", spec);

Install with Tessl CLI