@dvl-fw/mav-embed

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

Usage no npm install needed!

<script type="module">
  import dvlFwMavEmbed from 'https://cdn.skypack.dev/@dvl-fw/mav-embed';
</script>

README

mav-embed

NPM Version Shipping faster with ZenHub Build Status GitHub last commit license View Demo Quality Gate Status Documentation Status

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>

Embedded using bl.ocks.org

See https://bl.ocks.org/bherr2/2e3e6c999575fe0fcd6cfaab42020e1b. More examples: https://bl.ocks.org/bherr2

Credits

Make-a-Vis is developed at the Cyberinfrastructure for Network Science Center at Indiana University