Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/.block

Created June 15, 2020 15:54
Show Gist options
  • Save domoritz/13400bd2640951de1efc0336fce821d3 to your computer and use it in GitHub Desktop.
Save domoritz/13400bd2640951de1efc0336fce821d3 to your computer and use it in GitHub Desktop.
Download ZIP
Altair container
Raw
.block
license: mit
Raw
index.html
<html>
<head></head>
<body>
<div style='width: 500px'>
<div class="vega-visualization" id="vega-visualization-36f8506c40344d4ab8b75d9aa1f239bf"></div>
<script type="text/javascript">
(function (spec, embedOpt) {
let outputDiv = document.currentScript.previousElementSibling;
if (outputDiv.id !== "vega-visualization-36f8506c40344d4ab8b75d9aa1f239bf") {
outputDiv = document.getElementById("vega-visualization-36f8506c40344d4ab8b75d9aa1f239bf");
}
const paths = {
"vega": "https://cdn.jsdelivr.net/npm/vega@5?noext",
"vega-lite": "https://cdn.jsdelivr.net/npm/[email protected]?noext",
"vega-embed": "https://cdn.jsdelivr.net/npm/vega-embed@6?noext",
};
function loadScript(lib) {
return new Promise(function (resolve, reject) {
var s = document.createElement('script');
s.src = paths[lib];
s.async = true;
s.onload = () => resolve(paths[lib]);
s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
document.getElementsByTagName("head")[0].appendChild(s);
});
}
function showError(err) {
outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
throw err;
}
function displayChart(vegaEmbed) {
vegaEmbed(outputDiv, spec, embedOpt)
.catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
}
if (typeof define === "function" && define.amd) {
requirejs.config({ paths });
require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
} else if (typeof vegaEmbed === "function") {
displayChart(vegaEmbed);
} else {
loadScript("vega")
.then(() => loadScript("vega-lite"))
.then(() => loadScript("vega-embed"))
.catch(showError)
.then(() => displayChart(vegaEmbed));
}
})({
"config": { "view": { "continuousWidth": 400, "continuousHeight": 300 } },
"data": { "name": "data-e9c633d3418a3d0f19bcd57e1b4294b3" },
"mark": "line",
"encoding":
{
"color": { "type": "nominal", "field": "category" },
"x": { "type": "quantitative", "field": "x" },
"y": { "type": "quantitative", "field": "y" }
},
"width": "container",
"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
"datasets": {
"data-e9c633d3418a3d0f19bcd57e1b4294b3":
[{ "x": 0, "y": 6, "category": "A" },
{ "x": 1, "y": 5, "category": "B" },
{ "x": 2, "y": 4, "category": "A" },
{ "x": 3, "y": 3, "category": "B" },
{ "x": 4, "y": 2, "category": "A" },
{ "x": 5, "y": 1, "category": "B" }]
}
},
{});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment