Circular Charts

Pie Chart

using Vega

@vgplot(
    height=200,
    marks=[
        {
            encode={
                update={
                    innerRadius={
                        signal="innerRadius"
                    },
                    startAngle={
                        field="startAngle"
                    },
                    cornerRadius={
                        signal="cornerRadius"
                    },
                    padAngle={
                        signal="padAngle"
                    },
                    endAngle={
                        field="endAngle"
                    },
                    outerRadius={
                        signal="width / 2"
                    }
                },
                enter={
                    x={
                        signal="width / 2"
                    },
                    fill={
                        field="id",
                        scale="color"
                    },
                    y={
                        signal="height / 2"
                    }
                }
            },
            from={
                data="table"
            },
            type="arc"
        }
    ],
    data=[
        {
            name="table",
            values=[
                {
                    id=1,
                    field=4
                },
                {
                    id=2,
                    field=6
                },
                {
                    id=3,
                    field=10
                },
                {
                    id=4,
                    field=3
                },
                {
                    id=5,
                    field=7
                },
                {
                    id=6,
                    field=8
                }
            ],
            transform=[
                {
                    startAngle={
                        signal="startAngle"
                    },
                    sort={
                        signal="sort"
                    },
                    field="field",
                    endAngle={
                        signal="endAngle"
                    },
                    type="pie"
                }
            ]
        }
    ],
    scales=[
        {
            name="color",
            range={
                scheme="category20"
            },
            domain={
                data="table",
                field="id"
            },
            type="ordinal"
        }
    ],
    width=200,
    autosize="none",
    signals=[
        {
            name="startAngle",
            bind={
                step=0.01,
                max=6.29,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="endAngle",
            bind={
                step=0.01,
                max=6.29,
                min=0,
                input="range"
            },
            value=6.29
        },
        {
            name="padAngle",
            bind={
                max=0.1,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="innerRadius",
            bind={
                step=1,
                max=90,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="cornerRadius",
            bind={
                step=0.5,
                max=10,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="sort",
            bind={
                input="checkbox"
            },
            value=false
        }
    ]
)

Donut Chart

using Vega

@vgplot(
    height=200,
    marks=[
        {
            encode={
                update={
                    innerRadius={
                        signal="innerRadius"
                    },
                    startAngle={
                        field="startAngle"
                    },
                    cornerRadius={
                        signal="cornerRadius"
                    },
                    padAngle={
                        signal="padAngle"
                    },
                    endAngle={
                        field="endAngle"
                    },
                    outerRadius={
                        signal="width / 2"
                    }
                },
                enter={
                    x={
                        signal="width / 2"
                    },
                    fill={
                        field="id",
                        scale="color"
                    },
                    y={
                        signal="height / 2"
                    }
                }
            },
            from={
                data="table"
            },
            type="arc"
        }
    ],
    data=[
        {
            name="table",
            values=[
                {
                    id=1,
                    field=4
                },
                {
                    id=2,
                    field=6
                },
                {
                    id=3,
                    field=10
                },
                {
                    id=4,
                    field=3
                },
                {
                    id=5,
                    field=7
                },
                {
                    id=6,
                    field=8
                }
            ],
            transform=[
                {
                    startAngle={
                        signal="startAngle"
                    },
                    sort={
                        signal="sort"
                    },
                    field="field",
                    endAngle={
                        signal="endAngle"
                    },
                    type="pie"
                }
            ]
        }
    ],
    scales=[
        {
            name="color",
            range={
                scheme="category20"
            },
            domain={
                data="table",
                field="id"
            },
            type="ordinal"
        }
    ],
    width=200,
    autosize="none",
    signals=[
        {
            name="startAngle",
            bind={
                step=0.01,
                max=6.29,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="endAngle",
            bind={
                step=0.01,
                max=6.29,
                min=0,
                input="range"
            },
            value=6.29
        },
        {
            name="padAngle",
            bind={
                max=0.1,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="innerRadius",
            bind={
                step=1,
                max=90,
                min=0,
                input="range"
            },
            value=60
        },
        {
            name="cornerRadius",
            bind={
                step=0.5,
                max=10,
                min=0,
                input="range"
            },
            value=0
        },
        {
            name="sort",
            bind={
                input="checkbox"
            },
            value=false
        }
    ]
)

Radial Plot

using Vega

@vgplot(
    height=200,
    marks=[
        {
            encode={
                update={
                    fill={
                        value="#ccc"
                    }
                },
                hover={
                    fill={
                        value="pink"
                    }
                },
                enter={
                    innerRadius={
                        value=20
                    },
                    startAngle={
                        field="startAngle"
                    },
                    stroke={
                        value="#fff"
                    },
                    x={
                        mult=0.5,
                        field={
                            group="width"
                        }
                    },
                    endAngle={
                        field="endAngle"
                    },
                    outerRadius={
                        field="data",
                        scale="r"
                    },
                    y={
                        mult=0.5,
                        field={
                            group="height"
                        }
                    }
                }
            },
            from={
                data="table"
            },
            type="arc"
        },
        {
            encode={
                enter={
                    align={
                        value="center"
                    },
                    theta={
                        signal="(datum.startAngle + datum.endAngle)/2"
                    },
                    x={
                        mult=0.5,
                        field={
                            group="width"
                        }
                    },
                    radius={
                        offset=8,
                        field="data",
                        scale="r"
                    },
                    fill={
                        value="#000"
                    },
                    baseline={
                        value="middle"
                    },
                    text={
                        field="data"
                    },
                    y={
                        mult=0.5,
                        field={
                            group="height"
                        }
                    }
                }
            },
            from={
                data="table"
            },
            type="text"
        }
    ],
    data=[
        {
            name="table",
            values=[
                12,
                23,
                47,
                6,
                52,
                19
            ],
            transform=[
                {
                    field="data",
                    type="pie"
                }
            ]
        }
    ],
    scales=[
        {
            name="r",
            zero=true,
            range=[
                20,
                100
            ],
            domain={
                data="table",
                field="data"
            },
            type="sqrt"
        }
    ],
    width=200
)

Radar Chart

using Vega

@vgplot(
    height=400,
    padding=40,
    marks=[
        {
            name="categories",
            marks=[
                {
                    name="category-line",
                    encode={
                        enter={
                            stroke={
                                field="category",
                                scale="color"
                            },
                            interpolate={
                                value="linear-closed"
                            },
                            x={
                                signal="scale('radial', datum.value) * cos(scale('angular', datum.key))"
                            },
                            strokeWidth={
                                value=1
                            },
                            fillOpacity={
                                value=0.1
                            },
                            fill={
                                field="category",
                                scale="color"
                            },
                            y={
                                signal="scale('radial', datum.value) * sin(scale('angular', datum.key))"
                            }
                        }
                    },
                    from={
                        data="facet"
                    },
                    type="line"
                },
                {
                    name="value-text",
                    encode={
                        enter={
                            align={
                                value="center"
                            },
                            x={
                                signal="datum.x"
                            },
                            text={
                                signal="datum.datum.value"
                            },
                            baseline={
                                value="middle"
                            },
                            fill={
                                value="black"
                            },
                            y={
                                signal="datum.y"
                            }
                        }
                    },
                    from={
                        data="category-line"
                    },
                    type="text"
                }
            ],
            zindex=1,
            from={
                facet={
                    name="facet",
                    data="table",
                    groupby=[
                        "category"
                    ]
                }
            },
            type="group"
        },
        {
            name="radial-grid",
            encode={
                enter={
                    stroke={
                        value="lightgray"
                    },
                    x2={
                        signal="radius * cos(scale('angular', datum.key))"
                    },
                    x={
                        value=0
                    },
                    y2={
                        signal="radius * sin(scale('angular', datum.key))"
                    },
                    strokeWidth={
                        value=1
                    },
                    y={
                        value=0
                    }
                }
            },
            zindex=0,
            from={
                data="keys"
            },
            type="rule"
        },
        {
            name="key-label",
            encode={
                enter={
                    align=[
                        {
                            test="abs(scale('angular', datum.key)) > PI / 2",
                            value="right"
                        },
                        {
                            value="left"
                        }
                    ],
                    fontWeight={
                        value="bold"
                    },
                    x={
                        signal="(radius + 5) * cos(scale('angular', datum.key))"
                    },
                    text={
                        field="key"
                    },
                    baseline=[
                        {
                            test="scale('angular', datum.key) > 0",
                            value="top"
                        },
                        {
                            test="scale('angular', datum.key) == 0",
                            value="middle"
                        },
                        {
                            value="bottom"
                        }
                    ],
                    fill={
                        value="black"
                    },
                    y={
                        signal="(radius + 5) * sin(scale('angular', datum.key))"
                    }
                }
            },
            zindex=1,
            from={
                data="keys"
            },
            type="text"
        },
        {
            name="outer-line",
            encode={
                enter={
                    stroke={
                        value="lightgray"
                    },
                    interpolate={
                        value="linear-closed"
                    },
                    x={
                        field="x2"
                    },
                    strokeWidth={
                        value=1
                    },
                    y={
                        field="y2"
                    }
                }
            },
            from={
                data="radial-grid"
            },
            type="line"
        }
    ],
    encode={
        enter={
            x={
                signal="radius"
            },
            y={
                signal="radius"
            }
        }
    },
    data=[
        {
            name="table",
            values=[
                {
                    key="key-0",
                    value=19,
                    category=0
                },
                {
                    key="key-1",
                    value=22,
                    category=0
                },
                {
                    key="key-2",
                    value=14,
                    category=0
                },
                {
                    key="key-3",
                    value=38,
                    category=0
                },
                {
                    key="key-4",
                    value=23,
                    category=0
                },
                {
                    key="key-5",
                    value=5,
                    category=0
                },
                {
                    key="key-6",
                    value=27,
                    category=0
                },
                {
                    key="key-0",
                    value=13,
                    category=1
                },
                {
                    key="key-1",
                    value=12,
                    category=1
                },
                {
                    key="key-2",
                    value=42,
                    category=1
                },
                {
                    key="key-3",
                    value=13,
                    category=1
                },
                {
                    key="key-4",
                    value=6,
                    category=1
                },
                {
                    key="key-5",
                    value=15,
                    category=1
                },
                {
                    key="key-6",
                    value=8,
                    category=1
                }
            ]
        },
        {
            name="keys",
            source="table",
            transform=[
                {
                    groupby=[
                        "key"
                    ],
                    type="aggregate"
                }
            ]
        }
    ],
    scales=[
        {
            name="angular",
            padding=0.5,
            range={
                signal="[-PI, PI]"
            },
            domain={
                data="table",
                field="key"
            },
            type="point"
        },
        {
            name="radial",
            zero=true,
            nice=false,
            range={
                signal="[0, radius]"
            },
            domain={
                data="table",
                field="value"
            },
            domainMin=0,
            type="linear"
        },
        {
            name="color",
            range={
                scheme="category10"
            },
            domain={
                data="table",
                field="category"
            },
            type="ordinal"
        }
    ],
    width=400,
    autosize={
        contains="padding",
        type="none"
    },
    signals=[
        {
            name="radius",
            update="width / 2"
        }
    ]
)