Public
Edited
Sep 26, 2023
1 star
data = FileAttachment("payment.csv").csv({typed: true})
{
const container = html`
<style type="text/css">
body {
}
table {
text-align: center;
}
th {
padding: 10px;
color: white;
background-color: gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.highlight {
background-color: #DDDDDD66;
color: black;
}
td, tr {
padding: 6px 4px;
font-family: sans-serif;
}
.bubbles:hover {
stroke: black;
stroke-width: 2px;
cursor: pointer;
}
</style>
<div id="show"></div>
`;
const table = d3.select(container).append("table");
const thead = table.append("thead");
const columns = data.columns;
const th = thead.append("tr")
.selectAll("th")
.data(columns)
.join("th")
.text(d => d);
const sampleData = data.slice(0, d3.min([data.length, 5]));
let oldColor;
const show = d3.select(container).select("#show"); // For debug
const tr = table.append("tbody")
.selectAll("tr")
.data(sampleData)
.join("tr")
.style("background-color", (_, i) => i % 2 ? "lightgray" : null);
const td = tr.selectAll("td")
.data((d, i) => [...d3.map(Array.from(Array(columns.length).keys()), k => [i, k, d[columns[k]]])])
.join("td")
.text(d => d[2]);
td.on("mouseover", function(){
oldColor = d3.select(this).attr("background-color");
d3.select(this).style("font-weight", "bold");
// show.text(d3.select(this).data());
const rowSelected = d3.select(this).data()[0][0];
const colSelected = d3.select(this).data()[0][1];
d3.selectAll(th).filter((d, i) => i == colSelected).attr("class", "highlight");
d3.selectAll(td).filter(d => (d[0] !== rowSelected && d[1] !== colSelected)).style("opacity", 0.2);
})
.on("mouseout", function(){
d3.select(this).style("background-color", oldColor);
d3.select(this).style("font-weight", "normal");
d3.selectAll(td).style("opacity", 1);
d3.selectAll(th).classed('highlight', false);
});
return container;
}
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.
