AngularJS Component

The visualizer-view component requires a source attribute (URL of the data file). Optional: height, downsamplefactor, and iotype. Uses the Neo Viewer REST API.

Example Usage

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-resource.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.51.1/plotly.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/NeuralEnsemble/neo-viewer@master/js/angularjs/src/visualizer.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/NeuralEnsemble/neo-viewer@master/js/angularjs/src/services.js"></script>
</head>
<body>
    <div class="container">
        <div class="row" ng-app="neo-visualizer">
            <visualizer-view
                source="https://data-proxy.ebrains.eu/..."
                height=300>
            </visualizer-view>
        </div>
    </div>
</body>

Example With Spike Trains

Example With Dynamic Source

You can input a custom data file URL below.

<div ng-controller="URLFormController">
    <form class="form-inline">
        <div class="form-group">
            <label for="dataFileURL">URL of data file:</label>
            <input type="text" class="form-control" ng-model="dataFileURL"
                   id="dataFileURL" placeholder="enter data file URL here"
                   style="width: 600px;">
        </div>
    </form>
    <visualizer-view ng-if="dataFileURL"
        source="{{dataFileURL}}" height=300>
    </visualizer-view>
</div>

Examples of Multiple File Types

NeoViewer supports a variety of file types. The dropdown below provides examples.