Wheel charts, arcs, segments and pie charts are easily created. While other libraries give you ready-made controls, TypeViz focuses on algorithms, visualization factories and the ability to combine visual elements in unique and expressive data visualizations.

    var options = new SVG.CanvasOptions();
    options.Width = 1000;
    options.Height = 500;
    canvas = new SVG.Canvas(div, options);
    var g = new SVG.Group();
    g.Position = new TypeViz.Point(100, 50);
    canvas.Append(g);
    var frame = new TypeViz.SVG.Rectangle();
    frame.Stroke = "White";
    frame.Background = "Transparent";
    frame.CornerRadius = 5;
    frame.Height = 400;
    frame.Width = 700;
    g.Append(frame);
    var model = [];
    for (var i = 0; i < 10; i++) {
        model.push({
            Id: i,
            Weight: TypeViz.Maths.RandomReal(10, 100)
        });
    }
    var wheel = new TypeViz.Controls.WheelChart(model);
    wheel.InnerRadius = 20;
    wheel.OuterRadius = 100;
    g.Append(wheel);
    wheel.Position = new TypeViz.Point(200, 200);
    model = [];
    for (var i = 0; i < 20; i++) {
        model.push({
            Id: i,
            Weight: TypeViz.Maths.RandomReal(10, 100)
        });
    }
    wheel = new TypeViz.Controls.WheelChart(model);
    wheel.ColorFunction = function(d, i) { return TypeViz.Media.Colors.RandomGreen.AsHex6; };
    wheel.InnerRadius = 100;
    wheel.OuterRadius = 150;
    g.Append(wheel);
    wheel.Position = new TypeViz.Point(200, 200);
    for (var i = 0; i < 5; i++) {
        var r1 = new TypeViz.SVG.Arc();
        r1.InnerRadius = 150 + i*50;
        r1.OuterRadius = 200 + i*50;
        r1.StartAngle = Math.PI / 2 - Math.PI / 20;
        r1.EndAngle = Math.PI / 2 + Math.PI / 20;
        r1.Background = TypeViz.Media.Colors.RandomGray;
        r1.StrokeThickness = 1;
        r1.Stroke = "Transparent";
        r1.Transform(new TypeViz.SVG.Translation(200, 200));
        g.Append(r1);
    }