Interact Exercise 5

Imports

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



In [1]:

    
# YOUR CODE HERE
import matplotlib as plt
import numpy as np
import IPython as ipy

from IPython.display import SVG
from IPython.html.widgets import interactive, fixed
from IPython.html import widgets
from IPython.display import display









    



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



In [ ]:

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

    
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.
    """
    # YOUR CODE HERE
    svg = """
    <svg width='%s' height='%s'>
    <circle cx='%s' cy='%s' r='%s' fill='%s' />
    </svg>
    """ % (width, height, cx, cy, r, fill)
    
    display(SVG(svg))



In [12]:

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



In [13]:

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

    
# YOUR CODE HERE
w = interactive(draw_circle, width=fixed(300), height=fixed(300), cx=(0, 300, 1), cy=(0, 300, 1), r=(0, 50, 1), fill="red");



In [15]:

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

    
# YOUR CODE HERE
display(w)

#the sliders show but not the circle itself?









    



---------------------------------------------------------------------------
NameError                                 Traceback (most recent call last)
<ipython-input-1-b7495ee807e1> in <module>()
      1 # YOUR CODE HERE
----> 2 display(w)
      3 
      4 #the sliders show but not the circle itself?

NameError: name 'display' is not defined



In [ ]:

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

Play with the sliders to change the circles parameters interactively.