Public
Edited
Apr 5, 2021
{
const tbl = d3.select(html`<table class='data'></table>`);
tbl.append('thead')
.selectAll('td')
.data(() => ['Name', ...features])
.join('th')
.text(d => d)
const tbody = tbl
.append('tbody')
.selectAll('tr')
.data(tools)
.join('tr')
const cells = tbody
.selectAll('td')
.data((a) => {
return [a, ...features.map(f => toolFeatures[a].has(f) ? '✔' : '‧')]
})
.join('td')
.html((d,i) => i == 0
? `<a href=${toolLinks[d]} target=_blank>${d}</a>`
: d)
return tbl.node();
}
html`<style>
table.data {
padding: 50px 0;
overflow: hidden;
z-index: 1;
}
table.data thead th {
font-weight: 100;
padding-left: 5px;
}
table.data thead th+th {
text-align: center;
padding: 0 10px;
}
table.data tbody td {
cursor: pointer;
}
table.data tbody td a {
padding-left: 5px;
}
/* td+td means all but the first column */
table.data tbody td+td {
text-align: center;
}
table.data tr:hover td {
}
table.data td, table.data th {
position: relative;
}
/*
A hack to do the hover selection bars. It requires the "position:relative"
on the cells above, as well as the table's "overflow: hidden and z-index: 1".
But once you have that, it works.
*/
table.data td+td:hover::before {
background-color: #ffd;
content: '\\0000a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
table.data td+td:hover::after {
background-color: #ffd;
content: '\\0000a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
</style>
`
olParsed = new window.DOMParser().parseFromString(ol, 'text/html')
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
