31:Tea7,chart = { const paddingLabel = 2; const zoom = d3.zoom().scaleExtent([0, 4]).on("zoom", zoomed); let dataIds = []; const simulation = d3 .forceSimulation(nodes, links) .force("link",d3.forceLink(links).id((d) => d.id).strength(0)) .on("tick", function () { ticked(); updateVisibleLinks(); }) .force("charge", d3.forceManyBody().strength(100)) .force("center", d3.forceCenter(width / 2, height / 2)) //.force("x", d3.forceX().strength(.2)); const container = d3 .create("div") .attr("class", "container") .style("font", "18px sans-serif") const markdown = container .append("div") .attr("class", "markdown") //.on("load", updateVisibleLinks) .on("scroll", updateVisibleLinks) .html(markdown2Html); const svg = container .append("svg") .attr("viewBox", [0, 0, width / 2, height]); svg.call(zoom); const g = svg.append("g"); const link = g .append("g") .attr("fill", "none") .attr("stroke-width", 1) .selectAll("path") .data(links) .join("path") .attr("stroke", "#f2f2f2"); const node = g .append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g"); //node.append("circle").attr("stroke", "none").attr("r", 4); const label = node .join("g") .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("class", "label") .attr("data-attr", (d) => d.id) label .append("text") .attr("class", "text") .text((d) => d.title) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("dy", "1em") .call(wrap); let firstTick = true; let firstTickAction = function () { label.select(function (d, i) { d.bbox = this.getBBox(); d.rx = d.bbox.width / 2 + paddingLabel; d.ry = d.bbox.height / 2 + paddingLabel; }); simulation.force("ellipseForce", ellipseForce(paddingLabel, 0.05, 0.005)); firstTick = false; }; function ticked() { if (firstTick) { firstTickAction(); } node.attr("transform", (d) => `translate(${d.x},${d.y})`); label.attr("transform", (d) => `translate(${d.x}, ${d.y})`); //link.attr("d", arc); link.attr("d", linkArc); } invalidation.then(() => simulation.stop()); function zoomed() { g.attr("transform", d3.zoomTransform(this)); } // highlite on graph and jump while scrolling function updateVisibleLinks() { const links = markdown.node().querySelectorAll("a"); const visibleLinks = Array.from(links).filter((a) => { const linkRect = a.getBoundingClientRect(); const containerRect = container.node().getBoundingClientRect(); return ( linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom ); }); dataIds = visibleLinks.map((a) => a.getAttribute("data-id")); label.attr("color", (d) => { let checkView = dataIds.find((element) => element == d.id); let checkItems = !!items.find((element) => element.url == d.id); return checkView ? "blue" : checkItems ? "black" : "#919191"; }); const firstVisibleNode = nodes.find((node) => dataIds.includes(node.id)); if (firstVisibleNode) { const centerX = firstVisibleNode.x; const centerY = firstVisibleNode.y; const svgWidth = svg.node().getBoundingClientRect().width; const svgHeight = svg.node().getBoundingClientRect().height; const zoomTransform = d3.zoomIdentity.translate(svgWidth / 2 - centerX - wrapWidth/2, svgHeight / 2 - centerY).scale(1); svg.call(zoom.transform, zoomTransform); } } return container.node(); }32:T1a46,viewof markdown = Inputs.textarea({ rows: 100, value: `# Allegory of the Five Senses The sense *Visus* is accompanied by the animals eagle, lynx, cat or owl or the attributes telescope, magnifying glass, spectacles or [mirror](10538). The sense of hearing (Auditus) is accompanied by a boar, a mole or deer or a musical instrument, usually the lute. The sense of smell (Oderatus) has as companion either a vulture or dog or as an attribute a [flower](10300), usually the [carnation](45235). Taste (Gustus), as in this example *[The Taste](538)*, is accompanied by a [monkey](10475) or represented with fruits, a fruit basket or with [wine glass](10431). As fifth sense is considered to be the sense of touch (tactus), which is accompanied either by a spider, a turtle, a scorpion or a [bird](10587) with a symbolic content, such as a [ornamental bird](583) pecking into the hand, or by a harp. The Five Senses Cycle by [Cornelis Cort](45189), based on designs by Frans Floris (1561), led the way in its dissemination. In it, he combined two concepts that were already common in the Middle Ages: Female personifications of the senses endowed with attributes (significant objects) are accompanied by symbolising sense-gifted animals [symbolising sense-gifted animals](10587). Such pictorial cycles or individual scenes, in each of which one sense is singled out and interpreted as a symbol, were particularly popular. Similarly, allegorical representations of the five senses were created from the end of the 16th century onwards. For example, after 1587 Adam van Noort created the drawings for two [engravings](42994) in which the Five Senses are united on one sheet. In the engraving executed by [Adriane Collaert](42994) a new realistic conception of the subject can be discerned, with which the change from the original allegory to a bourgeois social image begins. Abraham Govaerts and Ambrosius Francken II (?) placed the Allegory of the Five Senses from 1624 in a landscape setting. The diversity of allegorical representations of the five senses, especially in Flemish and Dutch painting in the 17th century, produced large-scale allegories and small cabinet paintings. Cornelis de Vos, Adriaen van Ostade, Jan Miense Molenaer, Barent Fabritius, Ambrosius Francken the Younger and Herman van Aldewereld created such pictorial cycles. French still life painting of the 1620s and 1630s also integrated the theme of the Five Senses. Furthermore, the biblical story of the Prodigal Son was interwoven with that of the Five Senses from the end of the 16th century, especially in the Netherlands. Scenes in inns with people playing music, drinking and smoking illustrate this. Painters such as Simon de Vos and David Teniers the Younger spread this pictorial theme. Another group of representations are the already mentioned narrative representations in the form of genre scenes: Until the 19th century, this type of painting, represented by artists such as Philip van Dijk, Luca Giordano, Gerard de Lairesse, Jacob Duck or Michiel Sweerts, was popular. In the painting from the Lipperheide Collection, the representation of the Five Senses was combined with a family portrait. ## Portrait of the Five Children of Count Philipp Ernst zu Hohenlohe-Langenburg as Allegory of the Five Senses The small-format painting in landscape format shows three women and two men standing in a landscape as an allegory of the five senses. The figures are standing on a narrow grassy hill, in the foreground, the three ladies on the left and two gentlemen on the right. The lady at the left edge of the picture is playing a mandolin. Next to her, facing the first lady, are the other two ladies. One of them holds a mirror in her right hand, the other one lifts her upper garment slightly and is pecked in the finger by a green parrot sitting on her hand. Separated by a narrow path that meanders into the depths parallel to a river, the two gentlemen stand under the tree on the right. While the former, his back turned to the ladies, reaches into the tree for a red fruit with his left hand, the one standing next to him brings a blossom to his face with his right. ### Deduction The reference in the [archive](1602) to this painting, originally called *Five Senses*, with anonymous authorship, is to another portrait in the Lipperheide collection under the heading Notes: The [painting](607), originally identified by means of the [archive](3777) as a *Junger Mann in einem Schoßwams* by an anonymous artist, shows a young nobleman who bears an optical resemblance to one of the gentlemen from the picture of the *Five Children of Count Philipp Ernst zu Hohenlohe-Langenburg as an Allegory of the Five Senses*. By means of the numbers and letters "1.6.4.7 Henry Fridezic Comte de Holax s [Fridezic alternatively Frideric; Holax alternatively Holar or Holac; free-standing s diagonally crossed out]", which is visible in this [photograph](3776), a search could be made for the sitter. The sitter is therefore Heinrich Friedrich zu Hohenlohe-Langenburg (1624-1699). Derived from other small-format paintings in the possession of the Hohenlohe family, it was thus possible to establish not only the identity of the young man in the single portrait, but also the identity of the five siblings in the Allergy of the Five Senses. Furthermore, a comparison of the material support of the single portrait and the [family portrait](1560), here irradiated with ultraviolet light for better visualisation, allowed the conclusion that the two works from the Lipperheide collection were created by the same artist. It is the court painter [Joachim Georg Creuzfelder](9350). ### Attributes he present *[Picture of the Five Children of Count Philipp Ernst zu Hohenlohe-Langenburg as Allegory of the Five Senses](159)* thus shows the five children of Count Philipp Ernst zu Hohenlohe-Langenburg. From left to right are to be seen: ["Eva Christina"](9390) as ["Auditus"](10613) (Hearing) with a lute, Anna Magdalena as [Visus](10536) (Seeing) with a [Mirror](10946), Maria Juliana as [Tactus](10586) (Feeling) with a bird pecking her hand, Joachim Albrecht as [Gustus](10913) (Tasting) with an apple and [Heinrich Friedrich](607) as Odoratus (Smelling) with a flower. Thus this is a sibling portrait combined with an allegory of the five senses. This is unique in the oeuvre of the painter Joachim Georg Creuzfelder. In this portrait of siblings, the young Hohenlohe court painter combines the common iconographic sign inventory of the allegory of the Five Senses with a family portrait. Creuzfelder chose a simple assignment of five sense attributes to one portrait each, in which no biographically based assignment pattern can be read. ` })33:T89d,function arc(d) { // default pairs of coordinates to generate lines and arcs const startOfArc = getCenter(d.source.id); const endOfArc = getCenter(d.target.id); // 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] ); } }34:T1699,ellipseForce = function (padding, innerRepulsion, outerRepulsion) { // from https://bl.ocks.org/jpurma/6dd2081cf25a5d2dfcdcab1a4868f237 var nodes; function constant(x) { return function() { return x; }; } if (typeof padding !== "function") padding = constant(padding == null ? 4 : +padding); innerRepulsion = innerRepulsion == null ? 0.5 : +innerRepulsion; outerRepulsion = outerRepulsion == null ? 0.5 : +outerRepulsion; function force(alpha) { var i, j, n = nodes.length, // dimensions of this node node, my_padding, my_w, my_h, my_x, my_y, // often used multiples my_w2, my_h2, my_wh, // dimensions of the other node other, other_padding, other_w, other_h, other_x, other_y, // distance between nodes dist_x, dist_y, // components for the overall result force_ratio, dist, gap, repulsion, x_component, y_component, // computing elliptical force g, g2, x1, y1, x2, y2, d1, d2, force_ratio1, force_ratio2, // parameters myOuterRepulsion = outerRepulsion * 16; for (i = 0; i < n; ++i) { node = nodes[i]; my_padding = +padding(node, i, nodes); my_w = node.rx + my_padding; my_h = node.ry + my_padding; my_w2 = my_w * my_w; my_h2 = my_h * my_h; my_wh = my_w * my_h; my_x = node.x + node.vx; my_y = node.y + node.vy; for (j = 0; j < n; ++j) { if (j == i) { continue; } other = nodes[j]; other_padding = +padding(other, j, nodes); other_w = other.rx + other_padding; other_h = other.ry + other_padding; other_x = other.x + other.vx; other_y = other.y + other.vy; dist_x = my_x - other_x; dist_y = my_y - other_y; if (dist_x == 0 && dist_y == 0) { node.vx += (Math.random() * 4) - 2; node.vy += (Math.random() * 4) - 2; continue; } else if (dist_x == 0) { force_ratio = (my_h / my_w + other_h / other_w) / 2; dist = Math.abs(dist_y); gap = dist - my_h - other_h; } else if (dist_y == 0) { force_ratio = 1; dist = Math.abs(dist_x); gap = dist - my_w - other_w; } else { // ellipse is defined as x^2 y^2 // --- + --- = 1 // w^2 h^2 // here x,y are points on ellipse's arc. // we have a line going between center points of two ellipses and we want to know // the point where it crosses the ellipse's arc. Because we know the line, we // know that y = g * x, where g = dist_y / dist_x; // now the only unknown in ellipse above is x, and thus we can find it by // moving pieces around (pen and paper work). equation becomes: // w * h // x = --------------------- // sqrt(h^2 + g^2 * w^2) g2 = g * g; x1 = my_wh / Math.sqrt(my_h2 + g2 * my_w2); y1 = g * x1; // the length of the little bit from the center of ellipse to its margin. // For circle it would be 'r', but for ellipse it varies. d1 = Math.sqrt(x1 * x1 + y1 * y1); // Strength of force that this ellipse eminates is modified by ratio of this bit // to the ellipse's width. (It doesn't matter if we use width or height as reference // point) force_ratio1 = d1 / my_w; // And same for the other ellipse: x2 = (other_w * other_h) / Math.sqrt(other_h * other_h + g2 * other_w * other_w); y2 = g * x2; d2 = Math.sqrt(x2 * x2 + y2 * y2); force_ratio2 = d2 / other_w; // now we can calculate the gap or overlap between two ellipses, and force ratio on // how strongly they should push as average of their force_ratios dist = Math.sqrt(dist_x * dist_x + dist_y * dist_y); gap = dist - d2 - d1; force_ratio = (force_ratio1 + force_ratio2) / 2; } x_component = dist_x / dist; y_component = dist_y / dist; if (gap < 0) { // force GROWS as gap goes further into negative repulsion = Math.min(Math.max(1.0, innerRepulsion * force_ratio * -gap), 5.0); node.vx += repulsion * x_component; node.vy += repulsion * y_component; } else { // force DIMINISHES as gap becomes larger repulsion = Math.min(20.0, (force_ratio * myOuterRepulsion * alpha) / gap); node.vx += repulsion * x_component; node.vy += repulsion * y_component; } } } } force.initialize = function(my_nodes) { nodes = my_nodes; }; force.outerRepulsion = function(my_outerRepulsion) { if (arguments.length) { outerRepulsion = +my_outerRepulsion; return force; } else { return outerRepulsion; } }; force.innerRepulsion = function(my_innerRepulsion) { if (arguments.length) { innerRepulsion = +my_innerRepulsion; return force; } else { return innerRepulsion; } }; force.padding = function(my_padding) { if (arguments.length) { if (typeof my_padding === "function") { padding = my_padding; } else { padding = constant(+my_padding); } return force; } else { return padding; } }; return force; };35:[] 2f:{"title":"ReFa markdown to Graph","cells":[{"id":0,"value":"# ReFa markdown to Graph","pinned":false,"hidden":false,"mode":"md"},{"id":1242,"value":"This notebooks is a prototype to create interactive essay, by linking words to entities in the database from the ReFa project by the UCLAB. It moved to [this](https://github.com/uclab-potsdam/refa-essays) Github Repository, structured in Svelte for more control on the events.","pinned":false,"hidden":false,"mode":"md"},{"id":1334,"value":"fullscreen = {\n const button = html`