This demonstrates the animation functions and the ability to visualize realtime data series. Note that a path is defined by a series of points onto which various interpolators can be applied. See also the line chart for a similar concept.

    
            var options = new TypeViz.SVG.CanvasOptions();
            options.Width = 1000;
            options.Height = 1000;
            canvas = new TypeViz.SVG.Canvas(div, options);
            var g = new TypeViz.SVG.Group();
            canvas.Append(g);
            var P = TypeViz.Point;
            var N = 20, spacing = 30;
            function MakePath() {
                var path = new SVG.Path();
                path.Background = "none";
                var interpolator = TypeViz.SVG.Interpolate({ 
                        Interpolator: TypeViz.SVG.Interpolators.LineStepInterpolator,
                        IsClosed: false });
                path.Interpolator = interpolator;
                path.Stroke = "White";
                path.Opacity = 0.6;
                var clip1 = MakeClip((N - 3) * spacing, 300);
                clip1.Position = new P(spacing, 0);
                path.Clip = clip1;
                return path;
            }
            function AssignPoints(path, first) {
                var to = [];
                for (var i = 0; i < N; i++) {
                    to.push(new P(i * spacing, 300 - TypeViz.Maths.RandomReal(50, 250)));
                }
                if (first) {
                    to[N - 3].Y = first[0].Y;
                    to[N - 2].Y = first[1].Y;
                    to[N - 1].Y = first[2].Y;
                }
                path.Points = to;
            }
            function MakeClip(width, height) {
                var rc = new TypeViz.SVG.Rectangle();
                rc.Width = width;
                rc.Height = height;
                var c = new TypeViz.SVG.ClipPath();
                c.Append(rc);
                canvas.AddClipPath(c); // just the way SVG works
                return c;
            }
            function FrameIt() {
                var rc = new TypeViz.SVG.Rectangle();
                rc.Width = (N - 2) * spacing;
                rc.Height = 300;
                rc.Background = "Transparent";
                rc.Stroke = "White";
                rc.CornerRadius = 4;
                canvas.Append(rc);
            }
            var path1 = MakePath();
            var path2 = MakePath();
            g.Append(path1);
            g.Append(path2);
            AssignPoints(path1);
            path2.Position = new P((-2 * N + 4) * spacing, 0);
            path1.Position = new P(-(N - 1) * spacing, 0);
            var clip = MakeClip((N - 2) * spacing, 300);
            g.Clip = clip;
            FrameIt();
            inter = setInterval(function () {
                path1.Position = new TypeViz.Point(path1.Position.X + 2, 0);
                path2.Position = new TypeViz.Point(path2.Position.X + 2, 0);
                if (path1.Position.X == -spacing) {
                    AssignPoints(path2, path1.Points);
                    if (path2.Position.X >= (N - 4) * spacing)
                        path2.Position = new P((-N + 2) * spacing, 0);
                }
                if (path2.Position.X == -spacing) {
                    AssignPoints(path1, path2.Points);
                    if (path1.Position.X >= (N - 4) * spacing)
                        path1.Position = new P((-N + 2) * spacing, 0);
                }
            }, 10);