tw2.d3

A bunch of cool widgets built on d3

Get this source from http://github.com/toscawidgets/tw2.d3

d3 itself can be found here: http://mbostock.github.com/d3/

BarChart
  • data
    • An OrderedDict of key-value pairs
  • width
    • Width of the chart in pixels.
  • height
    • Height of the chart in pixels.
  • padding
    • A list of ints [top, right, bottom, left]
  • interval
    • Redraw-interval in milliseconds.
class DemoBarChart(BarChart):
    width = 450
    height = 120
    # Top, Right, Bottom, Left
    padding = [30, 10, 10, 90]
    # The redraw interval (in milliseconds).
    interval = 1000
    data = collections.OrderedDict(
        oranges=42,
        kiwis=102,
        grapefruits=54,
        apples=21,
        bananas=63,
    )
    # This only gets called just before the widget is displayed
    def prepare(self):
        super(DemoBarChart, self).prepare()
        # Register a javascript call to a utility function that tw2.d3 provides
        # This one indicates that every element in the data should decay by a
        # certain halflife (2000ms), that function should be run every 1000ms,
        # and elements should just be removed if their value goes below a
        # certain epsilon (0.001)
        self.add_call(twc.js_function('tw2.d3.bar.schedule_halflife')(
            self.attrs['id'],
            2000,
            1000,
            0.001,
        ))
        # This registers another javascript callback that is just nice for
        # testing.  It schedules a callback that runs every 100 milliseconds
        # which adds random noise to the data elements.
        self.add_call(twc.js_function('tw2.d3.util.schedule_bump_random')(
            self.attrs['id'],
            100
        ))
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}></div>

TimeSeriesChart
  • data
    • An list of values in a timeseries.
  • width
    • Width of the chart in pixels.
  • height
    • Height of the chart in pixels.
  • padding
    • A list of ints [top, right, bottom, left]
  • interval
    • Redraw-interval in milliseconds.
  • n
    • Number of buckets.
  • duration
    • Number of seconds of data to display.
class DemoTimeSeriesChart(TimeSeriesChart):
    width = 570
    n = 200
    data = [random.random() for i in range(n)]
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}></div>

ChordDiagram
  • data
    • An OrderedDict of key-value pairs
  • width
    • Width of the chart in pixels.
  • height
    • Height of the chart in pixels.
  • padding
    • A list of ints [top, right, bottom, left]
  • radial_padding
    • Padding between the radial sections.
  • colors
    • A list of #RGB strings
  • interval
    • Redraw-interval in milliseconds.
class DemoChordDiagram(ChordDiagram):
    data = [
        [11975, 5871, 8916, 2868],
        [1951, 10048, 2060, 6171],
        [8010, 16145, 8090, 8045],
        [1013, 990, 940, 6907],
    ]
    colors = ["#000000", "#FFDD89", "#957244", "#F26223"]
<%namespace name="tw" module="tw2.core.mako_util"/>
<div ${tw.attrs(attrs=w.attrs)}></div>