<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interactive Plotting with Chaco — Chaco v3.4.0 documentation</title>
<link rel="stylesheet" href="../_static/default.css" type="text/css" />
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '../',
VERSION: '3.4.0',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="../_static/jquery.js"></script>
<script type="text/javascript" src="../_static/underscore.js"></script>
<script type="text/javascript" src="../_static/doctools.js"></script>
<link rel="shortcut icon" href="../_static/et.ico"/>
<link rel="top" title="Chaco v3.4.0 documentation" href="../index.html" />
<link rel="up" title="Tutorials" href="tutorial.html" />
<link rel="next" title="Modeling Van der Waal’s Equation With Chaco and Traits" href="tutorial_2.html" />
<link rel="prev" title="Tutorials" href="tutorial.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="tutorial_2.html" title="Modeling Van der Waal’s Equation With Chaco and Traits"
accesskey="N">next</a></li>
<li class="right" >
<a href="tutorial.html" title="Tutorials"
accesskey="P">previous</a> |</li>
<li><a href="../index.html">Chaco v3.4.0 documentation</a> »</li>
<li><a href="tutorial.html" accesskey="U">Tutorials</a> »</li>
<li><a href="#">Interactive Plotting with Chaco</a></li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="interactive-plotting-with-chaco">
<span id="tutorial-1"></span><h1><a class="toc-backref" href="#id1">Interactive Plotting with Chaco</a><a class="headerlink" href="#interactive-plotting-with-chaco" title="Permalink to this headline">¶</a></h1>
<div class="section" id="overview">
<h2><a class="toc-backref" href="#id2">Overview</a><a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h2>
<p>This tutorial is an introduction to Chaco. We’re going to build several
mini-applications of increasing capability and complexity. Chaco was designed to
be used primarily by scientific programmers, and this tutorial requires only
basic familiarity with Python.</p>
<p>Knowledge of NumPy can be helpful for certain parts of the tutorial. Knowledge
of GUI programming concepts such as widgets, windows, and events are helpful
for the last portion of the tutorial, but it is not required.</p>
<p>This tutorial demonstrates using Chaco with Traits UI, so knowledge of the
Traits framework is also helpful. We don’t use very many sophisticated aspects
of Traits or Traits UI, and it is entirely possible to pick it up as you go
through the tutorial. This tutorial applies to Enthought Tool Suite version 3.x.</p>
<p>It’s also worth pointing out that you don’t <em>have</em> to use Traits UI in order to
use Chaco — you can integrate Chaco directly with Qt or wxPython — but for
this tutorial, we use Traits UI to make things easier.</p>
<div class="contents topic" id="contents">
<p class="topic-title first">Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#interactive-plotting-with-chaco" id="id1">Interactive Plotting with Chaco</a><ul>
<li><a class="reference internal" href="#overview" id="id2">Overview</a></li>
<li><a class="reference internal" href="#goals" id="id3">Goals</a></li>
<li><a class="reference internal" href="#introduction" id="id4">Introduction</a></li>
<li><a class="reference internal" href="#script-oriented-plotting" id="id5">Script-oriented Plotting</a></li>
<li><a class="reference internal" href="#application-oriented-plotting" id="id6">Application-oriented Plotting</a></li>
<li><a class="reference internal" href="#understanding-the-first-plot" id="id7">Understanding the First Plot</a></li>
<li><a class="reference internal" href="#scatter-plots" id="id8">Scatter Plots</a></li>
<li><a class="reference internal" href="#image-plot" id="id9">Image Plot</a></li>
<li><a class="reference internal" href="#a-slight-modification" id="id10">A Slight Modification</a></li>
<li><a class="reference internal" href="#container-overview" id="id11">Container Overview</a></li>
<li><a class="reference internal" href="#using-a-container" id="id12">Using a Container</a></li>
<li><a class="reference internal" href="#editing-plot-traits" id="id13">Editing Plot Traits</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="section" id="goals">
<h2><a class="toc-backref" href="#id3">Goals</a><a class="headerlink" href="#goals" title="Permalink to this headline">¶</a></h2>
<p>By the end of this tutorial, you will have learned how to:</p>
<ul class="simple">
<li>create Chaco plots of various types</li>
<li>arrange plots of data items in various layouts</li>
<li>configure and interact with your plots using Traits UI</li>
<li>create a custom plot overlay</li>
<li>create a custom tool that interacts with the mouse</li>
</ul>
</div>
<div class="section" id="introduction">
<h2><a class="toc-backref" href="#id4">Introduction</a><a class="headerlink" href="#introduction" title="Permalink to this headline">¶</a></h2>
<p>Chaco is a <em>plotting application toolkit</em>. This means that it can build
both static plots and dynamic data visualizations that let you
interactively explore your data. Here are four basic examples of Chaco plots:</p>
<img alt="../_images/tornado1.png" src="../_images/tornado1.png" />
<p>This plot shows a static “tornado plot” with a categorical Y axis and continuous
X axis. The plot is resizable, but the user cannot interact or explore the data
in any way.</p>
<img alt="../_images/simple_line2.png" src="../_images/simple_line2.png" />
<p>This is an overlaid composition of line and scatter plots with a legend. Unlike
the previous plot, the user can pan and zoom this plot, exploring the
relationship between data curves in areas that appear densely overlapping.
Furthermore, the user can move the legend to an arbitrary position on the plot,
and as they resize the plot, the legend maintains the same screen-space
separation relative to its closest corner.</p>
<img alt="../_images/regression1.png" src="../_images/regression1.png" />
<p>This example starts to demonstrate interacting with the dataset in an
exploratory way. Whereas interactivity in the previous example was limited to
basic pan and zoom (which are fairly common in most plotting libraries), this is
an example of a more advanced interaction that allows a level of data
exploration beyond the standard view manipuations.</p>
<p>With this example, the user can select a region of data space, and a simple
line fit is applied to the selected points. The equation of the line is
then displayed in a text label.</p>
<p>The lasso selection tool and regression overlay are both built in to Chaco,
but they serve an additional purpose of demonstrating how one can build complex
data-centric interactions and displays on top of the Chaco framework.</p>
<img alt="../_images/scalar_function.png" src="../_images/scalar_function.png" />
<p>This is a much more complex demonstration of Chaco’s capabilities. The user
can view the cross sections of a 2-D scalar-valued function. The cross sections
update in real time as the user moves the mouse, and the “bubble” on each line
plot represents the location of the cursor along that dimension. By using
drop-down menus (not show here), the user can change plot attributes like the
colormap and the number of contour levels used in the center plot, as well as
the actual function being plotted.</p>
</div>
<div class="section" id="script-oriented-plotting">
<h2><a class="toc-backref" href="#id5">Script-oriented Plotting</a><a class="headerlink" href="#script-oriented-plotting" title="Permalink to this headline">¶</a></h2>
<p>We distinguish between “static” plots and “interactive visualizations”
because these different applications of a library affect the structure
of how the library is written, as well as the code you write to use the
library.</p>
<p>Here is a simple example of the “script-oriented” approach for creating
a static plot. This is probably familiar to anyone who has used Gnuplot,
MATLAB, or Matplotlib:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="o">*</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.shell</span> <span class="kn">import</span> <span class="o">*</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="o">*</span><span class="n">pi</span><span class="p">,</span> <span class="mi">2</span><span class="o">*</span><span class="n">pi</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
<span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="s">"r-"</span><span class="p">)</span>
<span class="n">title</span><span class="p">(</span><span class="s">"First plot"</span><span class="p">)</span>
<span class="n">ytitle</span><span class="p">(</span><span class="s">"sin(x)"</span><span class="p">)</span>
<span class="n">show</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<img alt="../_images/script_oriented.png" src="../_images/script_oriented.png" />
<p>The basic structure of this example is that we generate some data, then we call
functions to plot the data and configure the plot. There is a global concept of
“the active plot”, and the functions do high-level manipulations on it. The
generated plot is then usually saved to disk for inclusion in a journal article
or presentation slides.</p>
<p>Now, as it so happens, this particular example uses the <cite>chaco.shell</cite>
script plotting package, so when you run this script, the plot that Chaco opens
does have some basic interactivity. You can pan and zoom, and even move forwards
and backwards through your zoom history. But ultimately it’s a pretty static
view into the data.</p>
</div>
<div class="section" id="application-oriented-plotting">
<h2><a class="toc-backref" href="#id6">Application-oriented Plotting</a><a class="headerlink" href="#application-oriented-plotting" title="Permalink to this headline">¶</a></h2>
<p>The second approach to plotting can be thought of as “application-oriented”, for
lack of a better term. There is definitely a bit more code, and the plot
initially doesn’t look much different, but it sets us up to do more interesting
things, as you’ll see later on:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">Plot</span><span class="p">,</span> <span class="n">ArrayPlotData</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">sin</span>
<span class="k">class</span> <span class="nc">LinePlot</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span><span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">LinePlot</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">*</span> <span class="n">x</span><span class="o">**</span><span class="mi">3</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">)</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"line"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">title</span> <span class="o">=</span> <span class="s">"sin(x) * x^3"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">LinePlot</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<p>This produces a plot similar to the previous script-oriented code snippet:</p>
<img alt="../_images/first_plot.png" src="../_images/first_plot.png" />
<p>So, this is our first “real” Chaco plot. We’ll walk through this code and
look at what each bit does. This example serves as the basis for many of the
later examples.</p>
</div>
<div class="section" id="understanding-the-first-plot">
<h2><a class="toc-backref" href="#id7">Understanding the First Plot</a><a class="headerlink" href="#understanding-the-first-plot" title="Permalink to this headline">¶</a></h2>
<p>Let’s start with the basics. First, we declare a class to represent our
plot, called <tt class="xref py py-class docutils literal"><span class="pre">LinePlot</span></tt>:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">LinePlot</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
</pre></div>
</div>
<p>This class uses the Enthought Traits package, and all of our objects subclass
from <tt class="xref py py-class docutils literal"><span class="pre">HasTraits</span></tt>.</p>
<p>Next, we declare a Traits UI View for this class:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span><span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
</pre></div>
</div>
<p>Inside this view, we are placing a reference to the <tt class="xref py py-attr docutils literal"><span class="pre">plot</span></tt> trait and
telling Traits UI to use the <tt class="xref py py-class docutils literal"><span class="pre">ComponentEditor</span></tt> (imported from
<tt class="xref py py-mod docutils literal"><span class="pre">enthought.enable.component_editor</span></tt>) to display it. If the
trait were an Int or Str or Float, Traits could automatically pick an
appropriate GUI element to display it. Since Traits UI doesn’t natively know
how to display Chaco components, we explicitly tell it what kind of editor to
use.</p>
<p>The other parameters in the <tt class="xref py py-class docutils literal"><span class="pre">View</span></tt> constructor are pretty
self-explanatory, and the
<a class="reference external" href="http://code.enthought.com/projects/traits/docs/html/TUIUG/index.html">Traits UI User’s Guide</a>
documents all the various properties
you can set here. For our purposes, this Traits View is sort of boilerplate. It
gets us a nice little window that we can resize. We’ll be using something like
this View in most of the examples in the rest of the tutorial.</p>
<p>Now, let’s look at the constructor, where the real work gets done:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">LinePlot</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">*</span> <span class="n">x</span><span class="o">**</span><span class="mi">3</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">)</span>
</pre></div>
</div>
<p>The first thing we do here is call the super-class’s <tt class="xref py py-meth docutils literal"><span class="pre">__init__()</span></tt> method,
which ensures that all the Traits machinery is properly set up, even though the
<tt class="xref py py-meth docutils literal"><span class="pre">__init__()</span></tt> method is overridden. Then we create some mock data, just like
in the script-oriented approach. But rather than directly calling some sort of
plotting function to throw up a plot, we create this <tt class="xref py py-class docutils literal"><span class="pre">ArrayPlotData</span></tt>
object and stick the data in there. The ArrayPlotData object is a simple
structure that associates a name with a NumPy array.</p>
<p>In a script-oriented approach to plotting, whenever you have to update the data
or tweak any part of the plot, you basically re-run the entire script. Chaco’s
model is based on having objects representing each of the little pieces of a
plot, and they all use Traits events to notify one another that some attribute
has changed. So, the ArrayPlotData is an object that interfaces your
data with the rest of the objects in the plot. In a later example we’ll see
how we can use the ArrayPlotData to quickly swap data items in and
out, without affecting the rest of the plot.</p>
<p>The next line creates an actual <tt class="xref py py-class docutils literal"><span class="pre">Plot</span></tt> object, and gives it the
ArrayPlotData instance we created previously:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
</pre></div>
</div>
<p>Chaco’s Plot object serves two roles: it is both a container of
renderers, which are the objects that do the actual task of transforming data
into lines and markers and colors on the screen, and it is a factory for
instantiating renderers. Once you get more familiar with Chaco, you can choose
to not use the Plot object, and instead directly create renderers and containers
manually. Nonetheless, the Plot object does a lot of nice housekeeping that is
useful in a large majority of use cases.</p>
<p>Next, we call the <tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt> method on the Plot object we just created:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"line"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
</pre></div>
</div>
<p>This creates a blue line plot of the data items named “x” and “y”. Note that
we are not passing in an actual array here; we are passing in the names of arrays
in the ArrayPlotData we created previously.</p>
<p>This method call creates a new renderer — in this case a line renderer — and
adds it to the Plot.</p>
<p>This may seem kind of redundant or roundabout to folks who are used to passing
in a pile of NumPy arrays to a plot function, but consider this:
ArrayPlotData objects can be shared between multiple Plots. If you
want several different plots of the same data, you don’t have to externally
keep track of which plots are holding on to identical copies of what data, and
then remember to shove in new data into every single one of those plots. The
ArrayPlotData object acts almost like a symlink between consumers of data and
the actual data itself.</p>
<p>Next, we set a title on the plot:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">plot</span><span class="o">.</span><span class="n">title</span> <span class="o">=</span> <span class="s">"sin(x) * x^3"</span>
</pre></div>
</div>
<p>And then we set our <tt class="xref py py-attr docutils literal"><span class="pre">plot</span></tt> trait to the new plot:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
</pre></div>
</div>
<p>The last thing we do in this script is set up some code to run when the script
is executed:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">LinePlot</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</div>
<p>This one-liner instantiates a LinePlot object and calls its
<tt class="xref py py-meth docutils literal"><span class="pre">configure_traits()</span></tt> method. This brings up a dialog with a traits editor for
the object, built up according to the View we created earlier. In our
case, the editor just displays our <tt class="xref py py-attr docutils literal"><span class="pre">plot</span></tt> attribute using the
ComponentEditor.</p>
</div>
<div class="section" id="scatter-plots">
<h2><a class="toc-backref" href="#id8">Scatter Plots</a><a class="headerlink" href="#scatter-plots" title="Permalink to this headline">¶</a></h2>
<p>We can use the same pattern to build a scatter plot:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">Plot</span><span class="p">,</span> <span class="n">ArrayPlotData</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">sin</span>
<span class="k">class</span> <span class="nc">ScatterPlot</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span><span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">ScatterPlot</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">*</span> <span class="n">x</span><span class="o">**</span><span class="mi">3</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span> <span class="o">=</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span> <span class="o">=</span> <span class="n">y</span><span class="p">)</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"scatter"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">title</span> <span class="o">=</span> <span class="s">"sin(x) * x^3"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">ScatterPlot</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<p>Note that we have only changed the <em>type</em> argument to the <tt class="xref py py-meth docutils literal"><span class="pre">plot.plot()</span></tt> call
and the name of the class from LinePlot to <tt class="xref py py-class docutils literal"><span class="pre">ScatterPlot</span></tt>. This
produces the following:</p>
<img alt="../_images/scatter1.png" src="../_images/scatter1.png" />
</div>
<div class="section" id="image-plot">
<h2><a class="toc-backref" href="#id9">Image Plot</a><a class="headerlink" href="#image-plot" title="Permalink to this headline">¶</a></h2>
<p>Image plots can be created in a similar fashion:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">Plot</span><span class="p">,</span> <span class="n">ArrayPlotData</span><span class="p">,</span> <span class="n">jet</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">exp</span><span class="p">,</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">meshgrid</span>
<span class="k">class</span> <span class="nc">ImagePlot</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span> <span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">ImagePlot</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">50</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">50</span><span class="p">)</span>
<span class="n">xgrid</span><span class="p">,</span> <span class="n">ygrid</span> <span class="o">=</span> <span class="n">meshgrid</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
<span class="n">z</span> <span class="o">=</span> <span class="n">exp</span><span class="p">(</span><span class="o">-</span><span class="p">(</span><span class="n">xgrid</span><span class="o">*</span><span class="n">xgrid</span><span class="o">+</span><span class="n">ygrid</span><span class="o">*</span><span class="n">ygrid</span><span class="p">)</span><span class="o">/</span><span class="mi">100</span><span class="p">)</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">imagedata</span> <span class="o">=</span> <span class="n">z</span><span class="p">)</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">img_plot</span><span class="p">(</span><span class="s">"imagedata"</span><span class="p">,</span> <span class="n">colormap</span><span class="o">=</span><span class="n">jet</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">ImagePlot</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<p>There are a few more steps to create the input Z data, and we also call a
different method on the Plot object — <tt class="xref py py-meth docutils literal"><span class="pre">img_plot()</span></tt> instead of
<tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt>. The details of the method parameters are not that important
right now; this is just to demonstrate how we can apply the same basic pattern
from the “first plot” example above to do other kinds of plots.</p>
<img alt="../_images/image_plot1.png" src="../_images/image_plot1.png" />
</div>
<div class="section" id="a-slight-modification">
<h2><a class="toc-backref" href="#id10">A Slight Modification</a><a class="headerlink" href="#a-slight-modification" title="Permalink to this headline">¶</a></h2>
<p>Earlier we said that the Plot object is both a container of renderers and a
factory (or generator) of renderers. This modification of the previous example
illustrates this point. We only create a single instance of Plot, but we call
its <tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt> method twice. Each call creates a new renderer and adds it to
the Plot object’s list of renderers. Also notice that we are reusing the <em>x</em>
array from the ArrayPlotData:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">Plot</span><span class="p">,</span> <span class="n">ArrayPlotData</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">cos</span><span class="p">,</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">sin</span>
<span class="k">class</span> <span class="nc">OverlappingPlot</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span><span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">OverlappingPlot</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">x</span><span class="o">/</span><span class="mi">2</span> <span class="o">*</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
<span class="n">y2</span> <span class="o">=</span> <span class="n">cos</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">,</span> <span class="n">y2</span><span class="o">=</span><span class="n">y2</span><span class="p">)</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"scatter"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y2"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"line"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"red"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">OverlappingPlot</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<img alt="../_images/overlapping_plot.png" src="../_images/overlapping_plot.png" />
</div>
<div class="section" id="container-overview">
<h2><a class="toc-backref" href="#id11">Container Overview</a><a class="headerlink" href="#container-overview" title="Permalink to this headline">¶</a></h2>
<p>So far we’ve only seen single plots, but frequently we need to plot data side
by side. Chaco uses various subclasses of <tt class="xref py py-class docutils literal"><span class="pre">Container</span></tt> to do layout.
Horizontal containers (<tt class="xref py py-class docutils literal"><span class="pre">HPlotContainer</span></tt>) place components horizontally:</p>
<img alt="../_images/hplotcontainer.png" src="../_images/hplotcontainer.png" />
<p>Vertical containers (<tt class="xref py py-class docutils literal"><span class="pre">VPlotContainer</span></tt>) array component vertically:</p>
<img alt="../_images/vplotcontainer.png" src="../_images/vplotcontainer.png" />
<p>Grid container (<tt class="xref py py-class docutils literal"><span class="pre">GridPlotContainer</span></tt>) lays plots out in a grid:</p>
<img alt="../_images/gridcontainer.png" src="../_images/gridcontainer.png" />
<p>Overlay containers (<tt class="xref py py-class docutils literal"><span class="pre">OverlayPlotContainer</span></tt>) just overlay plots on top of
each other:</p>
<img alt="../_images/simple_line2.png" src="../_images/simple_line2.png" />
<p>You’ve actually already seen OverlayPlotContainer — the Plot
class is actually a special subclass of OverlayPlotContainer. All of
the plots inside this container appear to share the same X- and Y-axis, but this
is not a requirement of the container. For instance, the following plot shows
plots sharing only the X-axis:</p>
<img alt="../_images/multiyaxis.png" src="../_images/multiyaxis.png" />
</div>
<div class="section" id="using-a-container">
<h2><a class="toc-backref" href="#id12">Using a Container</a><a class="headerlink" href="#using-a-container" title="Permalink to this headline">¶</a></h2>
<p>Containers can have any Chaco component added to them. The following code
creates a separate Plot instance for the scatter plot and the line
plot, and adds them both to the HPlotContainer object:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">HPlotContainer</span><span class="p">,</span> <span class="n">ArrayPlotData</span><span class="p">,</span> <span class="n">Plot</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">sin</span>
<span class="k">class</span> <span class="nc">ContainerExample</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">HPlotContainer</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span><span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span> <span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">600</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">ContainerExample</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">*</span> <span class="n">x</span><span class="o">**</span><span class="mi">3</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">)</span>
<span class="n">scatter</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">scatter</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"scatter"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">line</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="n">line</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"line"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">container</span> <span class="o">=</span> <span class="n">HPlotContainer</span><span class="p">(</span><span class="n">scatter</span><span class="p">,</span> <span class="n">line</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">container</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">ContainerExample</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<p>This produces the following plot:</p>
<img alt="../_images/container_example.png" src="../_images/container_example.png" />
<p>There are many parameters you can configure on a container, like background
color, border thickness, spacing, and padding. We insert some more
lines between lines 20 and 21 of the previous example to make the two plots
touch in the middle:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">container</span> <span class="o">=</span> <span class="n">HPlotContainer</span><span class="p">(</span><span class="n">scatter</span><span class="p">,</span> <span class="n">line</span><span class="p">)</span>
<span class="n">container</span><span class="o">.</span><span class="n">spacing</span> <span class="o">=</span> <span class="mi">0</span>
<span class="n">scatter</span><span class="o">.</span><span class="n">padding_right</span> <span class="o">=</span> <span class="mi">0</span>
<span class="n">line</span><span class="o">.</span><span class="n">padding_left</span> <span class="o">=</span> <span class="mi">0</span>
<span class="n">line</span><span class="o">.</span><span class="n">y_axis</span><span class="o">.</span><span class="n">orientation</span> <span class="o">=</span> <span class="s">"right"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">container</span>
</pre></div>
</div>
<p>Something to note here is that all Chaco components have both bounds and
padding (or margin). In order to make our plots touch, we need to zero out the
padding on the appropriate side of each plot. We also move the Y-axis for the
line plot (which is on the right hand side) to the right side.</p>
<p>This produces the following:</p>
<img alt="../_images/container_nospace.png" src="../_images/container_nospace.png" />
</div>
<div class="section" id="editing-plot-traits">
<h2><a class="toc-backref" href="#id13">Editing Plot Traits</a><a class="headerlink" href="#editing-plot-traits" title="Permalink to this headline">¶</a></h2>
<p>So far, the stuff you’ve seen is pretty standard: building up a plot of some
sort and doing some layout on them. Now we start taking advantage
of the underlying framework.</p>
<p>Chaco is written using Traits. This means that all the graphical bits you
see — and many of the bits you don’t see — are all objects with various
traits, generating events, and capable of responding to events.</p>
<p>We’re going to modify our previous ScatterPlot example to demonstrate some
of these capabilities. Here is the full listing of the modified code:</p>
<div class="highlight-python"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43</pre></div></td><td class="code"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">enthought.traits.api</span> <span class="kn">import</span> <span class="n">HasTraits</span><span class="p">,</span> <span class="n">Instance</span><span class="p">,</span> <span class="n">Int</span>
<span class="kn">from</span> <span class="nn">enthought.traits.ui.api</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">Group</span><span class="p">,</span> <span class="n">Item</span>
<span class="kn">from</span> <span class="nn">enthought.enable.api</span> <span class="kn">import</span> <span class="n">ColorTrait</span>
<span class="kn">from</span> <span class="nn">enthought.enable.component_editor</span> <span class="kn">import</span> <span class="n">ComponentEditor</span>
<span class="kn">from</span> <span class="nn">enthought.chaco.api</span> <span class="kn">import</span> <span class="n">marker_trait</span><span class="p">,</span> <span class="n">Plot</span><span class="p">,</span> <span class="n">ArrayPlotData</span>
<span class="kn">from</span> <span class="nn">numpy</span> <span class="kn">import</span> <span class="n">linspace</span><span class="p">,</span> <span class="n">sin</span>
<span class="k">class</span> <span class="nc">ScatterPlotTraits</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">color</span> <span class="o">=</span> <span class="n">ColorTrait</span><span class="p">(</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">marker</span> <span class="o">=</span> <span class="n">marker_trait</span>
<span class="n">marker_size</span> <span class="o">=</span> <span class="n">Int</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
<span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Group</span><span class="p">(</span><span class="n">Item</span><span class="p">(</span><span class="s">'color'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Color"</span><span class="p">,</span> <span class="n">style</span><span class="o">=</span><span class="s">"custom"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'marker'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Marker"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'marker_size'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Size"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span> <span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">orientation</span> <span class="o">=</span> <span class="s">"vertical"</span><span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">800</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">600</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="nb">super</span><span class="p">(</span><span class="n">ScatterPlotTraits</span><span class="p">,</span> <span class="bp">self</span><span class="p">)</span><span class="o">.</span><span class="n">__init__</span><span class="p">()</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span> <span class="o">*</span> <span class="n">x</span><span class="o">**</span><span class="mi">3</span>
<span class="n">plotdata</span> <span class="o">=</span> <span class="n">ArrayPlotData</span><span class="p">(</span><span class="n">x</span> <span class="o">=</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span> <span class="o">=</span> <span class="n">y</span><span class="p">)</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">plotdata</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span> <span class="o">=</span> <span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"scatter"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="bp">self</span><span class="o">.</span><span class="n">plot</span> <span class="o">=</span> <span class="n">plot</span>
<span class="k">def</span> <span class="nf">_color_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">color</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">color</span>
<span class="k">def</span> <span class="nf">_marker_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">marker</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">marker</span>
<span class="k">def</span> <span class="nf">_marker_size_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">marker_size</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">marker_size</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">"__main__"</span><span class="p">:</span>
<span class="n">ScatterPlotTraits</span><span class="p">()</span><span class="o">.</span><span class="n">configure_traits</span><span class="p">()</span>
</pre></div>
</td></tr></table></div>
<p>Let’s step through the changes.</p>
<p>First, we add traits for color, marker type, and marker size:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">class</span> <span class="nc">ScatterPlotTraits</span><span class="p">(</span><span class="n">HasTraits</span><span class="p">):</span>
<span class="n">plot</span> <span class="o">=</span> <span class="n">Instance</span><span class="p">(</span><span class="n">Plot</span><span class="p">)</span>
<span class="n">color</span> <span class="o">=</span> <span class="n">ColorTrait</span><span class="p">(</span><span class="s">"blue"</span><span class="p">)</span>
<span class="n">marker</span> <span class="o">=</span> <span class="n">marker_trait</span>
<span class="n">marker_size</span> <span class="o">=</span> <span class="n">Int</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
</pre></div>
</div>
<p>We also change our Traits UI View to include references to these
new traits. We put them in a Traits UI <tt class="xref py py-class docutils literal"><span class="pre">Group</span></tt> so that we can control
the layout in the dialog a little better — here, we’re setting the layout
orientation of the elements in the dialog to “vertical”.</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">traits_view</span> <span class="o">=</span> <span class="n">View</span><span class="p">(</span>
<span class="n">Group</span><span class="p">(</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'color'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Color"</span><span class="p">,</span> <span class="n">style</span><span class="o">=</span><span class="s">"custom"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'marker'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Marker"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'marker_size'</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s">"Size"</span><span class="p">),</span>
<span class="n">Item</span><span class="p">(</span><span class="s">'plot'</span><span class="p">,</span> <span class="n">editor</span><span class="o">=</span><span class="n">ComponentEditor</span><span class="p">(),</span> <span class="n">show_label</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>
<span class="n">orientation</span> <span class="o">=</span> <span class="s">"vertical"</span> <span class="p">),</span>
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span> <span class="n">resizable</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span>
<span class="n">title</span><span class="o">=</span><span class="s">"Chaco Plot"</span><span class="p">)</span>
</pre></div>
</div>
<p>Now we have to do something with those traits. We modify the
constructor so that we grab a handle to the renderer that is created by
the call to <tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt>:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="bp">self</span><span class="o">.</span><span class="n">renderer</span> <span class="o">=</span> <span class="n">plot</span><span class="o">.</span><span class="n">plot</span><span class="p">((</span><span class="s">"x"</span><span class="p">,</span> <span class="s">"y"</span><span class="p">),</span> <span class="nb">type</span><span class="o">=</span><span class="s">"scatter"</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s">"blue"</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
</pre></div>
</div>
<p>Recall that a Plot is a container for renderers and a factory for them. When
called, its <tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt> method returns a list of the renderers that the call
created. In previous examples we’ve been just ignoring or discarding the return
value, since we had no use for it. In this case, however, we grab a
reference to that renderer so that we can modify its attributes in later
methods.</p>
<p>The <tt class="xref py py-meth docutils literal"><span class="pre">plot()</span></tt> method returns a list of renderers because for some values
of the <em>type</em> argument, it will create multiple renderers. In our case here,
we are just doing a scatter plot, and this creates just a single renderer.</p>
<p>Next, we define some Traits event handlers. These are specially-named
methods that are called whenever the value of a particular trait changes. Here
is the handler for <tt class="xref py py-attr docutils literal"><span class="pre">color</span></tt> trait:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">def</span> <span class="nf">_color_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">color</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">color</span>
</pre></div>
</div>
<p>This event handler is called whenever the value of <tt class="xref py py-attr docutils literal"><span class="pre">self.color</span></tt> changes,
whether due to user interaction with a GUI, or due to code elsewhere. (The
Traits framework automatically calls this method because its name follows the
name template of <tt class="samp docutils literal"><span class="pre">_</span><em><span class="pre">traitname</span></em><span class="pre">_changed</span></tt>.) Since this method is called
after the new value has already been updated, we can read out the new value just
by accessing <tt class="xref py py-attr docutils literal"><span class="pre">self.color</span></tt>. We just copy the color to the scatter renderer.
You can see why we needed to hold on to the renderer in the constructor.</p>
<p>Now we do the same thing for the marker type and marker size traits:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">def</span> <span class="nf">_marker_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">marker</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">marker</span>
<span class="k">def</span> <span class="nf">_marker_size_changed</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">renderer</span><span class="o">.</span><span class="n">marker_size</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">marker_size</span>
</pre></div>
</div>
<p>Running the code produces an app that looks like this:</p>
<img alt="../_images/traits.png" src="../_images/traits.png" />
<p>Depending on your platform, the color editor/swatch at the top may look different.
This is how it looks on Mac OS X. All of the controls here are “live”. If you
modify them, the plot updates.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<p class="logo"><a href="../index.html">
<img class="logo" src="../_static/e-logo-rev.png" alt="Logo"/>
</a></p>
<h3>Page Contents</h3>
<ul>
<li><a class="reference internal" href="#">Interactive Plotting with Chaco</a><ul>
<li><a class="reference internal" href="#overview">Overview</a></li>
<li><a class="reference internal" href="#goals">Goals</a></li>
<li><a class="reference internal" href="#introduction">Introduction</a></li>
<li><a class="reference internal" href="#script-oriented-plotting">Script-oriented Plotting</a></li>
<li><a class="reference internal" href="#application-oriented-plotting">Application-oriented Plotting</a></li>
<li><a class="reference internal" href="#understanding-the-first-plot">Understanding the First Plot</a></li>
<li><a class="reference internal" href="#scatter-plots">Scatter Plots</a></li>
<li><a class="reference internal" href="#image-plot">Image Plot</a></li>
<li><a class="reference internal" href="#a-slight-modification">A Slight Modification</a></li>
<li><a class="reference internal" href="#container-overview">Container Overview</a></li>
<li><a class="reference internal" href="#using-a-container">Using a Container</a></li>
<li><a class="reference internal" href="#editing-plot-traits">Editing Plot Traits</a></li>
</ul>
</li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../_sources/user_manual/tutorial_1.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="../search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="tutorial_2.html" title="Modeling Van der Waal’s Equation With Chaco and Traits"
>next</a></li>
<li class="right" >
<a href="tutorial.html" title="Tutorials"
>previous</a> |</li>
<li><a href="../index.html">Chaco v3.4.0 documentation</a> »</li>
<li><a href="tutorial.html" >Tutorials</a> »</li>
<li><a href="#">Interactive Plotting with Chaco</a></li>
</ul>
</div>
<div class="footer">
© Copyright 2008, Enthought, Inc..
Last updated on Mar 02, 2011.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
</div>
</body>
</html>
