Designing and Engineering a Better Tomorrow
vegaAPI = {
const hover = vl.selectSingle("hover")
.fields(["Horsepower", "Miles_per_Gallon"])
.nearest(true).on("mouseover").empty("none").clear("mouseout");
const fieldMPG = vl.y().fieldQ("Miles_per_Gallon");
const fieldHP = vl.x().fieldQ("Horsepower");
const points = vl.markPoint({filled: true, tooltip: true})
.encode(fieldMPG, fieldHP)
.select(hover);
const opacity = vl.opacity().if(hover, vl.value(0.3)).value(0);
const ruleMPG = vl.markRule().encode(fieldMPG,opacity);
const ruleHP = vl.markRule().encode(fieldHP, opacity);
return vl.layer(points,
rules.includes("ruleMPG") ? ruleMPG : [],
rules.includes("ruleHP") ? ruleHP : [])
.data(cars)
.render();
}
vegaSpec = {
const hover = {"hover": { "type": "single", "fields": ["Horsepower", "Miles_per_Gallon"],
"nearest": true, "on": "mouseover", "empty": "none", "clear": "mouseout"
}
};
const fieldHP = {"field": "Horsepower", "type": "quantitative"};
const fieldMPG = {"field": "Miles_per_Gallon", "type": "quantitative"};
const points = { "mark": {"type": "point", "filled": true, "tooltip": true},
"encoding": { "x": fieldHP, "y": fieldMPG }, "selection": hover
};
const opacity = {"condition": {"value": 0.3, "selection": "hover"},"value": 0 };
const ruleMPG = { "mark": "rule", "encoding": {"y": fieldMPG,"opacity": opacity} };
const ruleHP = { "mark": "rule", "encoding": {"x": fieldHP, "opacity": opacity} };
const spec = { "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {values: cars},
"layer": [points]
.concat(rules.includes("ruleMPG") ? [ruleMPG] : [])
.concat(rules.includes("ruleHP") ? [ruleHP] : [])
}; // spec
// https://github.com/observablehq/vega/blob/master/vega-lite/index.js
// https://vega.github.io/vega-lite-api/api/#utilities
const div = document.createElement("div");
const view = div.value = new vl.vega.View(vl.vega.parse(vl.vegalite.compile(spec).spec));
return view.initialize(div).runAsync().then(function() { return div; });
}
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.
