31:T532,chart = { restart; let container = html`

`; yield container; const words = d3 .select(container) .append("div") .attr("class", "graph_container-words"); words .selectAll("div") .data(d3.shuffle(mergedCat)) .join("p") .attr("class", "selector graph-selector") .attr("data-attr", (d) => d["@id"]) .text((d) => d["o:title"]) //.style("border-color", (d) => color(d.type)) .on("mouseover", highliteLinks) .on("mouseout", (d) => { d3.selectAll("p").classed("active", false); d3.selectAll(".link").classed("active", false); }) .on("click", updateItems); const container_position = words.node().getBoundingClientRect(); const svg = d3 .select(container) .append("svg") .style("position", "absolute") .style("width", container_position.width) .style("height", "100%") .style("top", 0); let link = svg .selectAll(".link") .data(graph_data.links) .enter() .filter( (d) => d3.select(`.graph-selector[data-attr="${d.target}"]`).node() != null ) .append("path") .attr("fill", "none") .attr("class", "link") .attr("source", (d) => d.source) .attr("target", (d) => d.target); link.attr("d", arc) .attr("d", linkArc); return container; }32:T897,function arc(d) { // default pairs of coordinates to generate lines and arcs const startOfArc = getCenter(d.source); const endOfArc = getCenter(d.target); // default starting points for arc generation const startX = startOfArc[0]; const startY = startOfArc[1]; const endX = endOfArc[0]; const endY = endOfArc[1]; // Middle x, middle y and circle radius (useful to generate arcs) const dx = startX > endX ? startX - endX : endX - startX; const dy = startX > endX ? startY - endY : endY - startY; let dr = 0; // Determines if arc of straight line (straight lines = concurrent events) const isArc = startX !== endX; // Determines direction of path intersection on point A let position = d.position === "follows" ? 1 : 0; // Achieve consistency for arc sweep-flag by forcing smaller // value to always be first in generating the curve let startingPoint = startX > endX ? [endX, endY] : [startX, startY]; let endPoint = startX > endX ? [startX, startY] : [endX, endY]; // tentative algorithm to avoid points with too steep angles to mess arc flag let angle = Math.atan2(endY - startY, endX - startX) * (180 / Math.PI); if (angle > -100 && angle < -75) { if (d.position === "follows") { position = 0; } } else if (angle < 100 && angle > 75 && d.position === "precedes") { position = 1; } //Checking result of calculation to avoid negative square numbers for dr (arc radius) dr = dx + dy * dy + dx <= 0 ? Math.sqrt(-(dx + dy * dy + dx)) : Math.sqrt(dx + dy * dy + dx); // Check which type of element shall be drawn if (isArc) { // validity check for dr and then draws arc return !isNaN(dr) ? "M" + startingPoint[0] + "," + startingPoint[1] + "A" + dr + "," + dr + " 0 0," + position + " " + endPoint[0] + "," + endPoint[1] : "M" + dx + "," + dy + "z"; } else { // draws a straight line if concur return ( "M" + startingPoint[0] + "," + startingPoint[1] + "L" + endPoint[0] + "," + endPoint[1] ); } }33:T9f1,34:[] 2f:{"title":"ReFa Graph Navigation","cells":[{"id":550,"value":"# ReFa Graph Navigation","pinned":false,"hidden":false,"mode":"md"},{"id":1735,"value":"This notebook allows to browse Linked Open Data from the ReFA project by the UCLAB.\n\nIn the foreground, a table with a restricted selection of paintings, prints, people and terms from the project database is represented. Objects that have links are joined by a line. \n","pinned":false,"hidden":false,"mode":"md"},{"id":2190,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"Selecting an element from the previous graph loads it into the lower frame. Metadata about the item and related objects are displayed, allowing the possibility of scrolling horizontally through the artwork in the database.","pinned":false,"hidden":false,"mode":"md"},{"id":1759,"value":"fullscreen = {\n const button = html`