Line & Area Charts
Line Chart
using VegaLite
@vgplot(
height=200,
padding=5,
marks=[
{
marks=[
{
encode={
update={
interpolate={
signal="interpolate"
},
fillOpacity={
value=1
}
},
hover={
fillOpacity={
value=0.5
}
},
enter={
stroke={
field="c",
scale="color"
},
x={
field="x",
scale="x"
},
strokeWidth={
value=2
},
y={
field="y",
scale="y"
}
}
},
from={
data="series"
},
type="line"
}
],
from={
facet={
name="series",
data="table",
groupby="c"
}
},
type="group"
}
],
axes=[
{
scale="x",
orient="bottom"
},
{
scale="y",
orient="left"
}
],
data=[
{
name="table",
values=[
{
c=0,
x=0,
y=28
},
{
c=1,
x=0,
y=20
},
{
c=0,
x=1,
y=43
},
{
c=1,
x=1,
y=35
},
{
c=0,
x=2,
y=81
},
{
c=1,
x=2,
y=10
},
{
c=0,
x=3,
y=19
},
{
c=1,
x=3,
y=15
},
{
c=0,
x=4,
y=52
},
{
c=1,
x=4,
y=48
},
{
c=0,
x=5,
y=24
},
{
c=1,
x=5,
y=28
},
{
c=0,
x=6,
y=87
},
{
c=1,
x=6,
y=66
},
{
c=0,
x=7,
y=17
},
{
c=1,
x=7,
y=27
},
{
c=0,
x=8,
y=68
},
{
c=1,
x=8,
y=16
},
{
c=0,
x=9,
y=49
},
{
c=1,
x=9,
y=25
}
]
}
],
scales=[
{
name="x",
range="width",
domain={
data="table",
field="x"
},
type="point"
},
{
name="y",
nice=true,
zero=true,
range="height",
domain={
data="table",
field="y"
},
type="linear"
},
{
name="color",
range="category",
domain={
data="table",
field="c"
},
type="ordinal"
}
],
width=500,
signals=[
{
name="interpolate",
bind={
options=[
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
],
input="select"
},
value="linear"
}
]
)Area Chart
using VegaLite
@vgplot(
height=200,
padding=5,
marks=[
{
encode={
update={
interpolate={
signal="interpolate"
},
fillOpacity={
value=1
}
},
hover={
fillOpacity={
value=0.5
}
},
enter={
x={
field="u",
scale="xscale"
},
y2={
value=0,
scale="yscale"
},
fill={
value="steelblue"
},
y={
field="v",
scale="yscale"
}
}
},
from={
data="table"
},
type="area"
}
],
axes=[
{
tickCount=20,
scale="xscale",
orient="bottom"
},
{
scale="yscale",
orient="left"
}
],
data=[
{
name="table",
values=[
{
v=28,
u=1
},
{
v=55,
u=2
},
{
v=43,
u=3
},
{
v=91,
u=4
},
{
v=81,
u=5
},
{
v=53,
u=6
},
{
v=19,
u=7
},
{
v=87,
u=8
},
{
v=52,
u=9
},
{
v=48,
u=10
},
{
v=24,
u=11
},
{
v=49,
u=12
},
{
v=87,
u=13
},
{
v=66,
u=14
},
{
v=17,
u=15
},
{
v=27,
u=16
},
{
v=68,
u=17
},
{
v=16,
u=18
},
{
v=49,
u=19
},
{
v=15,
u=20
}
]
}
],
scales=[
{
name="xscale",
zero=false,
range="width",
domain={
data="table",
field="u"
},
type="linear"
},
{
name="yscale",
nice=true,
zero=true,
range="height",
domain={
data="table",
field="v"
},
type="linear"
}
],
width=500,
signals=[
{
name="interpolate",
bind={
options=[
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
],
input="select"
},
value="monotone"
}
]
)Stacked Area Chart
using VegaLite
@vgplot(
height=200,
padding=5,
marks=[
{
marks=[
{
encode={
update={
fillOpacity={
value=1
}
},
hover={
fillOpacity={
value=0.5
}
},
enter={
interpolate={
value="monotone"
},
x={
field="x",
scale="x"
},
y2={
field="y1",
scale="y"
},
fill={
field="c",
scale="color"
},
y={
field="y0",
scale="y"
}
}
},
from={
data="series"
},
type="area"
}
],
from={
facet={
name="series",
data="table",
groupby="c"
}
},
type="group"
}
],
axes=[
{
zindex=1,
scale="x",
orient="bottom"
},
{
zindex=1,
scale="y",
orient="left"
}
],
data=[
{
name="table",
values=[
{
c=0,
x=0,
y=28
},
{
c=1,
x=0,
y=55
},
{
c=0,
x=1,
y=43
},
{
c=1,
x=1,
y=91
},
{
c=0,
x=2,
y=81
},
{
c=1,
x=2,
y=53
},
{
c=0,
x=3,
y=19
},
{
c=1,
x=3,
y=87
},
{
c=0,
x=4,
y=52
},
{
c=1,
x=4,
y=48
},
{
c=0,
x=5,
y=24
},
{
c=1,
x=5,
y=49
},
{
c=0,
x=6,
y=87
},
{
c=1,
x=6,
y=66
},
{
c=0,
x=7,
y=17
},
{
c=1,
x=7,
y=27
},
{
c=0,
x=8,
y=68
},
{
c=1,
x=8,
y=16
},
{
c=0,
x=9,
y=49
},
{
c=1,
x=9,
y=15
}
],
transform=[
{
sort={
field="c"
},
field="y",
groupby=[
"x"
],
type="stack"
}
]
}
],
scales=[
{
name="x",
range="width",
domain={
data="table",
field="x"
},
type="point"
},
{
name="y",
nice=true,
zero=true,
range="height",
domain={
data="table",
field="y1"
},
type="linear"
},
{
name="color",
range="category",
domain={
data="table",
field="c"
},
type="ordinal"
}
],
width=500
)Horizon Graph
using VegaLite
@vgplot(
height=100,
marks=[
{
marks=[
{
marks=[
{
encode={
update={
y2={
value=0,
scale="y"
},
fillOpacity={
signal="opacity"
},
y={
field="y",
scale="y"
}
},
enter={
interpolate={
value="monotone"
},
x={
field="x",
scale="x"
},
fill={
value="steelblue"
}
}
},
from={
data="table"
},
type="area"
}
],
encode={
update={
y={
field="offset"
}
}
},
from={
data="layer_indices"
},
type="group"
}
],
encode={
update={
height={
field={
group="height"
}
},
clip={
value=true
},
width={
field={
group="width"
}
}
}
},
type="group"
}
],
axes=[
{
tickCount=20,
scale="x",
orient="bottom"
}
],
data=[
{
name="layer_indices",
values=[
0,
1,
2,
3
],
transform=[
{
expr="datum.data < layers",
type="filter"
},
{
as="offset",
expr="datum.data * -height",
type="formula"
}
]
},
{
name="table",
values=[
{
x=1,
y=28
},
{
x=2,
y=55
},
{
x=3,
y=43
},
{
x=4,
y=91
},
{
x=5,
y=81
},
{
x=6,
y=53
},
{
x=7,
y=19
},
{
x=8,
y=87
},
{
x=9,
y=52
},
{
x=10,
y=48
},
{
x=11,
y=24
},
{
x=12,
y=49
},
{
x=13,
y=87
},
{
x=14,
y=66
},
{
x=15,
y=17
},
{
x=16,
y=27
},
{
x=17,
y=68
},
{
x=18,
y=16
},
{
x=19,
y=49
},
{
x=20,
y=15
}
]
}
],
scales=[
{
name="x",
zero=false,
range="width",
domain={
data="table",
field="x"
},
type="linear",
round=true
},
{
name="y",
nice=true,
zero=true,
range=[
{
signal="vheight"
},
0
],
domain={
data="table",
field="y"
},
type="linear"
}
],
width=500,
signals=[
{
name="layers",
bind={
options=[
1,
2,
3,
4
],
input="select"
},
on=[
{
events="mousedown!",
update="1 + (layers % 4)"
}
],
value=2
},
{
name="height",
update="floor(200 / layers)"
},
{
name="vheight",
update="height * layers"
},
{
name="opacity",
update="pow(layers, -2/3)"
}
]
)Job Voyager
using VegaLite, VegaDatasets
@vgplot(
height=500,
padding=5,
marks=[
{
marks=[
{
encode={
update={
x={
field="year",
scale="x"
},
y2={
field="y1",
scale="y"
},
fillOpacity={
field={
parent="sum"
},
scale="alpha"
},
fill={
field="sex",
scale="color"
},
y={
field="y0",
scale="y"
}
},
hover={
fillOpacity={
value=0.2
}
}
},
from={
data="facet"
},
type="area"
}
],
from={
data="series",
facet={
name="facet",
data="jobs",
groupby=[
"job",
"sex"
]
}
},
type="group"
},
{
encode={
update={
text={
field="job"
},
align={
field="argmax.year",
scale="align"
},
baseline={
value="middle"
},
x={
field="argmax.year",
scale="x"
},
dx={
field="argmax.year",
scale="offset"
},
fill={
value="#000"
},
fillOpacity={
field="argmax.perc",
scale="opacity"
},
fontSize={
offset=5,
field="argmax.perc",
scale="font"
},
y={
signal="scale('y', 0.5 * (datum.argmax.y0 + datum.argmax.y1))"
}
}
},
interactive=false,
from={
data="series"
},
type="text"
}
],
axes=[
{
format="d",
tickCount=15,
scale="x",
orient="bottom"
},
{
format="%",
domain=false,
encode={
grid={
enter={
stroke={
value="#ccc"
}
}
},
ticks={
enter={
stroke={
value="#ccc"
}
}
}
},
grid=true,
scale="y",
orient="right",
tickSize=12
}
],
data=[
{
name="jobs",
values=dataset("jobs"),
transform=[
{
expr="(sex === 'all' || datum.sex === sex) && (!query || test(regexp(query,'i'), datum.job))",
type="filter"
},
{
sort={
order=[
"descending",
"descending"
],
field=[
"job",
"sex"
]
},
field="perc",
groupby=[
"year"
],
type="stack"
}
]
},
{
name="series",
source="jobs",
transform=[
{
fields=[
"perc",
"perc"
],
ops=[
"sum",
"argmax"
],
as=[
"sum",
"argmax"
],
groupby=[
"job",
"sex"
],
type="aggregate"
}
]
}
],
scales=[
{
name="x",
zero=false,
range="width",
domain={
data="jobs",
field="year"
},
type="linear",
round=true
},
{
name="y",
zero=true,
range="height",
domain={
data="jobs",
field="y1"
},
type="linear",
round=true
},
{
name="color",
range=[
"#33f",
"#f33"
],
domain=[
"men",
"women"
],
type="ordinal"
},
{
name="alpha",
zero=true,
range=[
0.4,
0.8
],
domain={
data="series",
field="sum"
},
type="linear"
},
{
name="font",
zero=true,
range=[
0,
20
],
domain={
data="series",
field="argmax.perc"
},
type="sqrt",
round=true
},
{
name="opacity",
range=[
0,
0,
0,
0,
0,
0.1,
0.2,
0.4,
0.7,
1.0
],
domain={
data="series",
field="argmax.perc"
},
type="quantile"
},
{
name="align",
zero=false,
range=[
"left",
"center",
"right"
],
domain=[
1730,
2130
],
type="quantize"
},
{
name="offset",
zero=false,
range=[
6,
0,
-6
],
domain=[
1730,
2130
],
type="quantize"
}
],
width=800,
signals=[
{
name="sex",
bind={
options=[
"men",
"women",
"all"
],
input="radio"
},
value="all"
},
{
name="query",
bind={
input="text",
placeholder="search",
autocomplete="off"
},
on=[
{
events="area:click!",
update="datum.job"
},
{
events="dblclick!",
update="''"
}
],
value=""
}
]
)