@dvl-fw/mav-embed NPM

mav-embed

Web Components for embedding DVL-FW and Make-A-Vis visualizations.

Change Log

See the ChangeLog for the latest developments.

Usage

Basic embedding

<!doctype html>
<html lang="en">

<!-- The containing element must have a non-percentage height -->
<body style="height: 100vh">
  <!-- Add mav-embed javascript bundle -->
  <script src="https://cdn.jsdelivr.net/npm/@dvl-fw/mav-embed/main-es5.js" nomodule></script>
  <script src="https://cdn.jsdelivr.net/npm/@dvl-fw/mav-embed/main-es2015.js" type="module"></script>

  <!-- Add a project -->
  <mav-project id="proj1" href="path/to/project.yml"></mav-project>

  <!-- Add a visualization referencing the project -->
  <mav-visualization project="#proj1" index="0"></mav-visualization>

  <!-- Add a legend for the visualization -->
  <mav-legend project="#proj1" index="0"></mav-legend>
</body>
</html>