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

Requirements:

Observable account

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

PreviousEdPuzzle - Interactive Videos NextSketchfab 3D Model Viewer

Last updated 5 months ago

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

Requirements:

Observable account

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

www.observablehq.com ↗

See on deved →