Skip to content

Commit

Permalink
fix multiple whitespace issues in svg_*.py examples (E293, E291)
Browse files Browse the repository at this point in the history
  • Loading branch information
@twmr
twmr committed Nov 9, 2014
1 parent e5a1331 commit c714c74
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 67 deletions.
61 changes: 31 additions & 30 deletions examples/user_interfaces/svg_histogram.py
View file
Expand Up @@ -3,29 +3,29 @@

"""
Demonstrate how to create an interactive histogram, in which bars
are hidden or shown by cliking on legend markers.
are hidden or shown by cliking on legend markers.
The interactivity is encoded in ecmascript (javascript) and inserted in
the SVG code in a post-processing step. To render the image, open it in
a web browser. SVG is supported in most web browsers used by Linux and
OSX users. Windows IE9 supports SVG, but earlier versions do not.
The interactivity is encoded in ecmascript (javascript) and inserted in
the SVG code in a post-processing step. To render the image, open it in
a web browser. SVG is supported in most web browsers used by Linux and
OSX users. Windows IE9 supports SVG, but earlier versions do not.
Notes
-----
The matplotlib backend lets us assign ids to each object. This is the
mechanism used here to relate matplotlib objects created in python and
mechanism used here to relate matplotlib objects created in python and
the corresponding SVG constructs that are parsed in the second step.
While flexible, ids are cumbersome to use for large collection of
While flexible, ids are cumbersome to use for large collection of
objects. Two mechanisms could be used to simplify things:
* systematic grouping of objects into SVG <g> tags,
* assingning classes to each SVG object according to its origin.
For example, instead of modifying the properties of each individual bar,
For example, instead of modifying the properties of each individual bar,
the bars from the `hist` function could either be grouped in
a PatchCollection, or be assigned a class="hist_##" attribute.
a PatchCollection, or be assigned a class="hist_##" attribute.
CSS could also be used more extensively to replace repetitive markup
troughout the generated SVG.
troughout the generated SVG.
__author__="david.huard@gmail.com"
Expand All @@ -40,7 +40,7 @@

plt.rcParams['svg.embed_char_paths'] = 'none'

# Apparently, this `register_namespace` method works only with
# Apparently, this `register_namespace` method works only with
# python 2.7 and up and is necessary to avoid garbling the XML name
# space with ns0.
ET.register_namespace("", "http://www.w3.org/2000/svg")
Expand All @@ -54,11 +54,11 @@
H = plt.hist([r, r1], label=labels)
containers = H[-1]
leg = plt.legend(frameon=False)
plt.title("""From a web browser, click on the legend
plt.title("""From a web browser, click on the legend
marker to toggle the corresponding histogram.""")


# --- Add ids to the svg objects we'll modify
# --- Add ids to the svg objects we'll modify

hist_patches = {}
for ic, c in enumerate(containers):
Expand All @@ -67,7 +67,7 @@
element.set_gid('hist_%d_patch_%d' % (ic, il))
hist_patches['hist_%d' %ic].append('hist_%d_patch_%d' % (ic, il))

# Set ids for the legend patches
# Set ids for the legend patches
for i, t in enumerate(leg.get_patches()):
t.set_gid('leg_patch_%d' % i)

Expand All @@ -85,32 +85,32 @@

# --- Add interactivity ---

# Add attributes to the patch objects.
# Add attributes to the patch objects.
for i, t in enumerate(leg.get_patches()):
el = xmlid['leg_patch_%d' % i]
el.set('cursor', 'pointer')
el.set('onclick', "toggle_hist(this)")

# Add attributes to the text objects.
# Add attributes to the text objects.
for i, t in enumerate(leg.get_texts()):
el = xmlid['leg_text_%d' % i]
el.set('cursor', 'pointer')
el.set('onclick', "toggle_hist(this)")

# Create script defining the function `toggle_hist`.
# We create a global variable `container` that stores the patches id
# belonging to each histogram. Then a function "toggle_element" sets the
# Create script defining the function `toggle_hist`.
# We create a global variable `container` that stores the patches id
# belonging to each histogram. Then a function "toggle_element" sets the
# visibility attribute of all patches of each histogram and the opacity
# of the marker itself.
# of the marker itself.

script = """
<script type="text/ecmascript">
<![CDATA[
var container = %s
var container = %s
function toggle(oid, attribute, values) {
/* Toggle the style attribute of an object between two values.
/* Toggle the style attribute of an object between two values.
Parameters
----------
oid : str
Expand All @@ -122,20 +122,20 @@
*/
var obj = document.getElementById(oid);
var a = obj.style[attribute];
a = (a == values[0] || a == "") ? values[1] : values[0];
obj.style[attribute] = a;
}
function toggle_hist(obj) {
var num = obj.id.slice(-1);
toggle('leg_patch_' + num, 'opacity', [1, 0.3]);
toggle('leg_text_' + num, 'opacity', [1, 0.5]);
var names = container['hist_'+num]
for (var i=0; i < names.length; i++) {
toggle(names[i], 'opacity', [1,0])
};
Expand All @@ -146,7 +146,8 @@

# Add a transition effect
css = tree.getchildren()[0][0]
css.text = css.text + "g {-webkit-transition:opacity 0.4s ease-out;-moz-transition:opacity 0.4s ease-out;}"
css.text = css.text + "g {-webkit-transition:opacity 0.4s ease-out;" + \
"-moz-transition:opacity 0.4s ease-out;}"

# Insert the script and save to file.
tree.insert(0, ET.XML(script))
Expand Down
75 changes: 38 additions & 37 deletions examples/user_interfaces/svg_tooltip.py
View file
Expand Up @@ -2,20 +2,20 @@
SVG tooltip example
===================
This example shows how to create a tooltip that will show up when
hovering over a matplotlib patch.
This example shows how to create a tooltip that will show up when
hovering over a matplotlib patch.
Although it is possible to create the tooltip from CSS or javascript,
here we create it in matplotlib and simply toggle its visibility on
when hovering over the patch. This approach provides total control over
Although it is possible to create the tooltip from CSS or javascript,
here we create it in matplotlib and simply toggle its visibility on
when hovering over the patch. This approach provides total control over
the tooltip placement and appearance, at the expense of more code up
front.
front.
The alternative approach would be to put the tooltip content in `title`
atttributes of SVG objects. Then, using an existing js/CSS library, it
would be relatively straightforward to create the tooltip in the
browser. The content would be dictated by the `title` attribute, and
the appearance by the CSS.
The alternative approach would be to put the tooltip content in `title`
atttributes of SVG objects. Then, using an existing js/CSS library, it
would be relatively straightforward to create the tooltip in the
browser. The content would be dictated by the `title` attribute, and
the appearance by the CSS.
:author: David Huard
Expand All @@ -38,26 +38,27 @@
ax.add_patch(rect)

# Create the tooltips
circle_tip = ax.annotate('This is a blue circle.',
xy=(0, 0),
xytext=(30, -30),
textcoords='offset points',
color='w',
ha='left',
bbox=dict(boxstyle='round,pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1),
)

rect_tip = ax.annotate('This is a green rectangle.',
xy=(-5, 10),
xytext=(30, 40),
textcoords='offset points',
color='w',
ha='left',
bbox=dict(boxstyle='round,pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1),
)


# Set id for the patches
circle_tip = ax.annotate(
'This is a blue circle.',
xy=(0, 0),
xytext=(30, -30),
textcoords='offset points',
color='w',
ha='left',
bbox=dict(boxstyle='round,pad=.5', fc=(.1, .1, .1, .92),
ec=(1., 1., 1.), lw=1, zorder=1))

rect_tip = ax.annotate(
'This is a green rectangle.',
xy=(-5, 10),
xytext=(30, 40),
textcoords='offset points',
color='w',
ha='left',
bbox=dict(boxstyle='round,pad=.5', fc=(.1, .1, .1, .92),
ec=(1., 1., 1.), lw=1, zorder=1))

# Set id for the patches
for i, t in enumerate(ax.patches):
t.set_gid('patch_%d' % i)

Expand Down Expand Up @@ -85,7 +86,7 @@
el = xmlid['tooltip_%d' % i]
el.set('visibility', 'hidden')

# Assign onmouseover and onmouseout callbacks to patches.
# Assign onmouseover and onmouseout callbacks to patches.
for i, t in enumerate(ax.patches):
el = xmlid['patch_%d' % i]
el.set('onmouseover', "ShowTooltip(this)")
Expand All @@ -95,26 +96,26 @@
script = """
<script type="text/ecmascript">
<![CDATA[
function init(evt) {
if ( window.svgDocument == null ) {
svgDocument = evt.target.ownerDocument;
}
}
function ShowTooltip(obj) {
var cur = obj.id.slice(-1);
var tip = svgDocument.getElementById('tooltip_' + cur);
tip.setAttribute('visibility',"visible")
}
function HideTooltip(obj) {
var cur = obj.id.slice(-1);
var tip = svgDocument.getElementById('tooltip_' + cur);
tip.setAttribute('visibility',"hidden")
}
]]>
</script>
"""
Expand Down

0 comments on commit c714c74

Please sign in to comment.