Published
Edited
Aug 9, 2018
1 fork
Insert cell
Insert cell
vegalite({
data: {values: aapl},
mark: {type: "line", interpolate: "step"},
width: width,
height: 360,
autosize: "fit",
title: {
text: "The Price of Apple",
fontSize: 24,
fontWeight: "normal",
anchor: "start"
},
encoding: {
x: {
field: "date",
type: "temporal",
axis: {tickCount: 5, title: "Year", format: "%Y", titleFontSize: 20, labelFontSize: 20}
}
},
"layer": [
{
"mark": {"type": "line", "tooltip": {"field": "close", "type": "quantitative"}},
"encoding": {
y: {
field: "close",
type: "quantitative",
axis: {format: "$f", title: "AAPL Close", titleFontSize: 20, labelFontSize: 20}
}
}
}
]
})
Insert cell
Insert cell
//vegalite = require("@observablehq/vega-lite@0.1")

vegalite = {
const [Vega, VegaLite] = await Promise.all([
require("vega@4/build/vega.min.js"),
require("vega-lite@3.0.0-rc3/build/vega-lite.min.js")
]);
return spec => {
const div = document.createElement("div");
const view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec));
return view.initialize(div).runAsync().then(() => div);
};
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more