Published
Edited
Jan 9, 2019
2 forks
8 stars
brainBrowserHtml = html`
<div class="brainBrowserWrapper" style="width:400px;height:300px" id="brainBrowserWrapper"></div>
<script id="volume-ui-template" type="x-volume-ui-template">
<div class="volume-viewer-display" style="width:${width}px"></div>
</script>
`
BrainBrowserSetup = {
brainBrowserHtml;
BrainBrowser.VolumeViewer.start("brainBrowserWrapper", function(viewer) {
console.log(viewer)
// Add an event listener.
viewer.addEventListener("volumesloaded", function() {
console.log("Viewer is ready!");
});
// Load the default color map.
// (Second argument is the cursor color to use).
viewer.loadDefaultColorMapFromURL('https://brainbrowser.cbrain.mcgill.ca/color_maps/gray_scale.txt', "#FF0000");
// Set the size of slice display panels.
viewer.setPanelSize(256, 256);
// Start rendering.
viewer.render();
// Load volumes.
viewer.loadVolumes({
volumes: [
{
type: "minc",
header_url: "https://brainbrowser.cbrain.mcgill.ca/models/ibis_411025_living_phantom_UNC_SD_HOS_20100112_t1w_004.mnc.header",
raw_data_url: "https://brainbrowser.cbrain.mcgill.ca/models/ibis_411025_living_phantom_UNC_SD_HOS_20100112_t1w_004.mnc.raw",
template: {
element_id: "volume-ui-template",
viewer_insert_class: "volume-viewer-display"
}
}
]
});
})
}
BrainBrowserScript = requireScript('https://brainbrowser.cbrain.mcgill.ca/js/brainbrowser/brainbrowser.volume-viewer.min.js','BrainBrowser')
BrainBrowser = {
BrainBrowserScript;
return window.BrainBrowser;
}
import {requireScript} from "@bumbeishvili/fetcher"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
