Scatter Plots

Scatter Plot

using Vega, VegaDatasets

@vgplot(
    height=200,
    padding=5,
    marks=[
        {
            name="marks",
            encode={
                update={
                    shape={
                        value="circle"
                    },
                    stroke={
                        value="#4682b4"
                    },
                    x={
                        field="Horsepower",
                        scale="x"
                    },
                    strokeWidth={
                        value=2
                    },
                    size={
                        field="Acceleration",
                        scale="size"
                    },
                    fill={
                        value="transparent"
                    },
                    opacity={
                        value=0.5
                    },
                    y={
                        field="Miles_per_Gallon",
                        scale="y"
                    }
                }
            },
            from={
                data="source"
            },
            type="symbol"
        }
    ],
    axes=[
        {
            domain=false,
            tickCount=5,
            grid=true,
            title="Horsepower",
            scale="x",
            orient="bottom"
        },
        {
            domain=false,
            grid=true,
            titlePadding=5,
            title="Miles_per_Gallon",
            scale="y",
            orient="left"
        }
    ],
    data=[
        {
            name="source",
            values=dataset("cars"),
            transform=[
                {
                    expr="datum['Horsepower'] != null && datum['Miles_per_Gallon'] != null && datum['Acceleration'] != null",
                    type="filter"
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            nice=true,
            zero=true,
            range="width",
            domain={
                data="source",
                field="Horsepower"
            },
            type="linear",
            round=true
        },
        {
            name="y",
            nice=true,
            zero=true,
            range="height",
            domain={
                data="source",
                field="Miles_per_Gallon"
            },
            type="linear",
            round=true
        },
        {
            name="size",
            nice=false,
            zero=true,
            range=[
                4,
                361
            ],
            domain={
                data="source",
                field="Acceleration"
            },
            type="linear",
            round=true
        }
    ],
    width=200,
    legends=[
        {
            symbolOpacity=0.5,
            format="s",
            symbolStrokeWidth=2,
            title="Acceleration",
            size="size",
            symbolStrokeColor="#4682b4",
            symbolType="circle"
        }
    ]
)
050100150200Horsepower05101520253035404550Miles_per_Gallon05101520Acceleration

Scatter Plot Null Values

using Vega, VegaDatasets

@vgplot(
    height=450,
    padding=5,
    marks=[
        {
            encode={
                update={
                    x={
                        field={
                            signal="xField"
                        },
                        scale="xscale"
                    },
                    zindex={
                        value=0
                    },
                    fillOpacity={
                        value=0.5
                    },
                    fill={
                        value="steelblue"
                    },
                    y={
                        field={
                            signal="yField"
                        },
                        scale="yscale"
                    }
                },
                hover={
                    zindex={
                        value=1
                    },
                    fillOpacity={
                        value=1
                    },
                    fill={
                        value="firebrick"
                    }
                },
                enter={
                    tooltip={
                        field="tooltip"
                    },
                    size={
                        value=50
                    }
                }
            },
            from={
                data="valid"
            },
            type="symbol"
        },
        {
            encode={
                update={
                    x={
                        field={
                            signal="xField"
                        },
                        scale="xscale"
                    },
                    fillOpacity={
                        value=0.2
                    },
                    fill={
                        value="#aaa"
                    },
                    y={
                        signal="height - nullSize/2"
                    }
                },
                hover={
                    fillOpacity={
                        value=1
                    },
                    fill={
                        value="firebrick"
                    }
                },
                enter={
                    tooltip={
                        field="tooltip"
                    },
                    size={
                        value=50
                    }
                }
            },
            from={
                data="nullY"
            },
            type="symbol"
        },
        {
            encode={
                update={
                    x={
                        signal="nullSize/2"
                    },
                    zindex={
                        value=0
                    },
                    fillOpacity={
                        value=0.2
                    },
                    fill={
                        value="#aaa"
                    },
                    y={
                        field={
                            signal="yField"
                        },
                        scale="yscale"
                    }
                },
                hover={
                    zindex={
                        value=1
                    },
                    fillOpacity={
                        value=1
                    },
                    fill={
                        value="firebrick"
                    }
                },
                enter={
                    tooltip={
                        field="tooltip"
                    },
                    size={
                        value=50
                    }
                }
            },
            from={
                data="nullX"
            },
            type="symbol"
        },
        {
            encode={
                update={
                    align={
                        value="right"
                    },
                    x={
                        offset=-4,
                        signal="nullSize"
                    },
                    fontSize={
                        value=9
                    },
                    text={
                        signal="datum.count + ' null'"
                    },
                    baseline={
                        value="top"
                    },
                    fill={
                        value="#999"
                    },
                    y={
                        offset=13,
                        signal="height"
                    }
                }
            },
            interactive=false,
            from={
                data="nullXY"
            },
            type="text"
        }
    ],
    axes=[
        {
            format="s",
            offset=5,
            title={
                signal="xField"
            },
            scale="xscale",
            orient="bottom"
        },
        {
            format="s",
            offset=5,
            title={
                signal="yField"
            },
            scale="yscale",
            orient="left"
        }
    ],
    data=[
        {
            name="movies",
            values=dataset("movies"),
            transform=[
                {
                    as="tooltip",
                    expr="datum.Title + ' (' + (year(datum.Release_Date) || '?') + ')'",
                    type="formula"
                }
            ]
        },
        {
            name="valid",
            source="movies",
            transform=[
                {
                    expr="datum[xField] != null && datum[yField] != null",
                    type="filter"
                }
            ]
        },
        {
            name="nullXY",
            source="movies",
            transform=[
                {
                    expr="datum[xField] == null && datum[yField] == null",
                    type="filter"
                },
                {
                    type="aggregate"
                }
            ]
        },
        {
            name="nullY",
            source="movies",
            transform=[
                {
                    expr="datum[xField] != null && datum[yField] == null",
                    type="filter"
                }
            ]
        },
        {
            name="nullX",
            source="movies",
            transform=[
                {
                    expr="datum[xField] == null && datum[yField] != null",
                    type="filter"
                }
            ]
        }
    ],
    scales=[
        {
            name="yscale",
            nice=true,
            range=[
                {
                    signal="height - nullGap"
                },
                0
            ],
            domain={
                data="valid",
                field={
                    signal="yField"
                }
            },
            type="linear"
        },
        {
            name="xscale",
            nice=true,
            range=[
                {
                    signal="nullGap"
                },
                {
                    signal="width"
                }
            ],
            domain={
                data="valid",
                field={
                    signal="xField"
                }
            },
            type="linear"
        }
    ],
    width=450,
    autosize={
        type="fit",
        resize=true
    },
    signals=[
        {
            name="yField",
            bind={
                options=[
                    "IMDB_Rating",
                    "Rotten_Tomatoes_Rating",
                    "US_Gross",
                    "Worldwide_Gross"
                ],
                input="select"
            },
            value="IMDB_Rating"
        },
        {
            name="xField",
            bind={
                options=[
                    "IMDB_Rating",
                    "Rotten_Tomatoes_Rating",
                    "US_Gross",
                    "Worldwide_Gross"
                ],
                input="select"
            },
            value="Rotten_Tomatoes_Rating"
        },
        {
            name="nullSize",
            value=8
        },
        {
            name="nullGap",
            update="nullSize + 10"
        }
    ]
)
0102030405060708090100Rotten_Tomatoes_Rating012345678910IMDB_Rating152 null

Connected Scatter Plot

using Vega, VegaDatasets

@vgplot(
    height=500,
    padding=5,
    marks=[
        {
            encode={
                enter={
                    stroke={
                        value="#000"
                    },
                    interpolate={
                        value="cardinal"
                    },
                    x={
                        field="miles",
                        scale="x"
                    },
                    strokeWidth={
                        value=3
                    },
                    y={
                        field="gas",
                        scale="y"
                    }
                }
            },
            from={
                data="drive"
            },
            type="line"
        },
        {
            encode={
                enter={
                    stroke={
                        value="#000"
                    },
                    x={
                        field="miles",
                        scale="x"
                    },
                    strokeWidth={
                        value=1
                    },
                    size={
                        value=49
                    },
                    fill={
                        value="#fff"
                    },
                    y={
                        field="gas",
                        scale="y"
                    }
                }
            },
            from={
                data="drive"
            },
            type="symbol"
        },
        {
            encode={
                enter={
                    align={
                        field="side",
                        scale="align"
                    },
                    x={
                        field="miles",
                        scale="x"
                    },
                    dy={
                        field="side",
                        scale="dy"
                    },
                    dx={
                        field="side",
                        scale="dx"
                    },
                    fill={
                        value="#000"
                    },
                    text={
                        field="year"
                    },
                    baseline={
                        field="side",
                        scale="base"
                    },
                    y={
                        field="gas",
                        scale="y"
                    }
                }
            },
            from={
                data="drive"
            },
            type="text"
        }
    ],
    config={
        axis={
            labelFontSize=12,
            domain=false,
            labelFontWeight="bold",
            tickSize=0
        }
    },
    axes=[
        {
            tickCount=5,
            grid=true,
            scale="x",
            orient="top"
        },
        {
            labels=false,
            title="Miles driven per capita each year",
            scale="x",
            orient="bottom",
            ticks=false
        },
        {
            format="\$0.2f",
            tickCount=5,
            grid=true,
            scale="y",
            orient="left"
        },
        {
            labels=false,
            title="Price of a gallon of gasoline (adjusted for inflation)",
            scale="y",
            orient="right",
            ticks=false
        }
    ],
    data=[:drive=>dataset("driving")],
    scales=[
        {
            name="x",
            nice=true,
            zero=false,
            range="width",
            domain={
                data="drive",
                field="miles"
            },
            type="linear",
            round=true
        },
        {
            name="y",
            nice=true,
            zero=false,
            range="height",
            domain={
                data="drive",
                field="gas"
            },
            type="linear",
            round=true
        },
        {
            name="align",
            range=[
                "right",
                "left",
                "center",
                "center"
            ],
            domain=[
                "left",
                "right",
                "top",
                "bottom"
            ],
            type="ordinal"
        },
        {
            name="base",
            range=[
                "middle",
                "middle",
                "bottom",
                "top"
            ],
            domain=[
                "left",
                "right",
                "top",
                "bottom"
            ],
            type="ordinal"
        },
        {
            name="dx",
            range=[
                -7,
                6,
                0,
                0
            ],
            domain=[
                "left",
                "right",
                "top",
                "bottom"
            ],
            type="ordinal"
        },
        {
            name="dy",
            range=[
                1,
                1,
                -5,
                6
            ],
            domain=[
                "left",
                "right",
                "top",
                "bottom"
            ],
            type="ordinal"
        }
    ],
    width=800
)
4,0005,0006,0007,0008,0009,00010,000Miles driven per capita each year$1.50$2.00$2.50$3.00Price of a gallon of gasoline (adjusted for inflation)1956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010

Error Bars

using Vega, VegaDatasets

@vgplot(
    height=160,
    padding=5,
    marks=[
        {
            encode={
                update={
                    x2={
                        signal="datum[measure+'1']",
                        scale="xscale"
                    },
                    x={
                        signal="datum[measure+'0']",
                        scale="xscale"
                    },
                    y={
                        field="variety",
                        scale="yscale",
                        band=0.5
                    }
                },
                enter={
                    height={
                        value=1
                    },
                    fill={
                        value="black"
                    }
                }
            },
            from={
                data="summary"
            },
            type="rect"
        },
        {
            encode={
                update={
                    x={
                        field="mean",
                        scale="xscale"
                    },
                    y={
                        field="variety",
                        scale="yscale",
                        band=0.5
                    }
                },
                enter={
                    size={
                        value=40
                    },
                    fill={
                        value="black"
                    }
                }
            },
            from={
                data="summary"
            },
            type="symbol"
        }
    ],
    config={
        axisBand={
            tickOffset=0,
            tickExtra=true,
            bandPosition=1
        }
    },
    axes=[
        {
            zindex=1,
            title="Barley Yield",
            scale="xscale",
            orient="bottom"
        },
        {
            tickCount=5,
            zindex=1,
            scale="yscale",
            orient="left"
        }
    ],
    data=[
        :barley=>dataset("barley"),
        {
            name="summary",
            source="barley",
            transform=[
                {
                    fields=[
                        "yield",
                        "yield",
                        "yield",
                        "yield",
                        "yield",
                        "yield",
                        "yield"
                    ],
                    ops=[
                        "mean",
                        "stdev",
                        "stderr",
                        "ci0",
                        "ci1",
                        "q1",
                        "q3"
                    ],
                    as=[
                        "mean",
                        "stdev",
                        "stderr",
                        "ci0",
                        "ci1",
                        "iqr0",
                        "iqr1"
                    ],
                    groupby=[
                        "variety"
                    ],
                    type="aggregate"
                },
                {
                    as="stdev0",
                    expr="datum.mean - datum.stdev",
                    type="formula"
                },
                {
                    as="stdev1",
                    expr="datum.mean + datum.stdev",
                    type="formula"
                },
                {
                    as="stderr0",
                    expr="datum.mean - datum.stderr",
                    type="formula"
                },
                {
                    as="stderr1",
                    expr="datum.mean + datum.stderr",
                    type="formula"
                }
            ]
        }
    ],
    scales=[
        {
            name="yscale",
            range="height",
            domain={
                sort={
                    order="descending",
                    field="mean",
                    op="max"
                },
                data="summary",
                field="variety"
            },
            type="band"
        },
        {
            name="xscale",
            zero=false,
            nice=true,
            range="width",
            domain={
                fields=[
                    "stdev0",
                    "stdev1"
                ],
                data="summary"
            },
            type="linear",
            round=true
        }
    ],
    width=500,
    signals=[
        {
            name="errorMeasure",
            bind={
                options=[
                    "95% Confidence Interval",
                    "Standard Error",
                    "Standard Deviation",
                    "Interquartile Range"
                ],
                input="select"
            },
            value="95% Confidence Interval"
        },
        {
            name="lookup",
            value={
                var"95% Confidence Interval"="ci",
                var"Standard Deviation"="stdev",
                var"Interquartile Range"="iqr",
                var"Standard Error"="stderr"
            }
        },
        {
            name="measure",
            update="lookup[errorMeasure]"
        }
    ]
)
2025303540455055Barley YieldTrebiWisconsin No. 38No. 457No. 462PeatlandGlabronVelvetNo. 475ManchuriaSvansota

Barley Trellis Plot

using Vega, VegaDatasets

@vgplot(
    padding=5,
    marks=[
        {
            name="site",
            marks=[
                {
                    encode={
                        enter={
                            stroke={
                                field="year",
                                scale="cscale"
                            },
                            x={
                                field="yield",
                                scale="xscale"
                            },
                            strokeWidth={
                                value=2
                            },
                            size={
                                value=50
                            },
                            y={
                                field="variety",
                                scale="yscale"
                            }
                        }
                    },
                    from={
                        data="sites"
                    },
                    type="symbol"
                }
            ],
            encode={
                enter={
                    height={
                        signal="cellHeight"
                    },
                    stroke={
                        value="#ccc"
                    },
                    width={
                        signal="width"
                    },
                    y={
                        offset={
                            signal="offset"
                        },
                        field="site",
                        scale="gscale"
                    }
                }
            },
            axes=[
                {
                    domain=false,
                    encode={
                        grid={
                            enter={
                                strokeDash={
                                    value=[
                                        3,
                                        3
                                    ]
                                }
                            }
                        }
                    },
                    grid=true,
                    scale="yscale",
                    orient="left",
                    tickSize=0
                },
                {
                    domain=false,
                    scale="yscale",
                    orient="right",
                    tickSize=0
                }
            ],
            scales=[
                {
                    name="yscale",
                    padding=1,
                    range=[
                        0,
                        {
                            signal="cellHeight"
                        }
                    ],
                    domain={
                        sort={
                            order="descending",
                            field="yield",
                            op="median"
                        },
                        data="barley",
                        field="variety"
                    },
                    type="point",
                    round=true
                }
            ],
            from={
                facet={
                    name="sites",
                    data="barley",
                    groupby="site"
                }
            },
            type="group"
        },
        {
            encode={
                enter={
                    fontWeight={
                        value="bold"
                    },
                    align={
                        value="center"
                    },
                    x={
                        mult=0.5,
                        field="width"
                    },
                    fontSize={
                        value=11
                    },
                    text={
                        field="datum.site"
                    },
                    baseline={
                        value="bottom"
                    },
                    fill={
                        value="#000"
                    },
                    y={
                        field="y"
                    }
                }
            },
            from={
                data="site"
            },
            type="text"
        }
    ],
    axes=[
        {
            zindex=1,
            scale="xscale",
            orient="bottom"
        }
    ],
    data=[:barley=>dataset("barley")],
    scales=[
        {
            name="gscale",
            range=[
                0,
                {
                    signal="height"
                }
            ],
            domain={
                sort={
                    order="descending",
                    field="yield",
                    op="median"
                },
                data="barley",
                field="site"
            },
            type="band",
            round=true
        },
        {
            name="xscale",
            nice=true,
            range="width",
            domain={
                data="barley",
                field="yield"
            },
            type="linear",
            round=true
        },
        {
            name="cscale",
            range="category",
            domain={
                data="barley",
                field="year"
            },
            type="ordinal"
        }
    ],
    width=200,
    signals=[
        {
            name="offset",
            value=15
        },
        {
            name="cellHeight",
            value=100
        },
        {
            name="height",
            update="6 * (offset + cellHeight)"
        }
    ],
    legends=[
        {
            stroke="cscale",
            padding=4,
            encode={
                symbols={
                    enter={
                        strokeWidth={
                            value=2
                        },
                        size={
                            value=50
                        }
                    }
                }
            },
            title="Year"
        }
    ]
)
TrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaTrebiWisconsin No. 38No. 457GlabronPeatlandVelvetNo. 475ManchuriaNo. 462SvansotaUniversity FarmWasecaMorrisCrookstonGrand RapidsDuluth19311932Year0510152025303540455055606570

Regression

using Vega, VegaDatasets

@vgplot(
    height=500,
    padding=5,
    marks=[
        {
            encode={
                enter={
                    x={
                        field="Rotten_Tomatoes_Rating",
                        scale="x"
                    },
                    fillOpacity={
                        value=0.5
                    },
                    size={
                        value=16
                    },
                    y={
                        field="IMDB_Rating",
                        scale="y"
                    }
                }
            },
            from={
                data="movies"
            },
            type="symbol"
        },
        {
            marks=[
                {
                    encode={
                        enter={
                            stroke={
                                value="firebrick"
                            },
                            x={
                                field="u",
                                scale="x"
                            },
                            y={
                                field="v",
                                scale="y"
                            }
                        }
                    },
                    from={
                        data="curve"
                    },
                    type="line"
                }
            ],
            from={
                facet={
                    name="curve",
                    data="trend",
                    groupby="Major_Genre"
                }
            },
            type="group"
        }
    ],
    data=[
        {
            name="movies",
            values=dataset("movies"),
            transform=[
                {
                    expr="datum.Rotten_Tomatoes_Rating != null && datum.IMDB_Rating != null",
                    type="filter"
                }
            ]
        },
        {
            name="trend",
            source="movies",
            transform=[
                {
                    method={
                        signal="method"
                    },
                    order={
                        signal="polyOrder"
                    },
                    x="Rotten_Tomatoes_Rating",
                    as=[
                        "u",
                        "v"
                    ],
                    groupby=[
                        {
                            signal="groupby === 'genre' ? 'Major_Genre' : 'foo'"
                        }
                    ],
                    type="regression",
                    extent={
                        signal="domain('x')"
                    },
                    y="IMDB_Rating"
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            range="width",
            domain={
                data="movies",
                field="Rotten_Tomatoes_Rating"
            },
            type="linear"
        },
        {
            name="y",
            range="height",
            domain={
                data="movies",
                field="IMDB_Rating"
            },
            type="linear"
        }
    ],
    width=500,
    autosize="pad",
    signals=[
        {
            name="method",
            bind={
                options=[
                    "linear",
                    "log",
                    "exp",
                    "pow",
                    "quad",
                    "poly"
                ],
                input="select"
            },
            value="linear"
        },
        {
            name="polyOrder",
            bind={
                step=1,
                max=10,
                min=1,
                input="range"
            },
            value=3
        },
        {
            name="groupby",
            bind={
                options=[
                    "none",
                    "genre"
                ],
                input="select"
            },
            value="none"
        }
    ]
)

Loess Regression

using Vega, VegaDatasets

@vgplot(
    height=500,
    padding=5,
    marks=[
        {
            encode={
                enter={
                    x={
                        field="Rotten_Tomatoes_Rating",
                        scale="x"
                    },
                    fillOpacity={
                        value=0.5
                    },
                    size={
                        value=16
                    },
                    y={
                        field="IMDB_Rating",
                        scale="y"
                    }
                }
            },
            from={
                data="movies"
            },
            type="symbol"
        },
        {
            marks=[
                {
                    encode={
                        enter={
                            stroke={
                                value="firebrick"
                            },
                            x={
                                field="u",
                                scale="x"
                            },
                            y={
                                field="v",
                                scale="y"
                            }
                        }
                    },
                    from={
                        data="curve"
                    },
                    type="line"
                }
            ],
            from={
                facet={
                    name="curve",
                    data="trend",
                    groupby="Major_Genre"
                }
            },
            type="group"
        }
    ],
    data=[
        {
            name="movies",
            values=dataset("movies"),
            transform=[
                {
                    expr="datum.Rotten_Tomatoes_Rating != null && datum.IMDB_Rating != null",
                    type="filter"
                }
            ]
        },
        {
            name="trend",
            source="movies",
            transform=[
                {
                    bandwidth={
                        signal="loessBandwidth"
                    },
                    x="Rotten_Tomatoes_Rating",
                    as=[
                        "u",
                        "v"
                    ],
                    groupby=[
                        {
                            signal="groupby === 'genre' ? 'Major_Genre' : 'foo'"
                        }
                    ],
                    type="loess",
                    y="IMDB_Rating"
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            range="width",
            domain={
                data="movies",
                field="Rotten_Tomatoes_Rating"
            },
            type="linear"
        },
        {
            name="y",
            range="height",
            domain={
                data="movies",
                field="IMDB_Rating"
            },
            type="linear"
        }
    ],
    width=500,
    autosize="pad",
    signals=[
        {
            name="loessBandwidth",
            bind={
                max=1,
                min=0.05,
                input="range"
            },
            value=0.3
        },
        {
            name="groupby",
            bind={
                options=[
                    "none",
                    "genre"
                ],
                input="select"
            },
            value="none"
        }
    ]
)