Working as a Senior Lecturer in the Bachelor's and Master's program "Computer Science" at the Johannes Kepler University Linz, Austria
Public
Edited
Sep 11, 2024
data = [
{key: "Data Structure 1", n: 5000, lowStaleness: 0.2, middleStaleness: 0.3, highStaleness: 0.5},
{key: "Data Structure 2", n: 5000, lowStaleness: 0.2, middleStaleness: 0.2, highStaleness: 0.6},
{key: "Data Structure 3", n: 2000, lowStaleness: 0.4, middleStaleness: 0.2, highStaleness: 0.4},
{key: "Data Structure 4", n: 2500, lowStaleness: 0.3, middleStaleness: 0.4, highStaleness: 0.3},
{key: "Data Structure 5", n: 4000, lowStaleness: 0.3, middleStaleness: 0.5, highStaleness: 0.2},
{key: "Data Structure 6", n: 1000, lowStaleness: 0.1, middleStaleness: 0.8, highStaleness: 0.1}
]
data.sort(function(a, b) {
return b.highStaleness - a.highStaleness;
});
data
<div id="parent"></div>
function repaint() {
const parent = d3.select("#parent")
console.log(data)
parent.selectAll("p")
.data(data, d => d ? d.key : '')
.join(enter => enter.append("p"),
update => update,
exit => exit.remove())
.classed("isBad", d => d.highStaleness >= 0.5)
.text(d => d.key)
.attr("id", (d, i) => `myP${i}`)
// .style("width", d => 500 * d.lowStalenes
// .style("x", 0)
.style("color", "white")
.style("background", d => `linear-gradient(to right, green 0%, green ${d.lowStaleness * 100}%,
orange ${d.lowStaleness * 100}%, orange ${d.middleStaleness * 100}%,
red ${d.middleStaleness * 100}%, red 100%)`)
}
function addSomethingToParent() {
const parentSel = d3.select("#parent")
const pSel = parentSel.append("p")
pSel.text("Hello World")
}
// Run this cell to perform a repaint
{
repaint()
}
// Run this cell to add some p
{
addSomethingToParent()
}
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.
