Interact Exercise 5

Imports

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



In [1]:

    
import numpy as np
from matplotlib import pyplot as plt
from IPython.html.widgets import interact, interactive, fixed
from IPython.display import display, SVG
#raise NotImplementedError()









    



: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)
display(s)









    





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

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

    
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.
    """
    s1 = "<svg width = \"" + str(width) + "\" height = \"" + str(height) + "\">\n"
    s2 = "<circle cx = \"" + str(cx) + "\" cy = \"" + str(cy) + "\" r = \"" + str(5) + "\" fill = \"" + fill + "\" />\n"
    s3 = "</svg>"
    
    s = s1 + s2 + s3
    
    display(SVG(s))
    #raise NotImplementedError()



In [5]:

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



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

    
w = interactive(draw_circle,
        width = fixed(300),
        height = fixed(300),
        cx = (0,300),
        cy = (0,300),
        r = (0,50),
        fill = "red")
#raise NotImplementedError()



In [8]:

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

    
display(w)
#raise NotImplementedError()



In [10]:

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

Play with the sliders to change the circles parameters interactively.