table = html`<table id="data-table" contenteditable>
<tr><th>Borough name</th><th>code</th><th>value</th></tr>
<tr><td>Brent</td><td>1</td><td>1234</td></tr>
<tr><td>Camden</td><td>2</td><td>432</td></tr>
<tr><td>Haringey</td><td>3</td><td>423</td></tr>
</table>`
tableData = Generators.observe(notify => {
const keyinput = event => notify(parseTableData(table));
table.addEventListener("input", keyinput);
notify(parseTableData(table));
return () => window.removeEventListener("input", keyinput);
})
function parseTableData(table) {
const data = [];
table.querySelectorAll("tr").forEach((row, i)=>{
data.push(row.innerText.split(/[\t\n]/g));
});
const formattedData = data.reduce((accumulator, row, i)=>{
if (i==0) {
accumulator.columns = row;
} else {
const rowObject = {};
accumulator.columns.forEach((key,i)=>{
rowObject[key] = row[i];
});
accumulator.push(rowObject);
}
return accumulator;
},[]);
return formattedData;
}
d3 = require('d3')
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.
