search
Process Docs
githubEdit

Observable Data Vis Repository

www.observablehq.com ↗arrow-up-right

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

circle-info

Requirements:

  • Observable account

circle-exclamation

Developer notes:

  • An internet connection is required for interaction display

hashtag
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>

hashtag
Examples

Lesson
Link

Understanding NBM v4.0 Snowfall Products

See on deved →arrow-up-right

PreviousEdPuzzle - Interactive VideosNextSketchfab 3D Model Viewer

Last updated