# Interact Exercise 5

## Imports

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

``````

In :

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

``````
``````

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

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

``````
``````

In :

SVG(s)

``````
``````

Out:

``````

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 :

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.
"""
circ_image = """
<svg width="%d" height="%d">
<circle cx="%d" cy="%d" r="%d" fill="%s" />
</svg>
"""%(width,height,cx,cy,r,fill)
display(SVG(circ_image))

``````
``````

In :

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 :

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

``````
``````

In :

c = w.children
assert c.min==0 and c.max==300
assert c.min==0 and c.max==300
assert c.min==0 and c.max==50
assert c.value=='red'

``````

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

``````

In :

display(w)

``````
``````

``````
``````

In [ ]:

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

``````

Play with the sliders to change the circles parameters interactively.