Web Datavis researcher by day, Indie Game designer by night
Published
Edited
Dec 1, 2021
Importers
2 stars
viewof numbers = checkbox_table(d3.range(1, 27), {rows: 3, columns: 10, skip: 2, value: [3,5,7]})
numbers
checkbox_table = function(data, options) {
let rows = options.rows || 4
let columns = options.columns || 10
let skip = options.skip || 0
let value = options.value || []
let table = d3.select(html`<table></table>`)
d3.range(rows).forEach(row => {
let tr = table.append('tr')
.style('border-bottom', 'none')
d3.range(columns).forEach(col => {
let td = tr.append('td')
.style('text-align', 'right')
let d = data[col+row*columns-skip]
if(d !== undefined) {
let label = td.append('label')
.text(d)
let input = label.append('input')
.attr('type', 'checkbox')
.datum(d)
.on('input', () => update())
if(value.includes(d)) {
input.attr('checked', true)
}
}
})
})
function update() {
table.node().value = table.selectAll('input:checked').data()
table.node().dispatchEvent(new CustomEvent("input"))
}
table.node().value = value
return table.node()
}
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.
