Home

If you're new to Python
and VPython: Introduction

A VPython tutorial

Pictures of 3D objects

What's new

Classic VPython web site
VPython license
Python web site

 
Graphs
graph

In this section we describe features for plotting graphs with tick marks and labels as shown above. Graphs can be log-log or semilog (see below). Dragging the mouse across the graph gives you crosshairs with display of the x and y coordinates at the crosshairs.

Here is a simple example of how to plot a graph (arange creates a numeric array running from 0 to 8, stopping short of 8.1):

f1 = gcurve(color=color.cyan) # a graphics curve
for x in arange(0, 8.05, 0.1): # x goes from 0 to 8
    f1.plot(pos=(x,5*cos(2*x)*exp(-0.2*x))) # plot

A connected curve (gcurve) is just one of several kinds of graph plotting objects. Other options are disconnected dots (gdots), vertical bars (gvbars), and horizontal bars (ghbars).

When creating gcurve, gdots, gvbars, or ghbars, you can optionally give a list of data points and/or a color (if no color is specified, the plotting color will be black):

f1 = gcurve(pos=[ [1,2],[5,-2],[8,4] ],
            color=color.green)

After creating one of these graphing objects, you can add a single point or a list of additional points:

f1.plot(pos=[100,-30]) # add a single point
f1.plot(pos=[[100,-30], [20,50], [0,-10]]) # add a list

You do not need to specify "pos=" when adding points. Here are other permissible formats:

f1.plot(1,2)
f1.plot([1,2])
f1.plot([1,2], [3,4], [5,6])
f1.plot([ [1,2], [3,4], [5,6] ])

In classic VPython, when you add points you can optionally specify a color for these points that is different from the default color of the object: f1.plot(pos=(100,-30), color=color.red). However, this is not currently possible in GlowScript VPython. Once you have created a graphing object such as gcurve, its initial color will be used throughout.

You can plot more than one thing on the same graph:

f1 = gcurve(color=color.cyan)
f2 = gvbars(delta=0.05, color=color.blue)
for x in arange(0., 8.05, 0.1):
    f1.plot([x,5*cos(2*x)*exp(-0.2*x])  # curve
    f2.plot([x,4*cos(0.5*x)*exp(-0.1*x])# vbars

You can replace all of the points in a gcurve, gdots, gvbars, or ghbars object like this:

f1.data = [ [10,20], [30,40], [50,60] ]

This is equivalent to deleting all the points from the graph and then adding the new ones.

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:

interval 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.

Special options for gcurve, gdots, gvbars, and ghbars

For gcurve your can specify a width of the line in pixels. If you specify dot=True the current plotting point is highlighted with a dot, which is particularly useful if a graph retraces its path. You can specify a size attribute, which specifies the width of the dot in pixels (default is size=8). By default the dot has the same color as the gcurve, but you can specify a different color, as in dot_color=color.green.

For gdots you can specify a size attribute, which specifies the width of the dot in pixels (default is size=5).

For gvbars and ghbars you can specify a delta attribute, which specifies the width of the bar (the default is delta=1).

Deleting data or an entire graph

If you create a gcurve, gdots, gvbars, or ghbars entity and name it g, you can delete the associated data from a graph by saying g.delete(). Similarly, if you say gd = graph(), you can delete the entire graph by saying gd.delete().

Overall graph options

You can establish a graph 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 gcurve or other kind of graph plotting object:

gd = graph(width=600, height=150,
      title=<b>Test</b>', title_align='center',
      xtitle='<i>x</i>', ytitle='<i>x</i><sup>2</sup>',
      foreground=color.black, background=color.white,
      xmax=50, xmin=-20, ymax=5E3, ymin=-2E3)

Setting limits: In this example, the graph window will have a size of 600 by 150 pixels, and above the graph there will be a centered bold title "Test". The x and y axes of the graph will have the labels. 'x' and 'x2'. The foreground color is black (the default), and the background color is white (the default).

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, xmax but not xmin, it is as though you had also specified xmin to be 0; similarly, if you specify xmin but not xmax, xmax will be 0. The same rule holds for ymax and ymin.

Titles: For title, xtitle, and ytitle you can give a number or numerical expression, which will be converted to a string.You can include the HTML styles for italic (<i> or <em>), bold (<b> or <strong>), superscript (<sup>), or subscript (<sub>). For example, the string
     'The <b>mass <i>M</i></b><sub>sys</sub> = 10<sup>3</sup> kg.
displays as
    'The mass Msys = 103 kg.

Multiple lines in a
title can be displayed by inserting line breaks (\n), as in "Three\nlines\nof text" and you can insert <br> or <br/> instead of \n. You cannot use line breaks in xtitle or ytitle.

By default the title at the top of the graph is left-adjusted, but you can set title_align to 'center', 'right', or 'left'. If you specify 'center' the title is centered over the graphing grid.

Once the graph has been activated by plotting something, it is not possible to change title, xtitle, or ytitle.

Offsets: If you specify xmin or ymin to be greater than zero, or xmax or ymax 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 xmax to be greater than xmin, and/or ymax to be greater than ymin.

If you simply say graph(), the defaults are width=640, height=400, no titles, fully autoscaled.

You can align a graph to the left or right of another graph or a canvas:

align 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.

You can have more than one graph window: just create another graph. By default, any graphing objects created following a graph belong to that window, or you can specify which window a new object belongs to:

energy = gdots(graph=graph2, color=color.blue)

Log-log and semilog plots

When creating a graph, you can specify logarithmic plots by specifying logx=True and/or logy=True. All values must be positive, 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.

Histograms (sorted, binned data)

There is no ghistogram option in GlowScript. However, the program HardSphereGas provides an example of how to make a histogram.