-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathgraph.html
More file actions
326 lines (277 loc) · 21.6 KB
/
Copy pathgraph.html
File metadata and controls
326 lines (277 loc) · 21.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />
<title>Graphing — VPython 3.2 documentation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="_static/alabaster.css" />
<script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/_sphinx_javascript_frameworks_compat.js"></script>
<script src="_static/doctools.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Math Functions and Vectors" href="math.html" />
<link rel="prev" title="Files and Libraries" href="file.html" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
</head><body>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section id="graphing">
<h1>Graphing<a class="headerlink" href="#graphing" title="Permalink to this heading">¶</a></h1>
<a class="reference internal image-reference" href="_images/graph.png"><img alt="_images/graph.png" src="_images/graph.png" style="width: 400px;" /></a>
<p>Graphing in VPython is dynamic and can be done in real time. For example, points can be added to a plot of x vs. t as an object moves. Histogram bars can be adjusted as distributions change.</p>
<section id="terminology">
<h2>Terminology<a class="headerlink" href="#terminology" title="Permalink to this heading">¶</a></h2>
<p>A <strong>graph</strong> is a 2D canvas on which plots of various kinds can be displayed.</p>
<p>A <strong>gcurve</strong> object is a continuous curve connecting data points.</p>
<p>A <strong>gdots</strong> object displays data as discrete points.</p>
<p>A <strong>gvbars</strong> object displays discrete vertical bars, and a <code class="docutils literal notranslate"><span class="pre">ghbars</span></code> object displays discrete horizontal bars.</p>
</section>
<section id="graph">
<h2>graph<a class="headerlink" href="#graph" title="Permalink to this heading">¶</a></h2>
<p>A <em>graph</em> is a 2D region in which 2D data can be plotted, analogous to a 3D canvas in which 3D objects are displayed. As in the case of <em>canvas</em>, the actual data display objects belong to a specific graph. Multiple graphs can be created.</p>
<p>If you create a data object such as a <em>gcurve</em> without first creating a <em>graph</em>, VPython will automatically create a graph for you. This is convenient for simple, rapid graphing. The advantage to creating a graph explicitly is that it can be given a title, caption, or key, and its alignment can be specified.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">g1</span> <span class="pre">=</span> <span class="pre">graph(title='My</span> <span class="pre">Graph',</span> <span class="pre">xtitle='x',</span> <span class="pre">ytitle='t',</span> <span class="pre">xmin=0,</span> <span class="pre">ymin=-20</span> <span class="pre">)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>title</strong> (<em>string</em>) – Title of the graph. html formatting for sub, sup, italic allowed.</p></li>
<li><p><strong>xtitle</strong> (<em>string</em>) – Title of horizontal axis. html formatting for sub, sup, italic, bold allowed. (e.g. ‘<i>t</i>’).</p></li>
<li><p><strong>ytitle</strong> (<em>string</em>) – Title of vertical axis. html formatting for sub, sup, italic, bold allowed. (e.g. ‘x<sub>1</sub>’).</p></li>
<li><p><strong>xmin</strong> (<em>scalar</em>) – Minimum value on horizontal axis. Default: graph will adjust automatically as points are added.</p></li>
<li><p><strong>xmax</strong> (<em>scalar</em>) – Maximum value on horizontal axis. Default: graph will adjust automatically as points are added.</p></li>
<li><p><strong>ymin</strong> (<em>scalar</em>) – Minimum value on vertical axis. Default: graph will adjust automatically as points are added.</p></li>
<li><p><strong>ymax</strong> (<em>scalar</em>) – Maximum value on vertical axis. Default: graph will adjust automatically as points are added.</p></li>
<li><p><strong>width</strong> (<em>scalar</em>) – Width of graph in pixels. Default 640.</p></li>
<li><p><strong>height</strong> (<em>scalar</em>) – Height of graph in pixels. Default 480.</p></li>
<li><p><strong>background</strong> (<em>vector</em>) – Color of background. Default color.white.</p></li>
<li><p><strong>foreground</strong> (<em>vector</em>) – Color of foreground (axes, labels, etc.). Default color.black.</p></li>
<li><p><strong>align</strong> (<em>string</em>) – Placement in window. Options ‘left’, ‘right’, ‘none’. Default is ‘none’.</p></li>
<li><p><strong>scroll</strong> (<em>boolean</em>) – If True, points are deleted from one end of the plots in the graph as they are added to the other end (a chart recorder). You must specify the initial xmin and xmax, where xmax > xmin.</p></li>
<li><p><strong>fast</strong> (<em>boolean</em>) – If True, plotting is faster but fewer graph inspection options are available. Default True. See <a class="reference internal" href="#plotting-packages">Plotting Packages</a>.</p></li>
<li><p><strong>logx</strong> (<em>boolean</em>) – If True, plots on a log scale. All values must be positive. Only available with fast=False.</p></li>
<li><p><strong>logy</strong> (<em>boolean</em>) – Same as logx, for vertical axis.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<section id="graph-methods">
<h3>graph methods<a class="headerlink" href="#graph-methods" title="Permalink to this heading">¶</a></h3>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-prename descclassname"><span class="pre">mygraph.</span></span><span class="sig-name descname"><span class="pre">select</span></span><span class="sig-paren">(</span><span class="sig-paren">)</span></dt>
<dd></dd></dl>
<p>Makes this the current graph.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-prename descclassname"><span class="pre">mygraph.</span></span><span class="sig-name descname"><span class="pre">delete</span></span><span class="sig-paren">(</span><span class="sig-paren">)</span></dt>
<dd></dd></dl>
<p>Deletes this graph and all its contents.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">current</span> <span class="pre">=</span> <span class="pre">graph.get_selected()</span></span></dt>
<dd></dd></dl>
<p>Returns the currently selected graph (the one to which new gcurves etc. will belong)</p>
</section>
</section>
<section id="gcurve">
<h2>gcurve<a class="headerlink" href="#gcurve" title="Permalink to this heading">¶</a></h2>
<p>A gcurve displays a list of data points as a continuous curve.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">gc</span> <span class="pre">=</span> <span class="pre">gcurve(color=color.red)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>color</strong> (<em>vector</em>) – Color of this gcurve. Default is color.black.</p></li>
<li><p><strong>label</strong> (<em>string</em>) – Text identifying this gcurve. Appears at upper right in color of this gcurve.</p></li>
<li><p><strong>legend</strong> (<em>boolean</em>) – If True, labels are displayed. Default True.</p></li>
<li><p><strong>width</strong> (<em>scalar</em>) – Width of line in pixels.</p></li>
<li><p><strong>markers</strong> (<em>boolean</em>) – If True, dots displayed at each data point.</p></li>
<li><p><strong>width</strong> – Width of dot used for markers. Default slightly larger than gcurve width.</p></li>
<li><p><strong>marker_color</strong> (<em>vector</em>) – Color of marker dots. Default is the gcurve color.</p></li>
<li><p><strong>dot</strong> (<em>boolean</em>) – If True, the most recent point plotted is highlighted with a dot. Useful if a graph retraces its path.</p></li>
<li><p><strong>dot_radius</strong> (<em>scalar</em>) – Width of dot in pixels. Default is 3.</p></li>
<li><p><strong>dot_color</strong> (<em>vector</em>) – Color of dot. Default same as gcurve.</p></li>
<li><p><strong>visible</strong> (<em>boolean</em>) – If True this object is displayed. Default True.</p></li>
<li><p><strong>data</strong> (<em>list</em>) – A list of (x,y) pairs to populate the gcurve. If used after creation, gc.data=[ … ] will replace any existing data in the gcurve.</p></li>
<li><p><strong>graph</strong> (<em>object</em>) – The graph to which this object belongs. Default: most recently created graph.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<section id="gcurve-methods">
<h3>gcurve methods<a class="headerlink" href="#gcurve-methods" title="Permalink to this heading">¶</a></h3>
<p>Plotting a data point:</p>
<dl class="py function">
<dt class="sig sig-object py" id="gc.plot">
<span class="sig-prename descclassname"><span class="pre">gc.</span></span><span class="sig-name descname"><span class="pre">plot</span></span><span class="sig-paren">(</span><em class="sig-param"><span class="n"><span class="pre">x</span></span></em>, <em class="sig-param"><span class="n"><span class="pre">y</span></span></em><span class="sig-paren">)</span><a class="headerlink" href="#gc.plot" title="Permalink to this definition">¶</a></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>firstargument</strong> (<em>scalar</em>) – Value on horizontal axis.</p></li>
<li><p><strong>secondargument</strong> (<em>scalar</em>) – Value on vertical axis.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<p>The point (x,y) is added to the end of the gcurve.</p>
<p>Alternate form of plot():</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">gc.plot(</span> <span class="pre">[</span> <span class="pre">(1,2),</span> <span class="pre">(2,3),</span> <span class="pre">(3,4)</span> <span class="pre">]</span> <span class="pre">).</span></span></dt>
<dd></dd></dl>
<p>Data pairs can be tuples or lists.</p>
<p>Deleting a gcurve:</p>
<dl class="py function">
<dt class="sig sig-object py" id="gc.delete">
<span class="sig-prename descclassname"><span class="pre">gc.</span></span><span class="sig-name descname"><span class="pre">delete</span></span><span class="sig-paren">(</span><span class="sig-paren">)</span><a class="headerlink" href="#gc.delete" title="Permalink to this definition">¶</a></dt>
<dd></dd></dl>
</section>
</section>
<section id="a-simple-plot">
<h2>A Simple Plot<a class="headerlink" href="#a-simple-plot" title="Permalink to this heading">¶</a></h2>
<p>The following VPython program plots a sin function. Note that no <em>graph</em> is explicitly created.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">a</span> <span class="o">=</span> <span class="n">gcurve</span><span class="p">()</span>
<span class="k">for</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">arange</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">2</span><span class="o">*</span><span class="n">pi</span><span class="p">,</span> <span class="n">pi</span><span class="o">/</span><span class="mi">20</span><span class="p">):</span>
<span class="n">rate</span><span class="p">(</span><span class="mi">30</span><span class="p">)</span>
<span class="n">a</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">))</span>
</pre></div>
</div>
<a class="reference internal image-reference" href="_images/sin_plot.png"><img alt="_images/sin_plot.png" src="_images/sin_plot.png" style="width: 300px;" /></a>
<p>Several gcurves (or gdots or gvbars) can be plotted on the same graph.</p>
</section>
<section id="gdots">
<h2>gdots<a class="headerlink" href="#gdots" title="Permalink to this heading">¶</a></h2>
<p>A gdots object will display a list of (x,y) pairs as discrete points instead of as a connected curve.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">gd</span> <span class="pre">=</span> <span class="pre">gdots(color=color.red)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>color</strong> (<em>vector</em>) – Color of this gcurve. Default is color.black.</p></li>
<li><p><strong>radius</strong> (<em>scalar</em>) – Radius of a dot in pixels. Default 3.</p></li>
<li><p><strong>size</strong> (<em>scalar</em>) – The diameter of a dot in pixels.</p></li>
<li><p><strong>label</strong> (<em>string</em>) – Text identifying this gdots. Appears at upper right in color of this gcurve.</p></li>
<li><p><strong>legend</strong> (<em>boolean</em>) – If True, labels are displayed. Default True.</p></li>
<li><p><strong>visible</strong> (<em>boolean</em>) – If True this object is displayed. Default True.</p></li>
<li><p><strong>data</strong> (<em>list</em>) – A list of (x,y) pairs to populate the gdots. If used after creation, gd.data=[ … ] will replace any existing data in the gdots.</p></li>
<li><p><strong>graph</strong> (<em>object</em>) – The graph to which this object belongs. Default: most recently created graph.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<p>Methods for gdots are the same as for gcurve.</p>
</section>
<section id="gvbars-and-ghbars">
<h2>gvbars and ghbars<a class="headerlink" href="#gvbars-and-ghbars" title="Permalink to this heading">¶</a></h2>
<p>A gvbars object displays a vertical bar for each (x,y) data point. A ghbars object displays horizontal bars. The syntax and options are the same.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">gv</span> <span class="pre">=</span> <span class="pre">gvbars(delta=0.05,</span> <span class="pre">color=color.blue)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>delta</strong> (<em>scalar</em>) – Width of the bar. Default 1.</p></li>
<li><p><strong>color</strong> (<em>vector</em>) – Color of the bars. Default is color.black.</p></li>
<li><p><strong>label</strong> (<em>string</em>) – Text identifying this gvbars. Appears at upper right in color of this gcurve.</p></li>
<li><p><strong>legend</strong> (<em>boolean</em>) – If True, labels are displayed. Default True.</p></li>
<li><p><strong>visible</strong> (<em>boolean</em>) – If True this object is displayed. Default True.</p></li>
<li><p><strong>data</strong> (<em>list</em>) – A list of (x,y) pairs to populate the gvbars. If used after creation, gv.data=[ … ] will replace any existing data in the gvbars.</p></li>
<li><p><strong>graph</strong> (<em>object</em>) – The graph to which this object belongs. Default: most recently created graph.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<p>Methods for gvbars and ghbars are the same as for gcurve.</p>
</section>
<section id="plotting-packages">
<h2>Plotting Packages<a class="headerlink" href="#plotting-packages" title="Permalink to this heading">¶</a></h2>
<p>You can choose between two graphing packages, one which is faster (currently based on Flot), or one which offers rich interactive capabilities such as zooming and panning but is slower (currently based on Plotly). The default is the fast version, corresponding to specifying fast=True in a graph, gcurve, gdots, gvbars, or ghbars statement. To use the slower but more interactive version, say fast=False. In many programs the “slow” version may run nearly as fast as the “fast” version, but if you plot a large number of data points the speed difference can be significant.</p>
<p>Do try fast=False to see the many options provided. As you drag the mouse across the graph with the mouse button up, you are shown the numerical values of the plotted points. You can drag with the mouse button down to select a region of the graph, and the selected region then fills the graph. As you drag just below the graph you can pan left and right, and if you drag along the left edge of the graph you can pan up and down. As you move the mouse you’ll notice that there are many options at the upper right. Hover over each of the options for a brief description. The “home” icon restores the display you saw before zooming or panning. Try <a class="reference external" href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/GraphTest">this demo</a>.</p>
</section>
<section id="histograms">
<h2>Histograms<a class="headerlink" href="#histograms" title="Permalink to this heading">¶</a></h2>
<p>The program <a class="reference external" href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/HardSphereGas-VPython/edit">HardSphereGas</a> provides an example of a dynamic histogram.</p>
</section>
</section>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h1 class="logo"><a href="index.html">VPython</a></h1>
<h3>Navigation</h3>
<p class="caption" role="heading"><span class="caption-text">Contents:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="objects.html">3D Objects</a></li>
<li class="toctree-l1"><a class="reference internal" href="rate.html">Animations</a></li>
<li class="toctree-l1"><a class="reference internal" href="canvas.html">Canvases</a></li>
<li class="toctree-l1"><a class="reference internal" href="cameraAndLights.html">Camera and Lighting</a></li>
<li class="toctree-l1"><a class="reference internal" href="colorOpacityGlow.html">Color/Opacity/Glow</a></li>
<li class="toctree-l1"><a class="reference internal" href="makeshapes.html">Design New Objects</a></li>
<li class="toctree-l1"><a class="reference internal" href="file.html">Files/Libraries</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Graphs</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#terminology">Terminology</a></li>
<li class="toctree-l2"><a class="reference internal" href="#graph">graph</a></li>
<li class="toctree-l2"><a class="reference internal" href="#gcurve">gcurve</a></li>
<li class="toctree-l2"><a class="reference internal" href="#a-simple-plot">A Simple Plot</a></li>
<li class="toctree-l2"><a class="reference internal" href="#gdots">gdots</a></li>
<li class="toctree-l2"><a class="reference internal" href="#gvbars-and-ghbars">gvbars and ghbars</a></li>
<li class="toctree-l2"><a class="reference internal" href="#plotting-packages">Plotting Packages</a></li>
<li class="toctree-l2"><a class="reference internal" href="#histograms">Histograms</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="math.html">Math Functions</a></li>
<li class="toctree-l1"><a class="reference internal" href="workwithobjects.html">Object Attachments</a></li>
<li class="toctree-l1"><a class="reference internal" href="rotation.html">Rotation</a></li>
<li class="toctree-l1"><a class="reference internal" href="textoutput.html">Text output</a></li>
<li class="toctree-l1"><a class="reference internal" href="texture.html">Textures</a></li>
<li class="toctree-l1"><a class="reference internal" href="userinput.html">User Input</a></li>
<li class="toctree-l1"><a class="reference internal" href="webvs7.html">VPython/WebVpython</a></li>
<li class="toctree-l1"><a class="reference internal" href="license.html">VPython license</a></li>
<li class="toctree-l1"><a class="reference internal" href="resources.html">Additional Resources</a></li>
</ul>
<div class="relations">
<h3>Related Topics</h3>
<ul>
<li><a href="index.html">Documentation overview</a><ul>
<li>Previous: <a href="file.html" title="previous chapter">Files and Libraries</a></li>
<li>Next: <a href="math.html" title="next chapter">Math Functions and Vectors</a></li>
</ul></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</div>
<script>document.getElementById('searchbox').style.display = "block"</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
©2023, Ruth Chabay and Bruce Sherwood.
|
Powered by <a href="http://sphinx-doc.org/">Sphinx 5.0.2</a>
& <a href="https://github.com/bitprophet/alabaster">Alabaster 0.7.12</a>
|
<a href="_sources/graph.rst.txt"
rel="nofollow">Page source</a>
</div>
</body>
</html>