Visualizer Integration
How to embed our visualizer in your application.

How to embed the Activeloop visualizer into your own web applications

Visualization engine allows the user to visualize, explore, and interact with Deep Lake datasets. In addition to using through the Activeloop UI or in Python, the Activeloop visualizer can also be embedded into your application.

HTML iframe (Alpha)

To embed into your html page, you can use our iframe integration:
<iframe src="https://app.activeloop.ai/visualizer/iframe?url=hub://activeloop/imagenet-train" width="800px" height="600px">
iframe URL: https://app.activeloop.ai/visualizer/iframe?url=hub://$org/$ds&{checkpoint=$checkpoint}&{vs=$visualizer_state}&{token=$token}
Params:
url - The url of the dataset vs - Visualizer state, which can be obtained from the platform url token - User token, for private datasets. If the value is ask then the UI will be populated for entering the token checkpoint - Dataset checkpoint query - Query string to apply on the dataset

Javascript API (Alpha)

To have more fine grained control, you can embed the visualizer using Javascript:
<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
let container = document.getElementById('container')
window.vis.visualize("hub://activeloop/imagenet-train", null, null, container, null)
</script>
or to visualize private datasets with authentication
<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
let container = document.getElementById('container')
window.vis.visualize("hub://sasun/private", null, null, container, {
requireSignin: true
})
</script>
Interface
Below you can find definitions of the arguments.
static visualize(
ds: string, /// ds - Dataset url
commit: string | null = null, /// commit - optional commit id
state: string | null = null, /// state - optional initial state of the visualizer
container: HTMLElement, /// container - HTML element serving as container for visualizer elements
options: VisOptions | null /// options - optional Visualization optionsavasc
);
export type VisOptions = {
backlink?: Boolean /// backlink - Show backlink to platform button
singleSampleView?: Boolean /// singleSampleView - Enable single sample view through enter key
requireSignin?: Boolean /// requireSignin - Requires signin to get access token
token: string | null /// token - Token id
gridMode?: "canvas" | "grid" /// gridMode - Canvas vs Grid
queryString?: string /// queryString - Query to apply on the iframe
}
Copy link
On this page
How to embed the Activeloop visualizer into your own web applications
HTML iframe (Alpha)
Javascript API (Alpha)