Interact Exercise 5

Imports

Put the standard imports for Matplotlib, Numpy and the IPython widgets in the following cell.



In [11]:

    
%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from IPython.display import display
from IPython.display import SVG
from IPython.display import Image
from IPython.html.widgets import interact, interactive, fixed
from IPython.display import display









    



:0: FutureWarning: IPython widgets are experimental and may change in the future.

Interact with SVG display

SVG is a simple way of drawing vector graphics in the browser. Here is a simple example of how SVG can be used to draw a circle in the Notebook:



In [2]:

    
s = """
<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="aquamarine" />
</svg>
"""



In [3]:

    
SVG(s)









    Out[3]:

Write a function named draw_circle that draws a circle using SVG. Your function should take the parameters of the circle as function arguments and have defaults as shown. You will have to write the raw SVG code as a Python string and then use the IPython.display.SVG object and IPython.display.display function.



In [45]:

    
def draw_circle(width=100, height=100, cx=25, cy=25, r=5, fill='red'):
    goodies='<svg width="'+str(width)+'" height="'+str(height)+'">\n<circle cx="'+str(cx)+'" cy="'+str(cy)+'" r="'+str(r)+'" fill="'+str(fill)+'" />\n</svg>'
    return SVG(goodies)#returns the value we need using strings for the argument
    #i know now that i could have used %s but i didnt think of it at the time



In [5]:

    
draw_circle(cx=10, cy=10, r=10, fill='blue')#draws the new circle









    Out[5]:



In [6]:

    
assert True # leave this to grade the draw_circle function

Use interactive to build a user interface for exploing the draw_circle function:

width: a fixed value of 300px
height: a fixed value of 300px
cx/cy: a slider in the range [0,300]
r: a slider in the range [0,50]
fill: a text area in which you can type a color's name

Save the return value of interactive to a variable named w.



In [44]:

    
w=interactive(draw_circle,width=fixed(300),height=fixed(300),cx=(0,300,1),cy=(0,300,1),r=(0,50,1))
#fixes the values of width and height while creating a slider for the other values



In [41]:

    
c = w.children
assert c[0].min==0 and c[0].max==300
assert c[1].min==0 and c[1].max==300
assert c[2].min==0 and c[2].max==50
assert c[3].value=='red'

Use the display function to show the widgets created by interactive:



In [42]:

    
display (w)



In [43]:

    
assert True # leave this to grade the display of the widget

Play with the sliders to change the circles parameters interactively.