normal_table = {
let div = d3.create('div');
let table = div
.append('table')
.attr('border', '0')
.attr('align', 'center')
.attr('cellspacing', '2')
.attr('cellpadding', 3);
let first_row = table.append('tr')
.attr('bgcolor', "white");
first_row.append('th');
for(var i=0; i<data.length; i++) {
first_row
.append('th')
.attr('col', i)
.text(data[i].name);
}
for(var i=0; i<data.length; i++) {
let row = d3.create('tr');
row
.append('th')
.attr('bgcolor', "white")
.attr('row', i)
.text(data[i].name);
for(var j=0; j<data.length; j++) {
let td = row
.append('td')
.attr('row', i)
.attr('col', j)
.text(data_matrix[i][j]);
}
table.append(() => row.node());
}
div
.selectAll('td')
.on('mouseover', function() {
let row = d3.select(this).attr('row');
let col = d3.select(this).attr('col');
d3.selectAll(`[row="${row}"]`).attr('bgcolor', '#ddd');
d3.selectAll(`[col="${col}"]`).attr('bgcolor', '#ddd');
})
.on('mouseleave', function() {
let row = d3.select(this).attr('row');
let col = d3.select(this).attr('col');
d3.selectAll(`[row="${row}"]`).attr('bgcolor', '#fff');
d3.selectAll(`[col="${col}"]`).attr('bgcolor', '#fff');
});
return div.node();
}
d3 = require('d3@5')
html`<style>
table {
cursor: default
}`
data = d3.csvParse(await FileAttachment("cities.csv").text(), ({name, value}) => ({name: name, value: +value})).sort((a, b) => b.value - a.value)
data.length
function compute_matrix() {
let matrix = [];
for(var i=0; i<data.length; i++) {
matrix[i] = [];
for(var j=0; j<data.length; j++) {
matrix[i][j] = (data[i].value / data[j].value).toFixed(2);
}
}
return matrix;
}
data_matrix = compute_matrix()
d3.select(normal_table).html()
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.
