bherr2/.block

## .block
license: MIT
height: 960
scrolling: no
border: yes

## README.md

      
    Raw
  

              README.md
            
          
    Embedding visualizations with mav-embed

Four NetSci Researchers

This visualization adds a horizontal legend on the bottom
Make your own in MaV!

This visualization can be edited in MaV here: https://cns-iu.github.io/make-a-vis/?share=a21ae4ec86b3b58
More Examples

More mav-embed examples are at https://bl.ocks.org/bherr2.

  
## index.html
<!doctype html>
<html lang="en">

<!-- The containing element must have a non-percentage height -->
<body>
  <div style="height: 50px">
    <button onclick="setVisualization(0)">Scatter Plot</button>
    <button onclick="setVisualization(1)">Geographic Map</button>
    <button onclick="setVisualization(2)">Map of Science</button>
    <button onclick="setVisualization(3)">Co-author Network</button>
  </div>

  <!-- Add a project -->
  <mav-project id="proj1" href="https://gist.githubusercontent.com/bherr2/2e3e6c999575fe0fcd6cfaab42020e1b/raw/FourNetSciResearchers.yml"></mav-project>

  <!-- Add a visualization referencing the project -->
  <div style="height: calc(100vh - 345px);">
    <mav-visualization project="#proj1"></mav-visualization>
  </div>
  <div style="overflow-x: scroll">
    <mav-legend project="#proj1" orientation="horizontal"></mav-legend>
  </div>

  <!-- 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>
  <script>
    function setVisualization(index) {
      document.getElementsByTagName('mav-visualization')[0].setAttribute('index', index);
      document.getElementsByTagName('mav-legend')[0].setAttribute('index', index);
    }
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">

	<!-- The containing element must have a non-percentage height -->
	<body>
	<div style="height: 50px">
	<button onclick="setVisualization(0)">Scatter Plot</button>
	<button onclick="setVisualization(1)">Geographic Map</button>
	<button onclick="setVisualization(2)">Map of Science</button>
	<button onclick="setVisualization(3)">Co-author Network</button>
	</div>

	<!-- Add a project -->
	<mav-project id="proj1" href="https://gist.githubusercontent.com/bherr2/2e3e6c999575fe0fcd6cfaab42020e1b/raw/FourNetSciResearchers.yml"></mav-project>

	<!-- Add a visualization referencing the project -->
	<div style="height: calc(100vh - 345px);">
	<mav-visualization project="#proj1"></mav-visualization>
	</div>
	<div style="overflow-x: scroll">
	<mav-legend project="#proj1" orientation="horizontal"></mav-legend>
	</div>

	<!-- 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>
	<script>
	function setVisualization(index) {
	document.getElementsByTagName('mav-visualization')[0].setAttribute('index', index);
	document.getElementsByTagName('mav-legend')[0].setAttribute('index', index);
	}
	</script>
	</body>
	</html>