Observable Data Vis Repository
Description: Third-party repository for data visualization products and interactions. Use observablehq to develop a custom data vis product to be used in a lesson.
Type: External Site / Third-party Tool
Keywords: Observable, data vis, d3
Developer notes:
An internet connection is required for interaction display
Usage and Best Practices
To properly embed observable content both on MetEd and in downloaded lessons, use the JavaScript Runtime code generated by Observable. An example is below:
If using the below code, be sure to replace the default values within
{}with the proper observable generated values
<div id="{observable generated id}"></div>
<p>Credit:
<a href="{observable interaction url}" target="_blank">{interaction name} by {author}</a>
</p>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "{observable api reference}";
new Runtime().module(define, name => {
if (name === "chart") return new Inspector(document.querySelector("#{observable generated id}"));
});
</script>Be sure to include the below css link in both the print.php and page_template.php
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
Examples
Lesson
Link
Understanding NBM v4.0 Snowfall Products
Last updated