31:Ta74,chart = { graph_replay; const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const [xCenter, yCenter] = [width / 2, height / 2]; const svg = container .append("svg") .attr("width", width) .attr("height", height); yield container.node(); const groups = svg .selectAll("g") .data(data) .enter() .append("g") .attr("id", (d) => d.name); const largestCircleSize = Math.max.apply( Math, data.map((d) => d.radius * height) ); const circles = groups .append("circle") .style("cursor", "pointer") .attr("cx", xCenter) .attr("cy", yCenter) .attr("r", 0) .attr("stroke", (d) => (d.border ? d.border : "transparent")) .attr( "fill", (_, i) => `hsl(0deg 100% ${100 - getRangeNumber(i / (data.length - 1), 10, 80)}%)` ) .call(tooltip, tooltipDiv); const rightMarginText = 160; const title = groups .append("text") .style("opacity", 0) .style("color", "rgb(51, 51, 51)") .style("font-size", "15px") .style("font-style", "italic") .style("margin-bottom", "15px") .style("line-height", "1.3em") .attr("alignment-baseline", "central") .attr("x", (_, i) => (i % 2 == 0 ? width - rightMarginText : 50)) .attr("y", (_, i) => { const [min, max] = [50, height - 50]; const textLocationY = getRangeNumber(i / (data.length - 1), min, max); return textLocationY; }) .text((d) => d.name); const description = groups .append("text") .style("opacity", 0) .style("color", "rgb(51, 51, 51)") .style("font-size", "11px") .style("line-height", "1.3em") .attr("alignment-baseline", "central") .attr("x", (_, i) => (i % 2 == 0 ? width - rightMarginText : 50)) .attr("y", (_, i) => { const [min, max] = [50, height - 50]; const textLocationY = getRangeNumber(i / (data.length - 1), min, max) + 25; return textLocationY; }) .text((d) => d.description) .call(wrap, rightMarginText); function update() { const circleAnimationTime = 500; circles .transition() .ease(d3.easePolyInOut) .duration(circleAnimationTime) .attr("r", (d) => d.radius * height); groups.call(linkTextToCircle, xCenter, yCenter, circleAnimationTime, true); title .transition() .delay(800) .ease(d3.easeCubicInOut) .duration(250) .style("opacity", 1); description .transition() .delay(950) .ease(d3.easeCubicInOut) .duration(250) .style("opacity", 1); } update(); }32:T8a9,tooltip = (selectionGroup, tooltipDiv) => { // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 8; let style; selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum()); style = setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this), style); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } function setContents(datum) { const dataToShow = Object.keys(datum) .filter((key) => key === "answer") .reduce((obj, key) => { obj[key] = datum[key]; return obj; }, {}); tooltipDiv .selectAll("p") .data(Object.entries(dataToShow)) .join("p") .filter(([_, value]) => value !== null && value !== undefined) .html(([key, value]) => `${key}: ${value}`); } }33:Ta88,linkTextToCircle = function (selection, xCenter, yCenter, animationStart) { const dataByDecreasingSize = data.sort((a, b) => a.radius < b.radius); selection.each(function (d, i) { const groupNode = d3.select(this); const textNode = groupNode.select("text"); const [x, y] = [ parseFloat(textNode.attr("x")), parseFloat(textNode.attr("y")) ]; const currentCircleIndex = dataByDecreasingSize.findIndex( (el) => el.radius == d.radius ); const smallerCircleRadius = dataByDecreasingSize?.[currentCircleIndex + 1]?.radius ?? 0; const currCircleRadius = d.radius; const diffInRadius = (smallerCircleRadius + (currCircleRadius - smallerCircleRadius) / 2) * height; const halfBandY = { top: yCenter + diffInRadius, bot: yCenter - diffInRadius }; const lineColor = "#cccccc"; const [start, end] = [ { x: xCenter, y: currentCircleIndex == dataByDecreasingSize.length - 1 ? yCenter : halfBandY["bot"] }, { x: x < xCenter ? x + textNode.node().getComputedTextLength() + 10 : x - 10, y } ]; const lineNode = groupNode .append("path") .style("pointer-events", "none") .attr("stroke-linecap", "round") .attr("stroke", lineColor) .attr("stroke-width", 2) .attr("fill", "none") .attr("d", calculateLink(start, end)); const startCircle = groupNode .append("circle") .style("opacity", 0) .style("pointer-events", "none") .attr("cx", start.x) .attr("cy", start.y) .attr("r", 4) .attr("fill", lineColor); const endCircle = groupNode .append("circle") .style("opacity", 0) .style("pointer-events", "none") .attr("cx", end.x) .attr("cy", end.y) .attr("r", 4) .attr("fill", lineColor); function update(duration) { const circleDuration = 250; const length = lineNode.node().getTotalLength(); startCircle .transition() .delay(animationStart) .ease(d3.easeLinear) .duration(circleDuration) .style("opacity", 1); lineNode .attr("stroke-dasharray", length + " " + length) .attr("stroke-dashoffset", length) .transition() .delay(animationStart) .ease(d3.easeCubicInOut) .attr("stroke-dashoffset", 0) .duration(duration); endCircle .transition() .delay(animationStart + duration) .ease(d3.easeLinear) .duration(circleDuration) .style("opacity", 1); } update(500); }); }34:[{"id":"924543d727af885b25b2a038896dc37247832b28be2df168fea6570c3f0c4d9a40f8668647f5294aa3b4276d3fc6899312f44de940fb41608eba66afcbbea3a6","href":"https://static.observableusercontent.com/files/924543d727af885b25b2a038896dc37247832b28be2df168fea6570c3f0c4d9a40f8668647f5294aa3b4276d3fc6899312f44de940fb41608eba66afcbbea3a6","name":"image.png","type":"image/png","lastModified":1657562769065.26,"size":310723}] 2f:{"title":"Onion model of Korthagen","cells":[{"id":1071,"value":"md`# Onion model of Korthagen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"In the visualization below you can see the onion model of Korthagen which is a self-reflection method.\nFeel free to implement this graph if you need an onion visualization.\n\n

\n ${await FileAttachment(\"image.png\").image()}\n

Fig 1: Onion model of Korthagen reference image.

\n\n\n*P.s. if you hover over the circles there's a tooltip which would allow you to implement your answer to that self-reflection aspect.*","pinned":false,"hidden":false,"mode":"md"},{"id":1122,"value":"viewof graph_replay = html`