tw2.protovis.custom

A bunch of cool widgets from protovis (under the 'custom' heading in their examples page).

Get this source from http://github.com/ralphbean/tw2.protovis.custom

Protovis itself can be found here: http://vis.stanford.edu/protovis/

SparkLine
A sparkline is a word-sized data visualization, allowing visual representations of data to be embedded directly in prose. This avoids any interruption in the flow of text, with the data presented in descriptive context. Sparklines can be used where space is limited, unlike standalone figures.
  • pvcls
    • None
  • p_width
    • The width of the panel, in pixel.
  • p_height
    • The height of the panel, in pixels.
  • p_bottom
    • The bottom margin, in pixels.
  • p_top
    • The top margin, in pixels.
  • p_left
    • The left margin, in pixels.
  • p_right
    • The right margin, in pixels.
  • init_js
    • JSSymbol
  • p_dots
    • dots
class DemoSparkLine(SparkLine):
    p_height = 10
    p_data = [
          40, 115, 100, 80, 60, 40, 23, 10, 10, 25, 75, 145,
          130, 130, 80, 65, 20, 10, 5, 10, 60, 190, 180, 175,
          120, 50, 35, 20, 10, 15, 30, 60, 105, 105, 105, 80, 65
    ]
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}>
<script type="text/javascript+protovis">
${w.init_js.src}
var vis = new pv.Panel()
% for f in w._pv_prop_funcs:
	${f.src}
% endfor
% for a in w._adds:
${a.display()}
% endfor
vis.render();
</script>
</div>

SparkBar
A sparkbar is just like a sparkline, but,... you know.
  • pvcls
    • None
  • p_width
    • The width of the panel, in pixel.
  • p_height
    • The height of the panel, in pixels.
  • p_bottom
    • The bottom margin, in pixels.
  • p_top
    • The top margin, in pixels.
  • p_left
    • The left margin, in pixels.
  • p_right
    • The right margin, in pixels.
  • init_js
    • JSSymbol
  • p_margin
    • Integer margin between bars.
class DemoSparkBar(SparkBar):
    p_height = 10
    p_data = [0.2, 0.3, 0.6, 0.1, 0.9, 0.8, 0.23, 0.77, 0.63, 0.43, 0.59, 0.11]
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}>
<script type="text/javascript+protovis">
${w.init_js.src}
var vis = new pv.Panel()
% for f in w._pv_prop_funcs:
	${f.src}
% endfor
% for a in w._adds:
${a.display()}
% endfor
vis.render();
</script>
</div>

StreamGraph
Streamgraphs are a generalization of stacked area graphs where the baseline is free. By shifting the baseline, it is possible to minimize the change in slope (or "wiggle") in individual series, thereby making it easier to perceive the thickness of any given layer across the data. Byron & Wattenberg describe several streamgraph algorithms in "Stacked Graphs--Geometry & Aesthetics", several of which are implemented by pv.Layout.Stack.
  • pvcls
    • None
  • p_width
    • The width of the panel, in pixel.
  • p_height
    • The height of the panel, in pixels.
  • p_bottom
    • The bottom margin, in pixels.
  • p_top
    • The top margin, in pixels.
  • p_left
    • The left margin, in pixels.
  • p_right
    • The right margin, in pixels.
  • init_js
    • JSSymbol
class DemoStreamGraph(StreamGraph):
    def layers(n, m):
        """ Just a toy data generator for the demo """
        def bump(a):
            x = 1.0 / (.1 + random.random())
            y = 2.0 * random.random() - 0.5
            z = 10.0 / (0.1 + random.random())
            for i in range(m):
                w = (float(i) / m - y) * z
                a[i] += x * math.exp(-w * w)
            return a
        def f(*args):
            a = [0] * m
            for i in range(5):
                a = bump(a)
            return a
        return map(f, range(n))
    def waves(n, m):
        """ Another toy data generator """
        def f(i, j):
            x = 20 * j / m - i / 3
            if x > 0:
                return 2 * x * math.exp(x * -0.5)
            return 0
        return map(lambda i : map(lambda j : f(i, j), range(m)), range(n))
    # Actually use the 'layers' data
    p_data = layers(20, 400)
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}>
<script type="text/javascript+protovis">
${w.init_js.src}
var vis = new pv.Panel()
% for f in w._pv_prop_funcs:
	${f.src}
% endfor
% for a in w._adds:
${a.display()}
% endfor
vis.render();
</script>
</div>

BubbleChart