This visualization adds simple HTML controls
This visualization can be edited in MaV here: https://cns-iu.github.io/make-a-vis/?share=a21ae4ec86b3b58
More mav-embed examples are at https://bl.ocks.org/bherr2.
license: MIT | |
height: 500 | |
scrolling: no | |
border: yes |
This visualization adds simple HTML controls
This visualization can be edited in MaV here: https://cns-iu.github.io/make-a-vis/?share=a21ae4ec86b3b58
More mav-embed examples are at https://bl.ocks.org/bherr2.
<!doctype html> | |
<html lang="en"> | |
<!-- The containing element must have a non-percentage height --> | |
<body style="height: calc(100vh - 50px)"> | |
<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 --> | |
<mav-visualization project="#proj1" index="2"></mav-visualization> | |
<!-- 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); | |
} | |
</script> | |
</body> | |
</html> |