Published unlisted
Edited
Sep 8, 2022
Imitating FM bug
test123 = {
let max_d = d3.max(data, record => parseFloat(record.d));
let max_e = d3.max(data, record => parseFloat(record.e));
let max_y_scale_value_for_d = d3.max([100, max_d]);
let max_y_scale_value_for_e = d3.max([100, max_e]);
const mpg = vl.markLine()
.data(data)
//.params(vl.selectInterval().bind("scales"))
// Without transform, the ordering was happening lexicographically and not numerically.
// Thus, we have to first convert it to numeric:
// Refer:
// 1. https://stackoverflow.com/questions/69519873/vega-lite-bar-chart-incorrectly-sorted
// 2. https://vega.github.io/vega-lite/docs/calculate.html
.transform([{ "calculate": "toNumber(datum.d)", "as": "d2" }, { "calculate": "toNumber(datum.e)", "as": "e2" }])
// .selection({"grid": {"type": "interval", "bind": "scales" }})
// .selection({
// "y_scroll_1": {
// "type": "interval",
// "bind": "scales",
// "encodings": ["y"]
// },
// "x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
// })
.encode(
vl.x()
.fieldN('student_name')
.title('students')
// hide x-axis students ticks https://vega.github.io/vega-lite/docs/axis.html#ticks
// hide x-axis students labels https://vega.github.io/vega-lite/docs/axis.html#labels
.axis({ labels: false, ticks: false })
.sort('-y'),
vl.y()
.fieldQ('d2')
.scale({ "domain": [0, max_y_scale_value_for_d] })
// https://vega.github.io/vega-lite/docs/scale.html
// .scale({"rangeMax":100})
.title('D = Total watched / Video duration'),
// vl.tooltip(['student_name', 'd', 'e'])
// https://vega.github.io/vega-lite/docs/tooltip.html#
vl.tooltip([{ 'field': 'student_name', 'title': 'Sudent Name' }
, { 'field': 'd', 'title': 'D' }
, { 'field': 'e', 'title': 'E' }])
).width(500).height(250);
//.width(600).height(300)
const hp = mpg.markLine({ color: '#227a15' })
// .params(vl.selectInterval().bind("scales"))
// .selection({
// "y_scroll_2": {
// "type": "interval",
// "bind": "scales",
// "encodings": ["y"]
// },
// "x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
// })
.encode(
vl.y()
.fieldQ('e2')
// Specifying scale range for an axis:
// https://stackoverflow.com/a/55134190/6357916
// https://vega.github.io/vega-lite-api/api/size.html#scale
.scale({ "domain": [0, max_y_scale_value_for_e] })
// .scale({"rangeMax":100})
.title('E = Watched till / Video duration')
//.title('e = watched till / video duration')
);
const plot = vl.vconcat(
vl.layer(mpg, mpg.markCircle()),
vl.layer(hp, hp.markCircle({ color: '#227a15' }))
)//.resolve({"scale": {"x": "shared", "y": "independent"}})
return plot.render();
}
// data2 = require('vega-datasets@2');
// // vla = require('vega-lite-api'); // import vega-lite-api
// data = require('vega-datasets@1'); // import vega_datasets
// df2 = data['movies.json']();
// df2 = data2['movies.json']();
// df2[0]
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.
