Published
Edited
May 13, 2022
embed(specStocks)
embed(specStocksWithMean)
embed(specStocksWithMeanFacet)
embed(specStocksWithMeanFacetDataWithLayer)
embed(specStocksWithMeanTransformFacet)
stocks = aq.loadCSV(
"https://cdn.jsdelivr.net/npm/vega-datasets@2/data/stocks.csv",
{ parse: { date: (x) => aq.op.parse_date(`${x} UTC`) } }
)
Inputs.table(stocks)
stocksMean = stocks
.groupby("symbol")
.rollup({ price: (d) => aq.op.mean(d.price) })
Inputs.table(stocksMean)
specStocks = ({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: stocks.objects() },
layer: [
{
mark: { type: "line" },
encoding: {
x: { field: "date", type: "temporal", scale: { type: "utc" } },
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" }
}
}
]
})
specStocksWithMean = {
const result = _.cloneDeep(specStocks);
result.layer.push({
data: { values: stocksMean.objects() },
mark: { type: "rule" },
encoding: {
y: { field: "price", type: "quantitative" },
color: { field: "symbol", type: "nominal" }
}
});
return result;
}
embed(specStocksFacet)
specStocksFacet = {
const result = _.cloneDeep(specStocks);
result.spec = { layer: _.cloneDeep(result.layer) };
delete result.layer;
result.facet = { field: "symbol" };
result.columns = 3;
return result;
}
specStocksWithMeanFacet = {
const result = _.cloneDeep(specStocksWithMean);
result.spec = { layer: _.cloneDeep(result.layer) };
delete result.layer;
result.facet = { field: "symbol" };
result.columns = 3;
return result;
}
specStocksWithMeanFacetDataWithLayer = {
const result = _.cloneDeep(specStocksWithMeanFacet);
result.spec.layer[0].data = _.cloneDeep(result.data);
delete result.data;
return result;
}
embed(specStocksWithMeanTransform)
specStocksWithMeanTransform = {
const result = _.cloneDeep(specStocksWithMean);
delete result.layer[1].data;
result.layer[1].encoding.y.aggregate = "mean";
return result;
}
specStocksWithMeanTransformFacet = {
const result = _.cloneDeep(specStocksWithMeanFacet);
delete result.spec.layer[1].data;
result.spec.layer[1].encoding.y.aggregate = "mean";
return result;
}
embed = require("vega-embed@6")
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.
