<jupyter_start><jupyter_text>Three Little CirclesThe "Hello World" (or [Maxwell's Equations](http://www.michaelnielsen.org/ddi/lisp-as-the-maxwells-equations-of-software/)) of d3, [Three Little Circles](http://bost.ocks.org/mike/circles/) introduces all of the main concepts in d3, which gives you a pretty good grounding in data visualization, JavaScript, and SVG. Let's try out some circles in livecoder.First, we need `Livecoder`, and `traitlets`, the Observer/Observable pattern used in building widgets.<jupyter_code>from livecoder.widgets import Livecoder
from IPython.utils import traitlets as T<jupyter_output>:0: FutureWarning: IPython widgets are experimental and may change in the future.<jupyter_text>`Livecoder` by itself doesn't do much. Let's add a traitlet for where we want to draw the circles (the `cx` attribute).<jupyter_code>class ThreeCircles(Livecoder):
    x = T.Tuple([1, 2, 3], sync=True)<jupyter_output><empty_output><jupyter_text>Notice the `sync` argument: this tells IPython that it should propagate changes to the front-end. No REST for the wicked?<jupyter_code>circles = ThreeCircles(description="three-circles")
circles.description<jupyter_output><empty_output><jupyter_text>Almost there! To view our widget, we need to `display` it, which is the default behavior by just having the widget be the last line of a code cell.<jupyter_code>circles<jupyter_output><empty_output>