Interact Exercise 5

Imports

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



In [17]:

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

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 [8]:

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



In [9]:

    
SVG(s)
#why am I getting an error?









    Out[9]:

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 [18]:

    
def draw_circle(width=100, height=100, cx=25, cy=25, r=5, fill='red'):
    """Draw an SVG circle.
    
    Parameters
    ----------
    width : int
        The width of the svg drawing area in px.
    height : int
        The height of the svg drawing area in px.
    cx : int
        The x position of the center of the circle in px.
    cy : int
        The y position of the center of the circle in px.
    r : int
        The radius of the circle in px.
    fill : str
        The fill color of the circle.
    """
    _svg = """
<svg width="%s" height="%s">
  <circle cx="%s" cy="%s" r="%s" fill="%s" />
</svg>"""
    s = _svg % (width, height, cx, cy, r, fill)
    display(SVG(s))



In [19]:

    
draw_circle(cx=10, cy=10, r=10, fill='blue')



In [ ]:

    
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 [36]:

    
w=interactive(draw_circle, width=fixed(300), height=fixed(300), cx=widgets.IntSlider(min=0,max=300,value=150), cy=widgets.IntSlider(min=0,max=300,value=150), r=widgets.IntSlider(min=0,max=50,value=25), fill=widgets.Textarea('red'))



In [37]:

    
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 [38]:

    
display(w)



In [ ]:

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

Play with the sliders to change the circles parameters interactively.