seed, teach, grow
Published unlisted
Edited
Oct 9, 2019
vle = require("vega-embed@3")
vle(vega_spec_eg)
md`while the other 2 approaches work fine`
vlf = {
const [Vega, VegaLite] = await Promise.all([
require("vega@5/build/vega.min.js"),
require("vega-lite@3/build/vega-lite.min.js")
]);
return async spec => {
const div = document.createElement("div");
const view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec));
await view.initialize(div).runAsync();
return div;
};
}
vlf(vega_spec_eg)
vl2(vega_spec_eg)
vega_spec_eg = (
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"url": "https://raw.githubusercontent.com/maliky/images/stable/vega-lite-json/all_data_with_nan_rec.json"
},
"transform": [
{
"groupby": ["msgTop", "group_name"],
"joinaggregate": [
{ "as": "msg_count", "field": "*", "op": "count" }
]
},
{
"groupby": ["disID"],
"joinaggregate": [
{ "as": "dis_count", "field": "*", "op": "count" }
]
},
{
"joinaggregate": [
{ "as": "max_dis_count", "field": "dis_count", "op": "max" }
]
},
{
"joinaggregate": [
{ "as": "min_dis_count", "field": "dis_count", "op": "min" }
]
},
{
"as": "top_dis_count_seuil",
"calculate": "datum.min_dis_count + (datum.max_dis_count - datum.min_dis_count) * 0.80"
},
{ "filter": "datum.dis_count > datum.top_dis_count_seuil" }
],
"facet": {
"column": { "field": "msgTS", "timeUnit": "day", "type": "nominal" },
"row": { "field": "disID", "type": "nominal" }
},
"spec": {
"layer": [
{
"encoding": {
"x": { "field": "msgTop", "type": "nominal" },
"y": { "field": "msg_count", "type": "quantitative"}
},
"mark": { "fill": "grey", "size": 5, "type": "bar" },
"transform": [
{ "filter": "!isValid(datum.group_name)" }
]
},
{
"encoding": {
"color": { "field": "group_name", "type": "nominal" },
"x": { "field": "msgTop", "type": "nominal" },
"y": { "field": "msg_count", "type": "quantitative"}
},
"mark": { "opacity": 0.8, "type": "bar" },
"transform": [
{ "filter": "isValid(datum.group_name)" }
]
}
]
}
})
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.
