Vega-Lite API v5Vega-Lite API v4Vega-Lite with Inline CSV DataVega-Lite Cross-Filter ExampleVega-Lite Annotated Time SeriesVega-Lite Composing SelectionsPSR B1919+21 with Vega-LiteVega-Lite London Tube LinesVega-Lite Cartographic ProjectionsVega-Lite Airport ConnectionsVega-Lite Pyramid PieVega-Lite Wind VectorsVega-Lite Population ChangeVega-Lite with Streaming Data UpdatesVega-Lite Parallel CoordinatesVega-Lite Adjacency MatrixVega-Lite Donut Chart with LabelsVega-Lite Spike MapVega-Lite Scatterplot Pan & ZoomVega-Lite Repeat LayerVega-Lite LAB Color SpaceVega-Lite Input BindingVega-Lite Population PyramidsVega-Lite Isotype dot plotVega-Lite Distribution PlotsVega-Lite API Interactive SplomVega Lite API - Timeline Focus + ContextVega-Lite Percent Of Total
Vega-Lite Interactive Index Chart
chart = {
const mouseover = vl
.selectSingle("index")
.on("mouseover")
.encodings("x")
.nearest(true)
.init({ x: { year: 2005, month: 1, date: 1 } });
const base = vl.mark().encode(
vl.x().fieldT("date").axis(null)
);
const hiddenPoints = base.markPoint({ opacity: 0 }).select(mouseover);
const line = base
.markLine()
.transform(
vl.lookup("symbol").from(mouseover.key("symbol")),
vl.calculate(
"datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
).as("indexed_price")
)
.encode(
vl.y().fieldQ("indexed_price").axis({ format: "%" }),
vl.color().fieldN("symbol")
);
const tooltipBase = base
.transform(vl.filter(mouseover))
.encode(vl.color().value("firebrick"));
const tooltip = vl.layer(
tooltipBase.markRule({ strokeWidth: 0.5 }),
tooltipBase.markText({ align: "center", fontWeight: 100 }).encode(
vl.y().value(310),
vl.text().fieldT("date").timeUnit("yearmonth")
)
);
return vl
.layer(hiddenPoints, line, tooltip)
.data("data/stocks.csv")
.width(width - 150)
.height(300)
.render();
}
{
const base = vl.mark().encode(
vl.x().fieldT("date").axis(null)
);
const line = base
.markLine()
.encode(vl.y().fieldQ("price"), vl.color().fieldN("symbol"));
return vl
.layer(line)
.data("data/stocks.csv")
.width(650)
.height(300)
.render();
}
{
const mouseover = vl
.selectSingle("index")
.on("mouseover")
.encodings("x")
.nearest(true)
.init({ x: { year: 2005, month: 1, date: 1 } });
const base = vl.mark().encode(
vl.x().fieldT("date").axis(null)
);
const hiddenPoints = base
.markPoint({ opacity: 0.1 })
.select(mouseover)
.encode(
// Let's color code it interactively to demonstrate it is working, but we will remove it later
vl.color().if(mouseover, vl.value("firebrick")).value("steelblue")
);
return vl
.layer(hiddenPoints)
.data("data/stocks.csv")
.width(650)
.height(300)
.render();
}
{
const mouseover = vl
.selectSingle("index")
.on("mouseover")
.encodings("x")
.nearest(true)
.init({ x: { year: 2005, month: 1, date: 1 } });
const base = vl.mark().encode(
vl.x().fieldT("date").axis(null)
);
const hiddenPoints = base
.markPoint({ opacity: 0.1 })
.select(mouseover)
.encode(
// Let's color code it interactively to demonstrate it is working, but we will remove it later
vl.color().if(mouseover, vl.value("firebrick")).value("steelblue")
);
const line = base
.markLine()
.transform(
vl.lookup("symbol").from(mouseover.key("symbol")),
vl.calculate(
"datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
).as("indexed_price")
)
.encode(
vl.y().fieldQ("indexed_price").axis({ format: "%" }),
vl.color().fieldN("symbol")
);
return vl
.layer(hiddenPoints, line)
.data("data/stocks.csv")
.width(650)
.height(300)
.render();
}
{
const mouseover = vl
.selectSingle("index")
.on("mouseover")
.encodings("x")
.nearest(true)
.init({ x: { year: 2005, month: 1, date: 1 } });
const base = vl.mark().encode(
vl.x().fieldT("date").axis(null)
);
const hiddenPoints = base.markPoint({ opacity: 0 }).select(mouseover);
const tooltipBase = base
.transform(vl.filter(mouseover))
.encode(vl.color().value("firebrick"));
const tooltip = vl.layer(
tooltipBase.markRule({ strokeWidth: 0.5 }),
tooltipBase.markText({ align: "center", fontWeight: 100 }).encode(
vl.y().value(310),
vl.text().fieldT("date").timeUnit("yearmonth")
)
);
return vl
.layer(hiddenPoints, tooltip)
.data("data/stocks.csv")
.width(650)
.height(300)
.render();
}
vegaEmbed({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
values: data,
format: { parse: { date: "date" } }
},
width: 650,
height: 300,
layer: [
{
selection: {
index: {
type: "single",
on: "mouseover",
encodings: ["x"],
nearest: true,
init: { x: { year: 2005, month: 1, date: 1 } }
}
},
mark: "point",
encoding: {
x: { field: "date", type: "temporal", axis: null },
opacity: { value: 0 }
}
},
{
transform: [
{
lookup: "symbol",
from: { selection: "index", key: "symbol" }
},
{
calculate:
"datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0",
as: "indexed_price"
}
],
mark: "line",
encoding: {
x: { field: "date", type: "temporal", axis: null },
y: {
field: "indexed_price",
type: "quantitative",
axis: { format: "%" }
},
color: { field: "symbol", type: "nominal" }
}
},
{
transform: [{ filter: { selection: "index" } }],
encoding: {
x: { field: "date", type: "temporal", axis: null },
color: { value: "firebrick" }
},
layer: [
{ mark: { type: "rule", strokeWidth: 0.5 } },
{
mark: { type: "text", align: "center", fontWeight: 100 },
encoding: {
text: { field: "date", timeUnit: "yearmonth" },
y: { value: 310 }
}
}
]
}
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.