<script> TagsThe most basic way to use Olli is to add it to any HTML page.
Full HTML example with CodePen
1. Add script tags inside the document <head>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/olli@2"></script>
<script src="https://cdn.jsdelivr.net/npm/olli-adapters@2"></script>
</head>
2. Add container divs in the document <body>
<body>
<div id="vega-container"></div>
<div id="olli-container"></div>
</body>
3. In a <script> tag, render the visualization and call Olli
<script>
// vega-lite spec of an example bar chart
const vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{ "a": "A", "b": 28 }, { "a": "B", "b": 55 }, { "a": "C", "b": 43 },
{ "a": "D", "b": 91 }, { "a": "E", "b": 81 }, { "a": "F", "b": 53 },
{ "a": "G", "b": 19 }, { "a": "H", "b": 87 }
]
},
"mark": "bar",
"encoding": {
"x": { "field": "a", "type": "nominal", "axis": { "labelAngle": 0 } },
"y": { "field": "b", "type": "quantitative" }
}
}
// code to render the vega-lite chart
const vegaSpec = vegaLite.compile(vlSpec).spec;
const runtime = vega.parse(vegaSpec);
const vegaContainer = document.getElementById('vega-container');
const view = new vega.View(runtime)
.logLevel(vega.Warn)
.initialize(vegaContainer)
.renderer('svg')
.hover()
.run();
// code to render the olli treeview
OlliAdapters.VegaLiteAdapter(vlSpec).then(olliVisSpec => {
const olliRender = olli(olliVisSpec);
document.getElementById("olli-container").append(olliRender);
})
</script>
Olli can also be easily included in JavaScript applications using NPM, a popular package manager.
1. Install the olli packages from npm
npm install olli olli-adapters
2. Import olli and the adapter for your visualization library
// olli imports
import { olli } from 'olli'
import { VegaLiteAdapter } from 'olli-adapters' // Or VegaAdapter, or ObservableAdapter
// vega-lite imports
import * as vega from "vega";
import * as vegaLite from "vega-lite";
3. Add container divs for the visualization and Olli output
<div id="vega-container"></div>
<div id="olli-container"></div>
4. Render the visualization
// vega-lite spec of an example bar chart
const vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{ "a": "A", "b": 28 }, { "a": "B", "b": 55 }, { "a": "C", "b": 43 },
{ "a": "D", "b": 91 }, { "a": "E", "b": 81 }, { "a": "F", "b": 53 },
{ "a": "G", "b": 19 }, { "a": "H", "b": 87 }
]
},
"mark": "bar",
"encoding": {
"x": { "field": "a", "type": "nominal", "axis": { "labelAngle": 0 } },
"y": { "field": "b", "type": "quantitative" }
}
}
// code to render the vega-lite chart
const vegaSpec = vegaLite.compile(vlSpec).spec;
const runtime = vega.parse(vegaSpec);
const vegaContainer = document.getElementById('vega-container');
const view = new vega.View(runtime)
.logLevel(vega.Warn)
.initialize(vegaContainer)
.renderer('svg')
.hover()
.run();
5. Call olli and render the output treeview
// code to render the olli treeview
VegaLiteAdapter(vlSpec).then(olliVisSpec => {
const olliRender = olli(olliVisSpec);
document.getElementById("olli-container").append(olliRender);
})
Olli can be embedded in an Observable Notebook.
Please refer to this example notebook contributed by Philippe Rivière.
1. Imports
Olli = require("olli@2", "olli-adapters@2")
Plot = require("@observablehq/plot@0.6")
2. Spec
spec = ({
marginLeft: 120,
marginRight: 90,
grid: true,
color: { type: "ordinal", scheme: "category10", legend: true },
x: { nice: true, grid: true },
y: { grid: true },
facet: { data, y: "site", marginRight: 90 },
marks: [Plot.dot(data, { x: "yield", y: "variety", fill: "year" })]
})
3. Render
Olli.ObservablePlotAdapter(spec).then(Olli.olli)
While Olli ships with support for Vega, Vega-Lite, and Observable Plot, it is designed to be extended with new adapters. If you would like Olli to support visualizations created in another toolkit, please see the contributing guide on Github for more information on how to contribute to the Olli open source project.