# Sage Interact Essentials

The documentation on Sage and Sage Interact is overwhelming. Here is some important information that can help get you started.

## Sage Interact: Basic options

The first thing we need to explore are the different interactive possibilities.

The picture provides a quick look at the options I've been able to find: you can see a box for text, a color box, sliders (with different step sizes), checkboxes, color wheels, a "dual" slider, drop down boxes, yet another slider (with yet another type of step size), and some buttons.

The code for it can be found here: InteractEssentials1  (.txt)  Just paste into a Sage cell and press Ctrl-Enter at the same time. The code is meant to serve as a starting point for you as you design your own Interact manipulatives: rip out the options you don't want, rename the options you want with an appropriate name and you're ready to go. Actually, the code has the colors "hooked up" to 2 functions that are graphed. Change the color box and the color of the corresponding graph changes.

The documentation I referred to in figuring out the choices can be found here. You'll have to scroll down to:

Defaults for the variables of the input function determine interactive controls. The standard controls are input_boxslider,range_slidercheckboxselectorinput_grid, and color_selector. There is also a text control (see the defaults below).

Definitely not "high school friendly". More essentials to come....

Sage Interact: Titles

A title can help you make that manipulative look just a little bit nicer for your class, but who has the time to learn HTML? This site and this site are good places to go for basic information if you do. Otherwise, just copy/modify the examples here and you'll get the look you want quickly: InteractEssentials2 (.txt)

Some basic observations for the examples in the file:

1. Surround the text with tags, one tag tells you to start doing something and the other tag tells you end it (by putting a / in front). So '<h1> My Title </h1>' says to h1 something (make it a big header) and </h1> tells you to stop doing h1 to it.
2. The size of the header is given by h1 (largest) to h6 (smallest)
3. You can set the alignment with align=left, align=center, or align=right.
4. <em> My Text </em> to emphasize text
5. You can have multiple tags around text.
6. <HR> Text </HR> to put a horizontal line under text.
7. A list is started with <ul>, list items are created by <li>, and the list is ended with </ul>
8. A paragraph is started with <p> and ended with </p>
9. You can control several aspects of the font with the style= command
10. The annoying blue color of the sheet was created by changing the background color of the body. If you change the color, you won't see the change until you close the sheet and reopen it.
11. Use <br /> for line breaks
12. You can insert numbers and strings into the HTML string.

Sage Interact Output: If you plot something in Sage and try to save the output you end up getting a .png file. Sage gives the option to save the output into other formats. That's good because you'll want vector graphics for a nice crisp picture if you're doing something important. The important documentation is here. The save command let's us specify the output to:

1. .eps
2. .pdf
3. .png
4. .ps
5. .sobj (for a Sage object you can load later)
6. .svg

If you're using the output in your $\LaTeX$ documents, you'll probably want .pdf or .eps. So if your picture is the graphics object G, then you can get .pdf output by adding a line like:

G.save('MyOutput.pdf')

I've revised the Koch Snowflake code so that you have a specific working example. You can download it: KochSnowflakeInteract and run it in Sage. The result is shown below:

The additional line has a red dot in front of it. As a result of telling sage to print the output to   'KochSnowflake.pdf' the file is given in the output (circled red in the picture above). Just right click on the KochSnowflake.pdf link, select 'Save Link As...' and specify where you want to save the file. You're done!

It's worth noting that although, in the second to last line, the Koch Snowflake is printed without axes, you'll need to specify no axes again for the .pdf file as well.

Sage Interact Figure Size: The link to the documentation (provided above) indicates the default size is of the figure is 4. The size of the figure is set through the figsize command as is shown in the last 2 lines of the code. Typically, all you need is something like figsize = 10,  but you can specify the horizontal and vertical dimensions as I've done in the code; so, for example, figsize=[5,8] sets both the horizontal and vertical components of the figure.

Sage Interact Tables: Chances are you'll find you want to create tables at some point for your Sage Interact manipulative. Some references for the basics of tables and HTML are here and here. In the first reference, almost every page has a section "Try it Yourself - Examples" which lets you experiment with the HTML code. Very nice! Here are some basic ideas for working with tables that I gleaned from the HTML references.

1. <table> starts the table and </table> ends it.
2. The second reference lists lots of options that go into the <table> tag.
3. <tr> starts a row and </tr> ends it.
4. <th> starts a header and </th> ends it.
5. Headers are bold and centered by default.
6. border="8" sets the thickness of the surrounding border.
7. bordercolor to set the color of the border
8. bgcolor sets the color of the table
9. cellpadding puts space between the text inside the cell and the cell itself
10. cellspacing puts spacing between the individual cells
11. align allows you to center, left justify, or right justify the text.
12. colspan sets the span of  a particular column
I've put together some tables to illustrate some of the important features of tables. This was the output:

The text to create the tables pictured above is here: Tables (.txt) ...all you need to do is copy it into a Sage cell and press Shift-Enter to get the same output.

Dynamic table: These examples of tables are of a fixed size. Here is a simple example of an HTML table that expands to fit more data: Derangements (.txt) Copy/paste the code into a Sage cell, press Shift-Enter to get output like this:

Sage Colors

At times you'll find it's useful to refer to colors by name. The list of colors that can be referred to by name can be found here.

Specifying the height of 2D plots

A 2d looks something like this: plot(f,(x,-10,20)) where $-10\leq x\leq20$ and Sage figures out the range of y-values in the plot. In some cases, such as a function like tangent, you may find the need to adjust the range of y-values yourself. You can do that by defining a graphics object, say G, as G=plot(f,(x,-10,20)) and then show(G,ymin=-5,ymax=5) sets the range of y-values.

Plotting graphs with asymptotes

Graphs with asymptotes are plotted as if they were one connected graph.

To plot tangent accurately we need to turn on an option to detect_poles. So, for example,  plot(f,(x,-10,20),detect_poles=True,color='green') will give us the desired plot.