Line Charts

Line Chart

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    :line,
    transform=[
        {filter="datum.symbol=='GOOG'"}
    ],
    x="date:t",
    y=:price
)

Line Chart with Point Markers

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    transform=[{filter="datum.symbol==='GOOG'"}],
    mark={
        :line,
        point=true
    },
    x="year(date)",
    y="mean(price)",
    color=:symbol
)

Line Chart with Stroked Point Markers

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    transform=[{filter="datum.symbol==='GOOG'"}],
    mark={
        :line,
        point={filled=false, fill=:white}
    },
    x="year(date)",
    y="mean(price)",
    color=:symbol
)

Multi Series Line Chart

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    :line,
    x="date:t",
    y=:price,
    color=:symbol
)

Slope Graph

using VegaLite, VegaDatasets

dataset("barley") |>
@vlplot(
    :line,
    width={step=50},
    x={
        "year:o",
        scale={
            padding=0.5
        }
    },
    y="median(yield)",
    color=:site
)

Step Chart

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    transform=[{filter="datum.symbol==='GOOG'"}],
    mark={
        :line,
        interpolate="step-after"
    },
    x="date:t",
    y=:price
)

Line Chart with Monotone Interpolation

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    transform=[{filter="datum.symbol==='GOOG'"}],
    mark={
        :line,
        interpolate="monotone"
    },
    x="date:t",
    y=:price
)

Connected Scatterplot (Lines with Custom Paths)

using VegaLite, VegaDatasets

dataset("driving") |>
@vlplot(
    mark={
        :line,
        point=true
    },
    x={
        :miles,
        scale={zero=false}
    },
    y={
        :gas,
        scale={zero=false}
    },
    order="year:t"
)

Line Chart with Varying Size (using the trail mark)

using VegaLite, VegaDatasets

dataset("stocks") |>
@vlplot(
    :trail,
    x={
        "date:t",
        axis={format="%Y"}
    },
    y=:price,
    size=:price,
    color=:symbol
)

Line Chart with Markers and Invalid Values

using VegaLite, DataFrames

data = DataFrame(
    x=[1,2,3,4,5,6,7],
    y=[10,30,missing,15,missing,40,20]
)

data |>
@vlplot(
    mark={
        :line,
        point=true
    },
    x=:x,
    y=:y
)

Carbon Dioxide in the Atmosphere

using VegaLite, VegaDatasets

dataset("co2-concentration") |> @vlplot(
    width=800,
    height=500,
    transform=[
        {
            calculate="year(datum.Date)",
            as=:year
        },
        {
            calculate="month(datum.Date)",
            as=:month
        },
        {
            calculate="floor(datum.year / 10) + 'x'",
            as=:decade
        },
        {
            calculate="(datum.year % 10) + (datum.month/12)",
            as=:scaled_date
        }
    ]
) +
@vlplot(
    :line,
    x={
        "scaled_date:q",
        axis={
            title="Year into Decade",
            tickCount=11
        }
    },
    y={
        "CO2:q",
        axis={title="CO2 concentration in ppm"},
        scale={zero=false}
    },
    detail="decade:o",
    color={"decade:n", scale={scheme="magma"}, legend={offset=40}}
) +
(
    @vlplot(
        transform=[
            {
                aggregate=[{
                    op="argmin",
                    field="scaled_date",
                    as="start"
                }, {
                    op="argmax",
                    field="scaled_date",
                    as="end"
                }],
                groupby=["decade"]
            },
            {
                calculate="datum.start.scaled_date",
                as="scaled_date_start"
            },
            {
                calculate="datum.start.CO2",
                as="CO2_start"
            },
            {
                calculate="datum.start.year",
                as="year_start"
            },
            {
                calculate="datum.end.scaled_date",
                as="scaled_date_end"
            },
            {
                calculate="datum.end.CO2",
                as="CO2_end"
            },
            {
                calculate="datum.end.year",
                as="year_end"
            }
        ]
    ) +
    @vlplot(
        mark={
            :text,
            aligh=:left,
            baseline=:top,
            dx=3,
            dy=1
        },
        x="scaled_date_start:q",
        y="CO2_start:q",
        text="year_start:n"
    ) +
    @vlplot(
        mark={
            :text,
            align=:left,
            baseline=:bottom,
            dx=3,
            dy=1
        },
        x="scaled_date_end:q",
        y="CO2_end:q",
        text="year_end:n"
    )
)

Line Charts Showing Ranks Over Time

using VegaLite, DataFrames

data = DataFrame(
    team=["Germany", "Mexico", "South Korea", "Sweden", "Germany", "Mexico",
        "South Korea", "Sweden", "Germany", "Mexico", "South Korea", "Sweden"],
    matchday=[1,1,1,1,2,2,2,2,3,3,3,3],
    point=[0,3,0,3,3,6,0,3,3,6,3,6],
    diff=[-1,1,-1,1,0,2,-2,0,-2,-1,0,3]
)

data |>
@vlplot(
    title={text="World Cup 2018: Group F Rankings"},
    transform=[{
        sort=[
            {field="point", order="descending"},
            {field="diff", order="descending"}
        ],
        window=[{
            op="rank",
            as="rank"
        }],
        groupby=["matchday"]
    }],
    mark={
        :line,
        orient="vertical"
    },
    x="matchday:o",
    y="rank:o",
    color={
        :team,
        scale={
            domain=["Germany", "Mexico", "South Korea", "Sweden"],
            range=["black", "#127153", "#C91A3C", "#0C71AB"]
        }
    }
)

Drawing Sine and Cosine Curves with the Sequence Generator

using VegaLite

@vlplot(
    width=300,
    height=150,
    data={sequence={start=0,stop=12.7,step=0.1,as="x"}},
    transform=[
        {calculate="sin(datum.x)", as="sin(x)"},
        {calculate="cos(datum.x)", as="cos(x)"},
        {fold=["sin(x)", "cos(x)"]}
    ],
    mark=:line,
    x="x:q",
    y="value:q",
    color={"key:n",title=nothing}
)