Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -6,13 +6,13 @@
6	6
7	7	== Purpose ==
8	8
9		-It is a Jupyter Widget intended for the visualization of brain signals represented as time series.
	9	+It is a JupyterLab Widget intended for the visualization of brain signals represented as time series.
10	10
11	11	== Backends ==
12	12
13	13	Starting with //**tvb-widgets 1.5.0**, //the TS widget comes in 2 forms, corresponding to the 2 different libraries (we called them backends) used for plotting: **matplotlib **and **plotly**. The matplotlib backend, build on top of the **mne** library, offers more advanced scientifical features, while the plotly backend has a more appealing look and moves faster when talking about the basic interactions.
14	14
15		-Below you can see the TS widget with each backend option (first one using the matplotlib backend, the second one using the plotly backend).
	15	+Below you can see the TS widget with each backend option (first one using the matplotlib backend, second one using the plotly backend).
16	16
17	17	(% style="text-align:center" %)
18	18	[[image:matplotlib.png]]
...	...	@@ -75,29 +75,48 @@
75	75	%matplotlib widget
76	76	)))
77	77
78		- Then, the **TimeSeriesWidget** (from the tvb-widgets API) and the **//display//** function should be imported:
	78	+Then, simply import the **plot_timeseries** method, which gives you access to the TS widget:
79	79
80	80	(% class="box" %)
81	81	(((
82		-from tvbwidgets.api import TimeSeriesWidget
83		-from IPython.core.display_functions import display
	82	+from tvbwidgets.api import plot_timeseries
84	84	)))
85	85
86		-Assuming that the user has already created or imported a valid input, this is how the widget can be initialized and how an input can be assigned to it, using the //**add_datatype** //method (example below assumes that **//tsr//  **is a TVB TimeSeries datatype):
87	87
	86	+Assuming that the user has already created or imported a valid input, this is how the widget can be initialized and displayed (example below assumes that **tsr  **is a TVB TimeSeries datatype):
	87	+
88	88	(% class="box" %)
89	89	(((
90		-tsw = TimeSeriesWidget()
91		-tsw.add_datatype(tsr)
	90	+backend = 'plotly' # change to 'matplotlib' to see the other TS widget
	91	+
	92	+plot_timeseries(data=tsr, backend=backend)
92	92	)))
93	93
94		-Finally, to display and interact with the TimeSeries widget, the **//get_widget//**// //method is used inside the //**display **//function:
	95	+After running the code from above into a Jupyter cell, you should see the TS widget corresponding to the backend you selected.
95	95
96		-(% class="box" %)
97		-(((
98		-display(tsw)
99		-)))
	97	+== 1. TS Widget with matplotlib and mne ==
100	100
	99	+As it was already mentioned, the matplotlib widget offers more advanced scientifical fearures. In the video below, you can see some of the functionalities that this backend provides, like: increasing/decreasing signal amplitude, selecting/deselecting certain signals, selecting different dimensions (state variable/mode) from the input data, navigating through the timeline, etc.
	100	+
101	101	{{html}}
102		-<iframe width="840" height="480" src="https://www.youtube.com/embed/VmueiXMxbVk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	102	+<iframe width="840" height="480" src="https://www.youtube.com/embed/hozEkVhkWeA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
103	103	{{/html}}
	104	+
	105	+== 2. TS Widget with plotly ==
	106	+
	107	+Starting with //**tvb-widgets version 1.5.0**//, we introduced a second TS Widget, which uses the **plotly.py** library to create the interactive plot. Below you can watch small tutorials on how to use and interact with this widget.
	108	+
	109	+=== 2.1. Moving through the timeline and channels list ===
	110	+
	111	+To move through the timeline or channels list, go to your cursor over the X (for timeline) and Y (for channels) axes and drag it to navigate.
	112	+
	113	+{{html}}
	114	+<iframe width="840" height="480" src="https://www.youtube.com/embed/nZYZxHui-Ao" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
	115	+{{/html}}
	116	+
	117	+=== 2.2. Modify spacing between channels ===
	118	+
	119	+To modify the spacing between the channels, go with your cursor over the beginning/end of the Y axis (where the channels list is) and drag it to the outside of the plot area. To decrease the spacing, drag your cursor to the inside of the plot area. To reset the spacing to the default values, click on the 'Reset axes' button (Home icon) from the plotly tools area.
	120	+
	121	+{{html}}<iframe width="840" height="480" src="https://www.youtube.com/embed/q_olB7uRSc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>{{/html}}
	122	+