ui-lifeview v1.0.1
ui-lifeview
UI to visualize the output from app-life
Install
Install for general purpose use
npm install ui-lifeview
Include script dependencies in your index.html file:
<!-- Dep Scripts -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/three/build/three.min.js"></script>
<script type="text/javascript" src="node_modules/panning-orbit-controls/dist/panning-orbit-controls.js">
<!-- Main Scripts -->
<script type="text/javascript" src="node_modules/ui-lifeview/js/lifeview.js"></script>
<!-- Dep Styles -->
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
Include your main.js file inside index.html:
<script type="text/javascript" src="js/main.js"></script>
Create an element to append lifeview controls to:
<div id='lifeview' style='position:relative; width:100vw; height: 100vh;'></div>
An explicit width/height for this element is not required, notice that above we just set it to the full window width/height.
Inside main.js, on window load, init the life viewer:
$(function(){
LifeView.init({
selector: '#lifeview',
num_buckets: 10,
url: 'path/to/json/file'
});
});
selector
represents the query selector for the element that will contain the life viewer.
num_buckets
is the number of buckets to aggregate tracts into as to determine their relative
url
represents the url which links to the json file containing your tracts and weights. The json file should have the following format:
{
"name": "subsampled (x10) pos. weighted life output",
"coords": [ // list of tracts
[
[-21.69491386, -21.64446831, -21.4675293, ...], // list of x coordinates
[43.13895035, 42.14380264, 41.15979385, ...], // list of y coordinates
[1.224040627, 1.165375113, 1.165637732, ...] // list of z coordinates
],
[
...
],
...
],
"weights": [
[0.00373989572],
[0.002710784088],
[0.02659222749],
[0.01242249065],
...
]
...
}