Data Visualization Engineer - Research Scientist - author of @lineupjs
md`# LineUp.js Observable library`
version = 'next'
LineUpJS = require(`lineupjs@${version}`)
function builder(...arr) {
const root = html`<div style="position: relative; width: ${width}px; height: 500px;">
<style>@import "https://unpkg.com/lineupjs@${version}/build/LineUpJS.css";
.lu {
line-height: normal;
}
.lu-hr {
padding: 0;
background: #ffa500;
}
</style>
</div>`;
const b = LineUpJS.builder(...arr);
b.rowHeight(24, 2);
// override the build methods to inject the html element
const buildTaggle = b.buildTaggle;
b.buildTaggle = () => viewAble(buildTaggle.call(b, root));
const build = b.build;
b.build = () => viewAble(build.call(b, root));
return b;
}
function viewAble(lineup) {
const node = lineup.node;
Object.defineProperties(node, {
lineup: {
value: 'lineup'
},
value: {
get: () => lineup.getSelection().map(index => lineup.data.data[index]),
set: value => {
const data = lineup.data.data;
lineup.setSelection(value ? value.map(v => data.indexOf(v)) : []);
}
}
});
lineup.on('selectionChanged', () =>
node.dispatchEvent(new CustomEvent('input'))
);
// after proper layouting
function check() {
const height = node.querySelector(
LineUpJS.version.startsWith('3')
? '.lineup-multi-engine > main'
: '.le-body'
).clientHeight;
if (height > 100) {
lineup.update();
} else {
setTimeout(check, 100);
}
}
setTimeout(check, 100);
return node;
}
function asLineUp(arr) {
return builder(arr).deriveColumns().deriveColors().build();
}
function asTaggle(arr) {
return builder(arr)
.deriveColumns()
.deriveColors()
.buildTaggle();
}
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.
