
.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "gallery/user_interfaces/svg_histogram_sgskip.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. meta::
        :keywords: codex

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_gallery_user_interfaces_svg_histogram_sgskip.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_gallery_user_interfaces_svg_histogram_sgskip.py:


=============
SVG Histogram
=============

Demonstrate how to create an interactive histogram, in which bars
are hidden or shown by clicking 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
macOS 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
the corresponding SVG constructs that are parsed in the second step.
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,
* assigning classes to each SVG object according to its origin.

For example, instead of modifying the properties of each individual bar,
the bars from the `~.pyplot.hist` function could either be grouped in
a PatchCollection, or be assigned a class="hist_##" attribute.

CSS could also be used more extensively to replace repetitive markup
throughout the generated SVG.

Author: david.huard@gmail.com

.. GENERATED FROM PYTHON SOURCE LINES 35-160

.. code-block:: Python



    from io import BytesIO
    import json
    import xml.etree.ElementTree as ET

    import matplotlib.pyplot as plt
    import numpy as np

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

    # Apparently, this `register_namespace` method is necessary to avoid garbling
    # the XML namespace with ns0.
    ET.register_namespace("", "http://www.w3.org/2000/svg")

    # Fixing random state for reproducibility
    np.random.seed(19680801)

    # --- Create histogram, legend and title ---
    plt.figure()
    r = np.random.randn(100)
    r1 = r + 1
    labels = ['Rabbits', 'Frogs']
    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\n"
              "marker to toggle the corresponding histogram.")


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

    hist_patches = {}
    for ic, c in enumerate(containers):
        hist_patches[f'hist_{ic}'] = []
        for il, element in enumerate(c):
            element.set_gid(f'hist_{ic}_patch_{il}')
            hist_patches[f'hist_{ic}'].append(f'hist_{ic}_patch_{il}')

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

    # Set ids for the text patches
    for i, t in enumerate(leg.get_texts()):
        t.set_gid(f'leg_text_{i}')

    # Save SVG in a fake file object.
    f = BytesIO()
    plt.savefig(f, format="svg")

    # Create XML tree from the SVG file.
    tree, xmlid = ET.XMLID(f.getvalue())


    # --- Add interactivity ---

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

    # Add attributes to the text objects.
    for i, t in enumerate(leg.get_texts()):
        el = xmlid[f'leg_text_{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
    # visibility attribute of all patches of each histogram and the opacity
    # of the marker itself.

    script = """
    <script type="text/ecmascript">
    <![CDATA[
    var container = %s

    function toggle(oid, attribute, values) {
        /* Toggle the style attribute of an object between two values.

        Parameters
        ----------
        oid : str
          Object identifier.
        attribute : str
          Name of style attribute.
        values : [on state, off state]
          The two values that are switched between.
        */
        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])
        };
        }
    ]]>
    </script>
    """ % json.dumps(hist_patches)

    # Add a transition effect
    css = tree.find('.//{http://www.w3.org/2000/svg}style')
    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))

    ET.ElementTree(tree).write("svg_histogram.svg")


.. _sphx_glr_download_gallery_user_interfaces_svg_histogram_sgskip.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: svg_histogram_sgskip.ipynb <svg_histogram_sgskip.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: svg_histogram_sgskip.py <svg_histogram_sgskip.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: svg_histogram_sgskip.zip <svg_histogram_sgskip.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_
