SVG 히스토그램

범례 마커를 클릭하여 막대를 숨기거나 표시하는 대화형 히스토그램을 만드는 방법을 시연합니다.

상호 작용은 ecmascript(javascript)로 인코딩되고 후처리 단계에서 SVG 코드에 삽입됩니다. 이미지를 렌더링하려면 웹 브라우저에서 엽니다. SVG는 Linux 및 OSX 사용자가 사용하는 대부분의 웹 브라우저에서 지원됩니다. Windows IE9는 SVG를 지원하지만 이전 버전은 지원하지 않습니다.

참고

matplotlib 백엔드를 사용하면 각 개체에 ID를 할당할 수 있습니다. 이것은 Python에서 생성된 matplotlib 개체와 두 번째 단계에서 구문 분석되는 해당 SVG 구조를 연결하는 데 사용되는 메커니즘입니다. 유연하지만 ID는 대규모 개체 컬렉션에 사용하기 번거롭습니다. 두 가지 메커니즘을 사용하여 단순화할 수 있습니다.

• 객체를 SVG <g> 태그로 체계적으로 그룹화,

• 원본에 따라 각 SVG 개체에 클래스를 할당합니다.

예를 들어 각 개별 막대의 속성을 수정하는 대신 hist함수의 막대를 PatchCollection으로 그룹화하거나 class="hist_##" 특성을 할당할 수 있습니다.

CSS는 또한 생성된 SVG 전체에서 반복적인 마크업을 대체하기 위해 보다 광범위하게 사용될 수 있습니다.

저자: 데이비드 . hhard @ gmail . com

import numpy as np
import matplotlib.pyplot as plt
import xml.etree.ElementTree as ET
from io import BytesIO
import json


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['hist_%d' % ic] = []
    for il, element in enumerate(c):
        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
for i, t in enumerate(leg.get_patches()):
    t.set_gid('leg_patch_%d' % i)

# Set ids for the text patches
for i, t in enumerate(leg.get_texts()):
    t.set_gid('leg_text_%d' % 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['leg_patch_%d' % 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['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
# 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")