Public
Edited
Mar 10, 2023
1 fork
chart = dynamicTable(data)
data = FileAttachment("dummydata.csv").csv();
function dynamicTable(data,columns) {
// d3.select('#data-table').select('table').remove();
var columns = ['Sequence','range']
var subcolumns = ['Identifier','z']
var fdata = data.filter((value, index, self) => {
return (
self.findIndex((v) => v.Sequence=== value.Sequence) === index
);
});
// var table = d3.select('#data-table').append('table')
var table = d3.create('table')
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) { return d })
var rows = tbody.selectAll('tr')
.data(fdata)
.enter()
.append('tr')
.on("mouseover", function(d,i) {
d3.select(this)
.style("background-color","#f1f1f1");
})
.on("mouseout",function(d,i){
d3.select(this)
.style("background-color","transparent");
})
.on('click', function(d,i){
d3.select('#subdisplay').remove();
var subdata = data.filter(function(d){ return d.Sequence == i.Sequence})
var subtable = d3.create('table')
.attr('id','subdisplay')
this.parentNode.insertBefore(subtable.node(), this.nextSibling)
var subthead = subtable.append('thead')
var subtbody = subtable.append('tbody')
subthead.append('tr')
.selectAll('th')
.data(subcolumns)
.enter()
.append('th')
.text(function (d) { return d })
var subrows = subtbody.selectAll('tr')
.data(subdata)
.enter()
.append('tr')
.on("mouseover", function(d,i) {
d3.select(this)
.style("background-color","#f1f1f1");
})
.on("mouseout",function(d,i){
d3.select(this)
.style("background-color","transparent");
})
.on('click', function(d,i){
colorBrain(i)
})
var subcells = subrows.selectAll('td')
.data(function(srow) {
return subcolumns.map(function (subcolumn) {
return { column: subcolumn, value: srow[subcolumn] }
})
})
.enter()
.append('td')
.html(function (d) { return d.value })
.style('background-color', function(d){
var a = (d/100.0).toFixed(2)
return 'rgba(128, 128, 128,'+a+' )'
})
});
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function (column) {
return { column: column, value: row[column] }
})
})
.enter()
.append('td')
.html(function (d) { return d.value })
.style('background-color', function(d){
var a = (d/100.0).toFixed(2)
return 'rgba(128, 128, 128,'+a+' )'
})
return table.node();
}
function colorBrain(row) {
}
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.
