Attention: The Collaboratory IAM will down for up to 1 hour on Monday, the 7th of July 2025 starting from 5pm CEST (my timezone) for up to 1 hour. Any and all services, which require a user login with an EBRAINS account, will be un-available during that time


Changes for page Widget TimeSeries

Last modified by ldomide on 2023/05/23 14:34
From version 39.1
edited by rominabaila
on 2023/05/15 14:16
Change comment: There is no comment for this version
To version 33.1
edited by rominabaila
on 2023/05/15 11:06
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -6,13 +6,13 @@
6 6  
7 7  == Purpose ==
8 8  
9 -It is a JupyterLab Widget intended for the visualization of brain signals represented as time series.
9 +It is a Jupyter 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, second one using the plotly backend).
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).
16 16  
17 17  (% style="text-align:center" %)
18 18  [[image:matplotlib.png]]
... ... @@ -75,93 +75,29 @@
75 75  %matplotlib widget
76 76  )))
77 77  
78 -Then, simply import the **plot_timeseries** method, which gives you access to the TS widget:
78 + Then, the **TimeSeriesWidget** (from the tvb-widgets API) and the **//display//** function should be imported:
79 79  
80 80  (% class="box" %)
81 81  (((
82 -from tvbwidgets.api import plot_timeseries
82 +from tvbwidgets.api import TimeSeriesWidget
83 +from IPython.core.display_functions import display
83 83  )))
84 84  
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):
85 85  
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 -backend = 'plotly' # change to 'matplotlib' to see the other TS widget
91 -
92 -plot_timeseries(data=tsr, backend=backend)
90 +tsw = TimeSeriesWidget()
91 +tsw.add_datatype(tsr)
93 93  )))
94 94  
95 -After running the code from above into a Jupyter cell, you should see the TS widget corresponding to the backend you selected.
94 +Finally, to display and interact with the TimeSeries widget, the **//get_widget//**// //method is used inside the //**display **//function:
96 96  
97 -== 1. TS Widget with matplotlib and mne ==
96 +(% class="box" %)
97 +(((
98 +display(tsw)
99 +)))
98 98  
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/hozEkVhkWeA" 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/VmueiXMxbVk" 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 -
120 -{{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}}
121 -
122 -
123 -== 2. TS Widget with plotly ==
124 -
125 -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.
126 -
127 -=== 2.1. Moving through the timeline and channels list ===
128 -
129 -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.
130 -
131 -{{html}}
132 -<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>
133 -{{/html}}
134 -
135 -=== 2.2. Modify spacing between channels ===
136 -
137 -
138 -{{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}}
139 -
140 -
141 -== 2. TS Widget with plotly ==
142 -
143 -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.
144 -
145 -=== 2.1. Moving through the timeline and channels list ===
146 -
147 -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.
148 -
149 -{{html}}
150 -<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>
151 -{{/html}}
152 -
153 -== 2. TS Widget with plotly ==
154 -
155 -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.
156 -
157 -=== 2.1. Moving through the timeline and channels list ===
158 -
159 -{{html}}
160 -<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>
161 -{{/html}}
162 -
163 -== 2. TS Widget with plotly ==
164 -
165 -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.
166 -
167 -=== 2.1. Moving through the timeline and channels list ===
Public

TVB Widgets