mutable datum = ({
})
toolTip = d3.select("body").append("div").attr("class", "toolTip")
data = [
{subject: 'Subject 1', ae: 'grade 1', time:1, line_id: 1, AESER_NEW: 'Serious Event', isContinued: true},
{subject: 'Subject 12', ae: 'grade 2', time: 20, line_id: 2, AESER_NEW: 'N', isContinued: false},
{subject: 'Subject 1', ae: 'grade 2', time: 1, line_id: 2, AESER_NEW: 'N', isContinued: true},
{subject: 'Subject 1', ae: 'grade 3', time: 2, end: 20, line_id: 3, AESER_NEW: 'Serious Event', isContinued: true},
{subject: 'Subject 1', ae: 'grade 3', time: 1, end: 10, line_id: 3, AESER_NEW: 'N', isContinued: false},
{subject: 'Subject 1', ae: 'grade 4', time: 20, end: 40, line_id: 4, AESER_NEW: 'N', isContinued: true},
];
p = Plot.plot({
y: {
type: 'band',
label: null
},
marks: [
Plot.line(data, {
x: 'time',
y: 'line_id',
z: 'line_id',
stroke: 'ae'
}),
Plot.axisY({color: 'transparent'}),
Plot.dot(
data, {
x: "time",
y: "line_id",
fill: d => colorScale(d.ae),
stroke: d => colorScale(d.ae),
symbol: d => d.AESER_NEW === "Serious Event" ? starshape : 'circle'
}),
Plot.dot(
data,
{
x: "time",
y: "line_id",
fill: 'transparent',
stroke: 'none',
r: 20,
render: (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context, next);
const children = d3.select(g).selectChildren();
children
.on("click", function (event, i) {
mutable datum = data[i];
})
.on('mousemove', function(event, i) {
// Get the toolTip, update the position, and append the inner html depending on your content
// I tend to use template literal to more easily output variables.
toolTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(
`
Tooltip for <strong>${data[i].time}</strong>
`
);
// Optional cursor change on target
d3.select(event.target).style("cursor", "pointer");
})
.on('mouseout', function(event, d) {
// Hide tooltip on mouse out
toolTip.style("display", "none"); // Hide toolTip
// Optional cursor change removed
d3.select(event.target).style("cursor", "default");
})
return g;
}
}),
Plot.tip({fontSize: 20})
]
})
d3.select(p).on("click", function (event, i) {
d3.selectAll("[aria-label='tip']").style("visibility", "hidden");
})
.on("mousemove", function(event, i) {
d3.selectAll("[aria-label='tip']").style("visibility", "visible");
})
arrowheadshape = ({
draw: (context, size) => {
context.lineJoin = "round"; // Round the corners where the lines meet
context.lineCap = "round"; // Round the ends of the lines
// Start drawing the left-facing arrow with two lines
context.moveTo(0, 0); // Start at the center
context.lineTo(-5, -5); // First line (left-up diagonal)
context.moveTo(0, 0); // Start a new line from the center
context.lineTo(-5, 5); // Second line (left-down diagonal)
}
})
starshape = ({
draw: (context, size) => {
context.lineJoin = "round";
context.lineCap = "round";
// Vertical line
context.moveTo(0, -5);
context.lineTo(0, 5);
// Horizontal line
context.moveTo(-5, 0);
context.lineTo(5, 0);
// Diagonal line (top-left to bottom-right)
context.moveTo(-4, -4);
context.lineTo(4, 4);
// Diagonal line (top-right to bottom-left)
context.moveTo(4, -4);
context.lineTo(-4, 4);
}
});
colorScale = d3.scaleOrdinal()
.domain(['grade 1', 'grade 2', 'grade 3', 'grade 4'])
.range(['green', 'gold', 'orange', 'red']);
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.
