TypeViz incorporates a whole range of MVC/MVVM type of patterns which alleviate the problem of binding data dynamically to visuals. This sample shows the so-called 'factory' which defines the visual, the underlying data and the the way data-changes affect the visuals.

    var options = new SVG.CanvasOptions();
    options.Width = 1000;
    options.Height = 1000;
    canvas = new SVG.Canvas(div, options);
    var mod = new TypeViz.ModelBase();
    mod.Update = function () {
        mod.Radii = TypeViz.Maths.RandomIntegerArray(15, 5, 80);
        mod.RaiseChanged();
    };
    mod.Update();
    canvas.DataContext = mod;
    var factory = [
        {
            accessor: function (m) {
                return m.Radii;
            },
            creator: function (d, i, series) {
                var circle = new TypeViz.SVG.Circle(new TypeViz.Point(50 + i * 50, 300));
                circle.Background = TypeViz.Media.Colors.RandomBlue;
                circle.Opacity = .6;
                return circle;
            },
            binders: function (c, i) {
                c.Bind("Radius", function (m) {
                    c.Change({Radius: m.Radii[i]}).Play();
                });
            }
        },
        {
            accessor: function (m) {
                return m.Radii;
            },
            creator: function (d, i, series) {
                var tb = new TypeViz.SVG.TextBlock();
                tb.Position = new TypeViz.Point(50 + i * 50, 370);
                tb.Anchor = TypeViz.SVG.TextAnchor.Center;
                tb.dx = 15;
                return tb;
            },
            binders: function (c, i) {
                c.Bind("Text", function (m) {
                    return m.Radii[i];
                });
            }
        }
    ];
    canvas.Define(factory);
    var gauge = new TypeViz.SVG.Path();
    canvas.Append(gauge);
    var arrow = TypeViz.SVG.Markers.ArrowEnd;
    canvas.AddMarker(arrow);
    gauge.MarkerEnd = arrow;
    function GaugePoints() {
        var ps = [];
        var currentValue = new TypeViz.Point(TypeViz.Maths.RandomInteger(60, 750), 380);
        ps.push(currentValue);
        ps.push(new TypeViz.Point(currentValue.X, currentValue.Y + 30));
        ps.push(new TypeViz.Point(800, currentValue.Y + 30));
        return ps;
    }
    gauge.Points = GaugePoints();
    gauge.Bind("Points", function (m) { gauge.Change({ Data: GaugePoints() }).Play(); });
    setInterval(function () {
        mod.Update();
    }, 3000);