Data Visualization Engineer - Research Scientist - author of @lineupjs
Published
Edited
Feb 20, 2020
md`# LineUp.js simple example`
cats = ['c1', 'c2', 'c3']
arr = {
const arr = []
for (let i = 0; i < 1000; ++i) {
arr.push({
a: Math.random() * 10,
d: 'Row ' + i,
cat: cats[Math.floor(Math.random() * 3)],
cat2: cats[Math.floor(Math.random() * 3)]
})
}
return arr;
}
mutable selection = []
{
lineup.on('selectionChanged', (indices) => {
mutable selection = indices;
});
lineup.setSelection(selection);
}
reset = {
const b = html`<button>Reset Selection</button>`;
b.onclick = () => mutable selection = [];
return b;
}
lineup = {
root.innerHTML = '';
const b = LineUpJS.builder(arr);
b.deriveColumns();
b.deriveColors();
b.rowHeight(24);
return b.buildTaggle(root)
}
root = html`<div style="position: relative; width: 100%; height: 500px; line-height: normal !important"></div>`
LineUpJS=require('lineupjs@next')
stylesheet = html`<link rel='stylesheet' href='https://unpkg.com/lineupjs@next/build/LineUpJS.css' />`
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.
