diff --git a/homepage/guide_plotly_interactivity.html b/homepage/guide_plotly_interactivity.html new file mode 100644 index 0000000..dca2e99 --- /dev/null +++ b/homepage/guide_plotly_interactivity.html @@ -0,0 +1,123 @@ + + + + + + + + + Neural Activity Visualizer - Guide - Plotly Interactivity + + + + + + + + + +
+

+
+ + + + + + +
EBRAINS logo
+
+
Neural Activity Visualizer
+
+ +
Quick overview of visualizer interactivity features
+ +
+ The visualizer offers various interactive features for exploring the data, courtesy of the underlying plotly.js library. These are briefly presented in this guide with examples. +
+
+ +
1: Download plot as a png
+
+ This allows you to download the current plot as a png file. This is useful for saving the plot for later use or for sharing it with others. + Download plot +
+
+ +
2: Zoom (select region of interest)
+
+ This allows you to zoom in on a specific region of the plot. You can do this by clicking and dragging the mouse over the region of interest. To reset the plot to its original view, double-click on the plot. + Zoom region +
+
+ +
3: Pan
+
+ This allows you to pan the plot in any direction. You can do this by clicking and dragging the mouse over the plot. To reset the plot to its original view, double-click on the plot. + Pan plot +
+
+ +
4, 5: Zoom in / Zoom out
+
+ This allows you to zoom in or out on the plot. You can do this by using the mouse scroll wheel. To reset the plot to its original view, double-click on the plot. + Zoom_in_out +
+
+ +
6: Autoscale
+
+ This allows you to autoscale the plot. This is useful for resetting the plot to its original view after zooming or panning. + Autoscale plot +
+
+ +
7: Reset axes
+
+ This allows you to reset the axes of the plot. Similar to autoscale seen above, this is useful for resetting the plot to its original view after zooming or panning. The difference between this and autoscale is that autoscale resets the entire plot, while reset axes only resets the axes. + Reset plot +
+
+ +
8: Toggle Spike Lines
+
+ This allows you to toggle spike lines on and off. This is useful for visualizing the data in a different way. Spike lines refer to the vertical and horizontal lines that appear when you hover over a data point. + Toggle spike lines +
+
+ +
9, 10: Show closest data on hover / Compare data on hover
+
+ This allows you to show the closest data point on hover and compare data points on hover. This is useful for visualizing the data values in a different way. You can do this by hovering over the data points on the plot. + Download plot +
+
+ +

+ +
+
+
+
+
+
+
+
+
+
+

This project has received funding from the European + Union’s + Horizon 2020 Framework Programme for Research and Innovation under the Specific Grant Agreements No. + 785907 and + No. 945539 (Human Brain Project SGA2 and SGA3).

+

If you encounter any problems, please let us know.

+
+
+ + + diff --git a/homepage/imgs/screenshots/plotly_demo/img_09_labels.gif b/homepage/imgs/screenshots/plotly_demo/img_09_10_labels.gif similarity index 100% rename from homepage/imgs/screenshots/plotly_demo/img_09_labels.gif rename to homepage/imgs/screenshots/plotly_demo/img_09_10_labels.gif