Commits

kcrisman  committed 52f4ec8 Draft

Added Sage cell embeddings to the plot page, with other sprucing up related to this

  • Participants
  • Parent commits 0c68ea6

Comments (0)

Files changed (3)

 
 <img src="screenshots/tab_completion.png" />
 
-<p>As you can see, there are several commands that begin with the
+<p id="dot">As you can see, there are several commands that begin with the
 characters "<code>plot</code>". Likewise, if you have an object (such as
 the symbolic function $f$ we defined earlier), you can find out what you
 can do with it by typing its name in, then a period/dot, and then

File Mathematics.html

 
 <h1>Doing Mathematics with Sage</h1>
 
-<p>Because of the philosophy of "building the car, not reinventing the wheel", Sage quickly 
-incorporated much of the best open source mathematics software.  Because 
-many groups and individuals had spent countless hours perfecting open source systems in areas 
-from calculus to group theory, Sage now benefits from excellent resources in nearly every major area 
+<p>Because of the philosophy of "building the car, not reinventing the wheel", Sage quickly
+incorporated much of the best open source mathematics software.  Because
+many groups and individuals had spent countless hours perfecting open source systems in areas
+from calculus to group theory, Sage now benefits from excellent resources in nearly every major area
 of computational mathematics.</p>
 
 <p>Assuming that the reader has mastered
 		<li><a href="OtherTopics.html" class="internal">We Got Your Topics Right Here!</a></li>
 	</ul>
 
-<p>Again, to follow along, open up another browser window and get ready to use Sage!  
-Standards-compliant browsers like Firefox are best, but most modern browsers should work just fine.</p> 
+<p>To follow along, you can just look at the embedded examples, clicking the "Evaluate"-type buttons as they occur.
+Even better, open up another browser window and get ready to use Sage yourself!  You can either use the <a href="">companion
+worksheet</a> on a Sage server, start up your own worksheet to cut and paste, or use a Sage cell server to try examples.
+Standards-compliant browsers like Firefox (FIXME:others?) are best, but most modern browsers should work just fine.</p>
 
-<p>Finally, to start thinking about pedagogical possibilities, feel free
-  to look at the <a href="Classroom.html"  class="internal">classroom section</a>.</p>
+<h2>Beyond the mathematics</h2>
+<p>Naturally, there are other issues to consider, which we discuss in some later sections of this article.</p>
+<ul>
+<li>To start thinking about pedagogical possibilities, feel free
+to look at the <a href="Classroom.html"  class="internal">classroom section</a>.</li>
+<li>There are plenty of further <a href="NextSteps.html" class="internal">steps to take</a> in Sage usage, like
+downloading your own copy.</li>
+<li>Finally, some thoughts about where Sage comes from and <a href="WhySage.html" class="internal">why it exists</a>
+may be of interest.</li>
+</ul>
+
 
 <div class="footer">
 <p>Previous: <a href="Help.html" class="internal">Finding Help and
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 
+<!-- Stuff to make live Sage cell instances -->
+
+    <script src="http://aleph.sagemath.org/static/jquery.min.js"></script>
+    <script src="http://aleph.sagemath.org/embedded_sagecell.js"></script>
+    <script>
+$(function () {
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotP',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotQ',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotPQ1',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotPQ2',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotsinx2',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotlabels',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotdisk',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotarrow',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotpolar',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plotparam',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plot3d',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plot3dother',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plot3dwrong',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plot3dplotpoints',
+                           template:       sagecell.templates.restricted});
+    sagecell.makeSagecell({inputLocation:  '#sagecell-plot3dvectorfield',
+                           template:       sagecell.templates.restricted});
+});
+    </script>
+
+
+
+
 <head>
 <title>Basics of Plotting</title>
 <meta name="author" content="Byungchul Cha, Karl-Dieter Crisman, Dan Drake, and Jason Grout" />
 
 <h1>Basics of Plotting</h1>
 
-<p>FIXME: Break this up into a few sections, then reference them in the 
-<a href="index.html#Contents">table of contents</a>.</p>
-
-<p>We have already seen a little bit of plotting.  Sage has a fairly 
-comprehensive set of plot commands, with many, many options, so this 
-will only scratch the surface; for serious use, be sure to read the 
-documentation.  In this section, we just go a little further along with
+<p>We have already seen a little bit of plotting.  Sage has a fairly
+comprehensive set of plot commands, with many, many options, so this
+will only scratch the surface; for serious use, be sure to read <a href="http://sagemath.org/doc/reference/plotting.html">the
+documentation</a>.  In this section, we just go a little further along with
 the basics, which will give more of a sense of what is available.
 </p>
 
 <!--
-little time with some basics.  As usual, all examples are at #Plot on 
+little time with some basics.  As usual, all examples are at #Plot on
 the worksheet. [Will this be true?]</p>
 -->
 
 </ul>
 
 
-<p>[FIXME: Add in screenshots of all these things]</p>
 
 <h2 id=SV>Just a bit more single-variable plotting</h2>
 
-<p>Let's begin by recalling our previous plot.  It turns out that if we 
-prepend "P=" to a different thing, then "P" will stand for that new 
-object.  In this case, I am changing the plot to only go from x=-1 to 1, 
-not from -2 to 2 .  But from now on, P will stand for that 
-graphic.</p>
+<p>Let's begin by recalling our previous plot, from the introductory sections.
+In this case, we'll also change the plot to only go from x=-1 to 1,
+not from -2 to 2 .</p>
 
-<p>[P=plot(f,(x,-1,1)); P]</p>
+<div id="sagecell-plotP"><script type="text/x-sage">f(x)=x^3+1
+plot(f,(x,-1,1))</script></div>
 
-<p>Probably one of the most important things to know about plotting in 
-Sage is that you can add plots.  For instance, we can observe that the 
-tangent line to f at x=0 is just the line y=1 .  Let's plot this, in a 
-different color, and with a different style for the line, but over the 
+<p>Probably one of the most important things to know about plotting in
+Sage is that you can add plots.  For instance, we can observe that the
+tangent line to f at x=0 is just the line y=1 .  So first, let's plot this, in a
+different color, and with a different style for the line, but over the
 same interval.<p>
 
-<p>[Q=plot(1,(x,-1,1),color="red", linestyle="--"); Q]</p>
+<div id="sagecell-plotQ"><script type="text/x-sage">plot(1,(x,-1,1), color="red", linestyle="--")</script></div>
 
-<p>Now, what we really want is to show them together.  So we just add them.</p>
+<p>Here, we want to point out that to get more options for plotting (or anything else), one adds <i>keywords</i>.
+These look like additional multivariable function arguments in mathematics; here, <code>color="red"</code>
+is one example.  Usually if the right hand side isn't a number, we need to put it in quotes, as in both cases here.</p>
 
-<p>[P+Q]</p>
+<p>Again, what we really want is to show these plots together.  So we add them!</p>
 
-<p>This is identical to asking Sage to <code>show</code> the plot.</p>
+<div id="sagecell-plotPQ1"><script type="text/x-sage">P=plot(f,(x,-1,1))
+Q=plot(1,(x,-1,1), color="red", linestyle="--")
+P+Q</script></div>
 
-<p>[show(P+Q)]</p>
+<p>If we prepend <code>P=</code> to a Sage object or command output, then <code>P</code>
+will stand for that new object.  (We say we're <i>assigning</i> the variable <code>P</code>.)
+So from now on, P will stand for that graphic.  Then we just added <code>P+Q</code>.</p>
 
-<p>Now suppose we wanted to zoom in on this.  Using more keywords, just like 
-the "color" keyword we used above, we can do this without creating a new 
-plot.</p>
+<p>On another note, ending your commands with just the name of the plots will actually show them.
+This is identical to using the command <code>show(P+Q)</code>.</p>
 
-<p>[show(P+Q,xmin=-.1,xmax=.1,ymin=.99,ymax=1.01)]</p>
-       	
-<p>Since the axes no longer cross in the frame of reference, Sage shows 
-this.  There are many other options one can pass in which are useful for 
+<p>Now suppose we wanted to zoom in on this.  Using more keywords, just like
+the "color" keyword we used above, we can do this without creating a new
+plot.  In this case, we put those keywords in the <code>show</code> command.  Even though
+not every horizontal/vertical axis is x or y, we still use this as a shorthand.</p>
+
+<div id="sagecell-plotPQ2"><script type="text/x-sage">P=plot(f,(x,-1,1))
+Q=plot(1,(x,-1,1), color="red", linestyle="--")
+show(P+Q,xmin=-.1,xmax=.1,ymin=.99,ymax=1.01)</script></div>
+
+<p>Since the axes no longer cross in the frame of reference, Sage does not show them doing so.</p>
+
+<p>This is also a good time to point out that in your own notebook, it's not necessary to paste
+the original plot creation command all the time; once you've assigned <code>P</code> to the plot,
+you can use it that way until you let <code>P</code> be something else, or until you restart something.
+(We do so here for pedagogical convenience, and so that the examples can be easily evaluated on the fly
+by the cell server.)</p>
+
+<p>There are many other options one can pass in which are useful for
 various purposes.  The next example changes the style of the plot, adds a
 grid, and has a frame around the plot.</p>
 
-<p>[plot(sin(x^2),(x,0,5),linestyle="--",frame=True,gridlines=True)]</p>
+<div id="sagecell-plotsinx2"><script type="text/x-sage">plot(sin(x^2),(x,0,5), linestyle="--", frame=True, gridlines=True)</script></div>
 
-<p>Here is another often-requested feature.  
-Notice that with the dollar signs, the labels for the 
-axes are nicely typeset.</p>
+<p>Here are two other often-requested features.
+Notice that with the dollar signs, the labels are all nicely typeset.</p>
 
-<p>[show(P+Q,axes_labels=['$x$','$y$'])]</p>
+<div id="sagecell-plotlabels"><script type="text/x-sage">Plot1 = plot(x^2,(x,-1,1), legend_label='$x^2$')
+Plot2 = plot(x^3,(x,-1,1),color='green', legend_label='$x^3$')
+show(Plot1+Plot2,axes_labels=['$x$','$y$'], fontsize=15)</script></div>
 
-<p>FIXME: The labels seems small.  A different example, or get rid of
-altogether?</p>
 
-<p>(As an aside, sometimes instead of typing <code>show...</code> it's easier
-to just type the name of the plot and then use the dot syntax.  The previous
-example would look like <code>(P+Q).show(axes_labels=['$x$','$y$'])</code>.
-The curious may wish to try that command <i>without</i> parentheses to see
-what happens.)</p>
+<p>(As an aside, sometimes instead of typing <code>show(...)</code> it's easier
+to just type the name of the plot and then use the dot syntax explained <a href="Help.html#dot">earlier</a>.
+The previous example would look like <code>(Plot1+Plot2).show(axes_labels=['$x$','$y$'],fontsize=15)</code>.
+The curious may wish to try that command <i>without</i> parentheses to see what happens.)</p>
 
 <h2 id=Other>Other two-dimensional plots</h2>
 
 The following examples show a few of the things introduced above, but in this
 context.</p>
 
-<p>[disk((0.0,0.0), 1, (pi, 3*pi/2), color='yellow')+circle((1,1),.5)]</p>
+<div id="sagecell-plotdisk"><script type="text/x-sage">disk((0.0,0.0), 1, (pi, 3*pi/2), color='yellow')+circle((1,1),.5)</script></div>
 
-<p>[arrow((-1,-1),(1,1),width=5,color='purple',arrowsize=5)+arrow((1,-1),(-1,1),arrowsize=20)]</p>
+<div id="sagecell-plotarrow"><script type="text/x-sage">arrow((-1,-1),(1,1),width=5,color='purple',arrowsize=5)+arrow((1,-1),(-1,1),arrowsize=20)</script></div>
 
 <p>In addition, there are other function plots one might like.  Polar plotting
 is a snap.<p>
 
-<p>[polar_plot(sqrt(x),(x,0,2*pi),fill=True,fillcolor='orange',color='black')]</p>
+<div id="sagecell-plotpolar"><script type="text/x-sage">polar_plot(sqrt(x),(x,0,2*pi),fill=True,fillcolor='orange',color='black')</script></div>
 
-<p>Sage can do arbitrary parametric plots, with fairly natural syntax.  
+<p>Sage can do arbitrary parametric plots, with fairly natural syntax.
 We can do contour plotting as well, where the range of each variable is kept
 with the variable in parentheses.</p>
 
-<p>[parametric_plot( (sin(x), sin(2*x)), (x, 0, 2*pi), color="purple" )]</p>
-<p>[var('y'); contour_plot(y^2 + 1 - x^3 - x, (x,-pi,pi), (y,-pi,pi), fill=False, cmap='hsv', labels=True, contours=[-4,0,4], label_fmt={-4:"low", 0:"medium", 4: "hi"}, label_colors='black')]</p>
+<div id="sagecell-plotparam"><script type="text/x-sage">var('y')
+parametric_plot( (sin(x), sin(2*x)), (x, 0, 2*pi), color="purple" ).show()
+contour_plot(y^2 + 1 - x^3 - x, (x,-pi,pi), (y,-pi,pi), fill=False, cmap='hsv', labels=True, contours=[-4,0,4], label_fmt={-4:"low", 0:"medium", 4: "hi"}, label_colors='black')</script></div>
 
-<p>As you can see in the second example, this is highly customizable, 
-thanks to the matplotlib Python package.  Note that the first command in 
-the second graphic ensures that $y$ is thought of as a variable by Sage; 
+<p>As you can see in the second example, this is highly customizable,
+thanks to the matplotlib Python package.  Note that the first command in
+the second graphic ensures that $y$ is thought of as a variable by Sage;
 this could come up any time one enters a multivariable context.</p>
 
 <h2 id=3d>Three-dimensional plots</h2>
 
-<p>For instance, see the following plot of a function of two variables.  
-The default 3-D plot in the notebook is via a Java applet from a program 
-called Jmol, originally developed to visualize chemical compounds.  This 
+<p>For instance, see the following plot of a function of two variables.
+The default 3-D plot in the notebook is via a Java applet from a program
+called Jmol, originally developed to visualize chemical compounds.  This
 enables the viewer to easily zoom, rotate, and do other things.</p>
 
-<p>[f(x,y)=sin(x)*cos(y)+x/y
-plot3d(f,(x,-pi,pi),(y,-pi,pi))]
-</p>
+<p>Warning: you will need a reasonably up-to-date Java and appropriate browser
+to view this.  Internet Explorer is not advised.  FIXME: is this true? Let's be specific.</p>
 
-<p>In this case, because we said $f$ is a function of $x$ and $y$ by 
-typing $f(x,y)$, Sage would have already known $y$ was a variable.  The 
-symbol $x$ refers by default to a variable, though of course the user 
+<div id="sagecell-plot3d"><script type="text/x-sage">f(x,y)=sin(x)*cos(y)+x/y
+plot3d(f,(x,-pi,pi),(y,-pi,pi))</script></div>
+
+<p>In this case, because we said $f$ is a function of $x$ and $y$ by
+typing $f(x,y)$, Sage would have already known $y$ was a variable.  The
+symbol $x$ refers by default to a variable, though of course the user
 can change it.</p>
 
-<p>[We will include an actual Jmol applet here in the article, 
-regardless of any Sage worksheets!]</p>
+<p>FIXME: needed or correct? There are other viewing options if your Java isn't up to snuff.
+Three dimensional stuff is notoriously dependent upon browsers and other things;
+even some cool stuff doesn't work in Internet Explorer because it disregards
+standards.</p>
 
-<p>Note that the syntax is fairly strict; Sage wants to know which 
-variable comes first, and does not assume that $x$ is the first one on 
+<div id="sagecell-plot3dother"><script type="text/x-sage">f(x,y)=sin(x)*cos(y)+x/y
+show(plot3d(f,(x,-pi,pi),(y,-pi,pi),viewer='tachyon'))
+</script></div>
+
+<!-- show(plot3d(f,(x,-pi,pi),(y,-pi,pi),viewer='canvas3d')) doesn't yet work, but we want it to! -->
+
+<p>Note that the syntax is fairly strict; Sage wants to know which
+variable comes first, and does not assume that $x$ is the first one on
 the grid.</p>
 
-<p>[plot3d(f,(y,-pi,pi),(x,-pi,pi))]</p>
+<div id="sagecell-plot3dwrong"><script type="text/x-sage">f(x,y)=sin(x)*cos(y)+x/y
+plot3d(f,(x,-pi,pi),(y,-pi,pi))</script></div>
 
-<p>Plots in three dimensions also take keywords such as color.  A very 
-important keyword in this context is <code>plot_points</code>.  The 
-following example looks good, but if the reader were to remove that 
-keyword, it would look very spiky.</p>
+<p>Plots in three dimensions also take keywords such as color.  A very
+important keyword in this context is <code>plot_points</code>.  The
+following example looks good, but if the reader were to remove that
+keyword, it would look very spiky.  This one may take a while to evaluate!</p>
 
-<p>[g(x,y)=sin(x^2+y^2); plot3d(g,(x,-5,5),(y,-5,5),plot_points=300)]</p>
+<div id="sagecell-plot3dplotpoints"><script type="text/x-sage">g(x,y)=sin(x^2+y^2); plot3d(g,(x,-5,5),(y,-5,5),plot_points=200)</script></div>
 
-<p>One of the most fun kinds of these plots are vector fields.  For 
-this, we'll need a third variable (the semicolon allows for two commands 
-in one line, if desired).</p>
+<p>One of the most fun kinds of these plots are vector fields.  For
+this, we'll need a third variable.</p>
 
-<p>[z = var('z'); plot_vector_field3d((x*cos(z),-y*cos(z),sin(z)), (x,0,pi), (y,0,pi), (z,0,pi))]</p>
+<div id="sagecell-plot3dwrong"><script type="text/x-sage">z = var('z')
+plot_vector_field3d((x*cos(z),-y*cos(z),sin(z)), (x,0,pi), (y,0,pi), (z,0,pi))</script></div>
 
 <p>If one right-clicks on the graphic, there should be a place to select a
-style; if you have 3D glasses, try one of the options under stereographic.</p>
+style; if you have access to 3D glasses, try one of the options under stereographic.</p>
 
 <div class="footer">
 <p>Previous: <a href="Mathematics.html" class="internal">Doing Mathematics with Sage</a> | Up: <a href="Mathematics.html" class="internal">Doing Mathematics with Sage</a> | Next: <a href="Calc.html" class="internal">Calculus and all that Jazz</a></p>