-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathgraph.html
More file actions
192 lines (178 loc) · 16.9 KB
/
Copy pathgraph.html
File metadata and controls
192 lines (178 loc) · 16.9 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
<!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>graph</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link href="VisualRef.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: x-large}
.style2 {font-size: xx-large}
-->
</style>
<!-- InstanceEndEditable -->
<link href="VisualRef.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="230" height="30" border="0">
<tr>
<td width="66"><a name="top" id="top"></a><a href="index.html"><strong>Home</strong></a></td>
<td width="154"><span class="Normal"><a href="primitives.html"><strong>Pictures</strong></a> of 3D objects</span></td>
</tr>
</table>
<table width="438" height="30" border="0">
<tr>
<td width="151"><select id="menu1" onChange="jumpMenu(this)">
</select></td>
<td width="163"><select id="menu2" onChange="jumpMenu(this)">
</select></td>
<td width="110"><select id="menu3" onChange="jumpMenu(this)">
</select></td>
</tr>
</table>
<table width="454" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable-->
<tr>
<td width="454" rowspan="2" valign="top"><!-- InstanceBeginEditable name="content" -->
<div>
<table width="98%" border="1">
<tr>
<td width="47%"><div align="center"><span class="style1 style2"><font color="#0000A0">Graphs</font></span></div></td>
<td width="53%"><div align="center"><a href="arrow.html"></a><a href="graph.html"><img src="images/graph.jpg" alt="graph" width="324" height="141" /></a></div></td>
</tr>
</table>
</div>
<p class="Normal">In this section we describe features for plotting graphs
with tick marks and labels. If you move the mouse over the graph, crosshairs and the x,y position are displayed. See the example program <a href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples-JavaScript/program/MakeGraphs" target="_blank">MakeGraphs</a>.</p>
<p class="Normal">You can now choose between two graphing packages, one which is faster, which is the one used in previous versions (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 <span class="attribute">fast=True</span> in a graph, gcurve, gdots, gvbars, or ghbars statement. To use the slower but more interactive version, say <span class="attribute">fast=False</span>. 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.<br />
<br />
Both versions offer capabilities new to GlowScript: If you specify <span class="attribute">markers=True</span> when creating a gcurve object, dots will be displayed at each gcurve point, and you can specify <span class="attribute">marker_radius</span> (the default is slightly larger than the gcurve width) and <span class="attribute">marker_color</span> (the default is the gcurve color). For a graphing object you can specify <span class="attribute">label="cos(x)"</span> and this text, in the color of the object, will appear at the upper right. If you say <span class="attribute">legend=False</span> the label is not actually shown.<br />
<br />
Do try <span class="attribute">fast=True</span> 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 <strong><a href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/GraphTest" target="_blank">this demo</a></strong>.</p>
<p class="Normal">Here is a simple example of how to plot a line graph, with connected points:</p>
<p class="program">f1 = series(color=color.cyan)<br />
# x goes from 0 to 8 in steps of 0.01:<br />
for x in range(0,8,0.01): <br />
f1.plot(x,5*cos(2*x)*exp(-0.2*x))</p>
<p class="Normal"> A set of data to be plotted is a <span class="attribute">series</span>, and there can be more than one series on a graph. A series can be represented by connected points (<span class="attribute">line</span>), which is the default, by
disconnected points (<span class="attribute">scatter</span>),
or by vertical bars (<span class="attribute">bar</span>). To display a series as a scatter or bar graph, set the series <span class="attribute">type</span>:</p>
<p class="program">series( type='scatter' ... )<br />
series( type='bar' ... )</p>
<p class="Normal">After creating a <span class="attribute"></span> series you can plot one or more points like this:</p>
<p class="program"> f1.plot(2,4)<br />
f1.plot([ [1,5],[3,-2],[6,4] ])</p>
<p class="Normal">When creating a <span class="attribute"></span> series you can optionally give a list of data points:</p>
<p class="program"> vb=series(data=[ [1,5],[3,-2],[6,4] ])</p>
<p class="Normal">After displaying the series as a line type, you can change the display of the data simply by changing the series type:</p>
<p class="program">vb.type = 'bar'</p>
<p class="Normal">After creating one of these graphing objects, you can reset the data to a list of points (an empty list will remove this data from the graph):</p>
<p class="program"> vb.data = [ [1,-2], [3,2], [8,3], [12,4] ]<br />
</p>
<p class="Normal"> You can plot more than one thing on the same graph, and specify labels. The following statements produce the graph displayed above:</p>
<p class="program">p = series( color=color.red, <br />
label='sin(x)' )<br />
q = series()<br />
# Can set color after making a series:<br />
q.color = color.green <br />
q.label = 'cos(x)'<br />
<br />
for i in range(0,11,0.2):
<br />
rate(100)<br />
p.plot(i+5, 3+2*sin(i))<br />
q.plot(i+5, 3+2*cos(i)) </p>
<p class="Normal">It is often the case that skipping points may hardly affect the display but will make graph plotting much faster, in which case it's useful to specify an interval between plotting of points:</p>
<p class="attributes"><span class="attribute">interval</span> If interval=10, a point is added to the plot only every 10th time you ask to add a point. If interval is 0, no plot is shown. If interval is -1, no points are skipped.</p>
<p class="Normal"></p>
<p class="Normal"><strong><font color="#0000A0">Deleting an entire graph</font></strong></p>
<p class="Normal">If you say g = graph(), you can delete the entire graph by saying g.delete().</p>
<p class="Normal"> </p>
<div>
<div></div>
</div>
<div> <strong><font color="#0000a0">JavaScript version</font></strong></div>
<div></div>
<p class="program">var p = series( {color:color.red, <br />
label='sin(x)'} )<br />
var q = series()<br />
# Can set color after making a series:<br />
q.color = color.green <br />
q.label = 'cos(x)'<br />
<br />
for (var i=0; i<=11; i+=0.2) {<br />
rate(100)<br />
p.plot(i+5, 3+2*sin(i))<br />
q.plot(i+5, 3+2*cos(i))<br />
}
</p>
<p class="Normal"><strong><font color="#0000A0">Summary of options that affect a series</font></strong></p>
<p class="attributes"><span class="attribute">color</span> Color of the series</p>
<p class="attributes"><span class="attribute">label</span> Text of the label for the series</p>
<p class="attributes"><span class="attribute">width</span> Width in pixels of a line, or the edge of a scatter circle or bar</p>
<p class="attributes"><span class="attribute">radius</span> Radius in pixels of a scatter circle (default is 3 pixels)</p>
<p class="attributes"><span class="attribute">size</span> Diameter in pixels of a scatter circle (default is 6 pixels)</p>
<p class="attributes"><span class="attribute">delta</span> Width of a bar (default = 1)</p>
<p class="attributes"><span class="attribute">horizontal</span> true for horizontal bars (default is false, giving vertical bars)</p>
<p class="attributes"><span class="attribute">interval</span> Skip points (see discussion above)</p>
<p class="program"></p>
<p class="Normal"><strong><font color="#0000A0">Special option for a line series</font></strong></p>
<p class="Normal">For a line series, if you
specify <span class="attribute">dot=true</span> the current plotting
point is highlighted with a dot, which is particularly useful if
a graph retraces its path. You can specify a <span class="attribute">dot_radius</span> attribute,
which specifies the width of the dot in pixels (default is 1 pixel more than half the width of the line).
By default the dot has the same color as the line, but you can
specify a different color, as in <span class="attribute">dot_color=color.green</span>.</p>
<p class="Normal"><strong><font color="#0000A0">Overall graph options</font></strong></p>
<p class="Normal">You can establish a <span class="attribute">graph</span> to set the size, position, and title for the title bar of the graph window,
specify titles for the x and y axes, specify maximum values for each
axis, and set foreground and background colors, before creating <span class="attribute">gcurve</span> or other kind
of graph plotting object: </p>
<p class="program"> gd = graph(width=600, height=150, <br />
title='' <b>Test</b>', <br />
xtitle='t', ytitle='N', <br />
foreground=color.black,
background=color.white, <br />
xmax=50,
xmin=-20,<br />
ymax=5E3, ymin=-2E3)</p>
<p class="Normal">In this example, the graph window will have a size of 600 by 150 pixels, and above the graph
there will be an indented bold title "Test". The x and y axes of the graph will have the labels. 't' and 'N' (xtitle and ytitle do not currently handle html commands such as <b>). The foreground color is black (the default), and the background color is white (the default). Once the graph has been activated by executing gcurve or gdots or gvbars or ghbars, it is not possible to change the title, xtitle, or ytitle and further.</p>
<p class="Normal">Instead of autoscaling the graph to display all the data, the graph in this example
will have fixed limits. The horizontal axis will extend from -20 to +50,
and the vertical axis will extend from -200 to +5000. If you specify <span class="attribute">xmax</span> but not <span class="attribute">xmin</span>, it is as though you had also specified <span class="attribute">xmin</span> to be 0; similarly, if you specify <span class="attribute">xmin</span> but not <span class="attribute">xmax</span>, <span class="attribute">xmax</span> will be 0. The same rule holds for <span class="attribute">ymax</span> and <span class="attribute">ymin</span>.</p>
<p class="Normal"><strong>Offsets:</strong> If you specify <span class="attribute">xmin</span> or <span class="attribute">ymin</span> to be greater than zero, or <span class="attribute">xmax</span> or <span class="attribute">ymax</span> to be less than zero, the crossing point (origin) of the x and y axes will no longer be at (0,0), and the graphing will be offset. If you offset the origin of the graph, you must specify <span class="attribute">xmax</span> to be greater than <span class="attribute">xmin</span>, and/or <span class="attribute">ymax</span> to be greater than <span class="attribute">ymin</span>.</p>
<p class="Normal">If you simply say <span class="attribute">graph()</span>, the defaults
are <span class="attribute">width=640</span>, <span class="attribute">height=200</span>, fully autoscaled. Black foreground and white background are the defaults.</p>
<p class="Normal">You can optionally specify minimum and maximum x or y values with <span class="attribute">xmin</span>, <span class="attribute">xmax</span>, <span class="attribute">ymin</span>, <span class="attribute">ymax</span>. The following will set minimum values for x and y, with the maximum values determined by the actual data:</p>
<p class="program"> gd = graph( width=600, height=150,<br />
xmin=-5, ymin=10 } )</p>
<p class="Normal">After creating a graph, you can change any of these graph attributes:</p>
<p class="program">gd.xmin = 4<br />
gd.width = 300</p>
<p class="Normal">You can align a graph to the left or right of another graph or a canvas:</p>
<p class="attributes"><span class="attribute">align</span> Set to "left" (graph forced to left side of window), "right" (graph forced to right side of window), or "none" (the default alignment). For example, if you want to place a graph to the right of a canvas, set the canvas align attribute to the string "left" and the graph align attribute to "right". If the window is too narrow, the object that is on the right will be displayed below the other object.</p>
<p class="Normal">You can have more than one graph window: just create another <span class="attribute"> graph</span>. By default, any graphing objects
created following a <span class="attribute">graph </span> belong to that
graph, or you can specify which graph a new object belongs to: </p>
<p class="program"> E = series(graph=graph2,<br />
type='scatter',<br />
color=color.blue)</p>
<p class="Normal"></p>
<p class="Normal"><strong><font color="#0000A0">Log-log and semilog plots</font></strong></p>
<p class="Normal">When creating a graph, you can specify logarithmic plots by specifying <span class="attribute">logx=True</span> and/or <span class="attribute">logy=True</span>; in JavaScript, true. <strong>All values must be positive</strong>, representing logarithms of numbers between infinitely small (logarithm approaches 0) and infinitely large; that is, numbers such as 0.01, 0.1, 1, 10, 100, etc. Do not specify a logx axis for horizontal bars, or logy for vertical bars, because the starting point of a bar is 0, and the log of 0 is negative infinity. </p>
<p class="Normal"><strong><font color="#0000A0">graph vs. canvas</font></strong></p>
<p class="Normal">A graph region is similar to a canvas region. The main difference
is that a graph is essentially two-dimensional and has nonuniform x and
y scale factors. </p>
<p class="Normal"><strong><font color="#0000A0">For more information</font></strong></p>
<p class="Normal">GlowScript incorporates the Flot 2D graphing package, and <a href="http://www.flotcharts.org" target="_blank">more information</a> is available on the many features that Flot offers. The data atttribute is essentially the same as the data attribute of Flot graphs, except that GlowScript RGB colors (with components in the range 0 to 1) are converted to Flot RGB colors (with components in the range 0-255).</p>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p><a href="#top"><strong>Top of page</strong></a></p>
</body>
<script type="text/javascript" language="javascript" src="navigation.js"></script>
<!-- InstanceEnd --></html>