panelChart = { const svg = d3 .create("svg") .attr("class", "chartSvg") .style("font-family", "'PetitaLight', sans-serif"); const width = 1536; const height = 1200; if (!d3.select("#tooltip-style").node()) { d3.select("head").append("style").attr("id", "tooltip-style").text(` .darkTooltip { position: absolute; text-align: centre; border: 1px solid grey; padding: 5px; font: 14px sans-serif; background: white; border-radius: 4px; pointer-events: none; width: auto; height: auto; max-width: 180px; } `); } let tooltip = d3.select(".darkTooltip"); if (!tooltip.node()) { tooltip = d3 .select("body") .append("div") .attr("class", "darkTooltip") .html(""); } const chosenCharacterOption = characterOptions.find( (f) => f.value === chosenCharacter ); const backgroundFill = chosenCharacterOption.colors.background; const fillBrightish = chosenCharacterOption.colors.brightish; const fillBright = chosenCharacterOption.colors.bright; const fillMid = chosenCharacterOption.colors.mid; const nameFontSize = 120; const surnameFontSize = 70; const yearFontSize = 20; const worldFontSize = 28; const smallerFontSize = 14; svg .attr("viewBox", [0, 0, width, height]) .style("background-color", backgroundFill); const backgroundPathGroup = svg.append("g"); const pathGroup = svg.append("g"); const linksGroup = svg.append("g"); const dotsGroup = svg.append("g"); const fontFill = fillMid; const linkLegendTransform = `translate(${width / 2 - 250},${height - 30})`; const linkLegend = svg.append("g").attr("transform", linkLegendTransform); linkLegend .append("path") .attr("d", "M0,0 L12,0Z") .attr( "stroke", getLinkStroke({ type: "Succesfull Time Travel" }, chosenCharacterOption) ) .attr("stroke-width", 1); linkLegend .append("text") .attr("font-size", smallerFontSize) .attr("fill", chosenCharacterOption.colors.bright) .attr("x", 15) .attr("y", smallerFontSize * 0.3) .text("Time Travel"); linkLegend .append("path") .attr("d", "M0,0 L12,0") .attr( "stroke-dasharray", getLinkStrokeArray({ type: "Failed Time Travel" }) ) .attr( "stroke", getLinkStroke({ type: "Failed Time Travel" }, chosenCharacterOption) ) .attr("stroke-width", 1) .attr("transform", `translate(85,0)`); linkLegend .append("text") .attr("font-size", smallerFontSize) .attr("fill", chosenCharacterOption.colors.bright) .attr("x", 100) .attr("y", smallerFontSize * 0.3) .text("Failed Time Travel"); linkLegend .append("path") .attr("d", "M0,0 L12,0") .attr( "stroke", getLinkStroke({ type: "World Swap" }, chosenCharacterOption) ) .attr("stroke-width", getLinkStrokeWidth({ type: "World Swap" })) .attr("stroke-opacity", getLinkOpacity({ type: "World Swap" })) .attr("transform", `translate(205,0)`); linkLegend .append("text") .attr("font-size", smallerFontSize) .attr("fill", chosenCharacterOption.colors.bright) .attr("x", 220) .attr("y", smallerFontSize * 0.3) .text("World Swap"); linkLegend .append("path") .attr("d", "M0,0 L12,0") .attr( "stroke", getLinkStroke({ type: "Same Event" }, chosenCharacterOption) ) .attr("stroke-width", 1) .attr("transform", `translate(295,0)`); linkLegend .append("text") .attr("font-size", smallerFontSize) .attr("fill", chosenCharacterOption.colors.bright) .attr("x", 310) .attr("y", smallerFontSize * 0.3) .text("Same Event"); linkLegend .append("path") .attr("d", "M0,0 L12,0") .attr("stroke", getLinkStroke({ type: "Normal" }, chosenCharacterOption)) .attr("stroke-width", 1) .attr("transform", `translate(395,0)`); linkLegend .append("text") .attr("font-size", smallerFontSize) .attr("fill", chosenCharacterOption.colors.bright) .attr("x", 410) .attr("y", smallerFontSize * 0.3) .text("Normal"); svg .append("text") .attr("pointer-events", "none") .attr("transform", `translate(20,150) scale(1.2,1)`) .attr("font-size", nameFontSize * 1.4) .attr("fill", fillBrightish) .text(chosenCharacter === "" ? "DA" : ""); svg .append("text") .attr("pointer-events", "none") .attr("transform", `translate(420,150) scale(-1.2,1)`) .attr("font-size", nameFontSize * 1.4) .attr("fill", fillBrightish) .text(chosenCharacter === "" ? "R" : ""); svg .append("text") .attr("pointer-events", "none") .attr("transform", `translate(410,150) scale(1.2,1)`) .attr("font-size", nameFontSize * 1.4) .attr("fill", fillBrightish) .text(chosenCharacter === "" ? "K" : ""); svg .append("text") .attr("pointer-events", "none") .attr("transform", `translate(35,200)`) .attr("font-size", yearFontSize * 1.6) .attr("fill", fillBrightish) .text( chosenCharacter === "" ? "A Graph Drawing Contest entry by BM Data Visualisation" : "" ); svg .append("path") .attr("pointer-events", "none") .attr("d", threadPath) .attr("stroke", colors.apocalypseRed) .attr("fill", "transparent") .attr("stroke-width", 3) .attr("transform", "translate(0,280)"); svg .append("rect") .attr("pointer-events", "none") .attr("width", width * 0.275) .attr("height", 200) .attr("fill", colors.portalWhite) .attr("x", width - width * 0.275 - 20) .attr("y", 30) .attr("rx", 5) .attr("ry", 5); svg .append("rect") .attr("pointer-events", "none") .attr("fill", fillBright) .attr("x", 40) .attr("y", 35) .attr("width", chosenCharacter === "" ? 0 : 320) .attr("height", 210); svg .append("text") .attr("pointer-events", "none") .attr("x", 390) .attr("y", 120) .attr("font-size", nameFontSize) .attr("fill", fillBrightish) .text(chosenCharacterOption.value.toUpperCase()); svg .append("text") .attr("pointer-events", "none") .attr("x", 395) .attr("y", 200) .attr("font-size", surnameFontSize) .attr("fill", fillMid) .text(chosenCharacterOption.surname); svg .append("text") .attr("pointer-events", "none") .attr("transform", `translate(${width * 0.85},${55})`) .attr("dy", 0) .attr("font-size", yearFontSize) .attr("font-weight", 600) .attr("text-anchor", "middle") .attr("fill", colors.shadowGrey) .text(chosenCharacterOption.title); svg .append("text") .attr("pointer-events", "none") .attr( "transform", `translate(${width * 0.85},${85 + (chosenCharacter === "" ? 10 : 0)})` ) .attr("dy", 0) .attr("font-size", chosenCharacter === "" ? 48 : yearFontSize) .attr("text-anchor", "middle") .attr("fill", colors.shadowGrey) .text(chosenCharacterOption.description) .call(wrap, width * 0.29, chosenCharacter === "" ? 48 : yearFontSize); const defSvg = d3.create("svg"); const defs = defSvg.append("defs"); let backgroundImage = await imageToDataURL(chosenCharacterOption.photo); // let backgroundImage = await chosenCharacterOption.photo; defs .append("pattern") .attr("id", "backgroundImage") .attr("width", 1) .attr("height", 1) .append("image") .attr("xlink:href", backgroundImage) .attr("width", 400) .attr("height", 200); svg.node().appendChild(defSvg.node()); svg .append("rect") .attr("opacity", chosenCharacter === "" ? 0 : 1) .attr("pointer-events", "none") .attr("x", 0) .attr("y", 40) .attr("width", 400) .attr("height", 200) .style("fill", "url(#backgroundImage)"); // dot legend const outerCircleLegendTransform = `translate(${width / 2 - 103},${ height - 70 })`; svg .append("circle") .attr("r", minDotRadius * 4) .attr("fill", fillBright) .attr("fill-opacity", 0.2) // .attr("cx", -50) .attr("transform", outerCircleLegendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", outerCircleLegendTransform) .attr("x", minDotRadius * 6) .attr("y", smallerFontSize * 0.3) .text("Wrong World"); svg .append("circle") .attr("r", minDotRadius * 4) .attr("fill", colors.temporalGold) .attr("fill-opacity", 0.2) .attr("cx", 110) .attr("transform", outerCircleLegendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", outerCircleLegendTransform) .attr("x", 110 + minDotRadius * 6) .attr("y", smallerFontSize * 0.3) .text("Meeting of Self"); const legendTransform = `translate(${width / 2 - 203},${height - 50})`; svg .append("circle") .attr("r", minDotRadius) .attr("fill", colors.wormholeBlue) .attr("cx", -50) .attr("transform", legendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", legendTransform) .attr("x", -55 + minDotRadius * 5) .attr("y", smallerFontSize * 0.3) .text("Event"); svg .append("circle") .attr("r", minDotRadius) .attr("fill", colors.apocalypseRed) .attr("transform", legendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", legendTransform) .attr("x", minDotRadius * 3) .attr("y", smallerFontSize * 0.3) .text("Death"); svg .append("circle") .attr("r", minDotRadius) .attr("fill", colors.nuclearGreen) .attr("cx", 55) .attr("transform", legendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", legendTransform) .attr("x", 50 + minDotRadius * 5) .attr("y", smallerFontSize * 0.3) .text("Important Trigger"); svg .append("circle") .attr("r", minDotRadius) .attr("fill", colors.caveEarth) .attr("cx", 170) .attr("transform", legendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", legendTransform) .attr("x", 165 + minDotRadius * 5) .attr("y", smallerFontSize * 0.3) .text("Quantum Entanglement"); svg .append("circle") .attr("r", minDotRadius) .attr("fill", colors.wormholeBlue) .attr("cx", 320) .attr("transform", legendTransform); svg .append("text") .attr("font-size", smallerFontSize) .attr("fill", fillBright) .attr("transform", legendTransform) .attr("x", 315 + minDotRadius * 5) .attr("y", smallerFontSize * 0.3) .text("Event (no participants)"); const margins = { left: 70, right: 70, top: 20, bottom: 20, mid: 0 }; const pathHeight = 660; svg .append("text") .attr("pointer-events", "none") .attr("font-size", worldFontSize) .attr("fill", fillMid) .attr("text-anchor", "start") .attr( "transform", `translate(${margins.left * 0.35},${height - margins.bottom}) ` ) .text("MARTHA's world"); svg .append("text") .attr("pointer-events", "none") .attr("font-size", worldFontSize) .attr("fill", fillMid) .attr("text-anchor", "end") .attr( "transform", `translate(${width - margins.left * 0.35},${height - margins.bottom}) ` ) .text("JONAS's world"); svg .append("path") .attr("pointer-events", "none") // .attr("d", newPath) .attr("id", "infinityPath") .attr("stroke", "#808080") .attr("stroke-width", 1) .attr("fill", "transparent") .attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); // tree legend svg .append("rect") .attr("x", 5) .attr("y", 295) .attr("width", 180) .attr("height", 70) .attr("fill", "transparent") .attr("rx", 5) .attr("ry", 5); svg .append("svg") .attr("transform", `translate(8,300)`) .attr("fill", colors.apocalypseRed) .attr("width", 14) .attr("height", 14) .attr("viewBox", userSvgViewBox) .append("path") .attr("d", userSvgPath); svg .append("text") .attr("x", 28) .attr("y", 308.5) .attr("fill", fillBright) .attr("text-anchor", "start") .style("dominant-baseline", "middle") .attr("font-size", smallerFontSize) .text("Paradox Parent"); svg .append("path") .attr("d", "M0,0 L12,0Z") .attr("stroke", colors.apocalypseRed) .attr("stroke-width", 5) .attr("stroke-opacity", "0.3") .attr("transform", `translate(${8},${308.5 + smallerFontSize * 1.1})`); svg .append("path") .attr("d", "M0,0 L12,0Z") .attr("stroke", colors.apocalypseRed) .attr("stroke-dasharray", "2,2") .attr("stroke-width", 2) .attr("transform", `translate(${8},${308.5 + smallerFontSize * 2.2})`); svg .append("path") .attr("d", "M0,0 L12,0Z") .attr("stroke", colors.apocalypseRed) .attr("stroke-width", 2) .attr("transform", `translate(${8},${308.5 + smallerFontSize * 3.3})`); svg .append("text") .attr("x", 28) .attr("y", 308.5 + smallerFontSize * 1.1) .attr("fill", fillBright) .attr("text-anchor", "start") .style("dominant-baseline", "middle") .attr("font-size", smallerFontSize) .text("same person"); svg .append("text") .attr("x", 28) .attr("y", 308.5 + smallerFontSize * 2.2) .attr("fill", fillBright) .attr("text-anchor", "start") .style("dominant-baseline", "middle") .attr("font-size", smallerFontSize) .text("(adoptive) parent / related"); svg .append("text") .attr("x", 28) .attr("y", 308.5 + smallerFontSize * 3.3) .attr("fill", fillBright) .attr("text-anchor", "start") .style("dominant-baseline", "middle") .attr("font-size", smallerFontSize) .text("married / affair"); drawFamilyTree( svg, width, height, margins, pathHeight, fillBrightish, fillBright, backgroundFill, smallerFontSize ); const originLineWidth = 30; const originPathProportion = 0.85; const originStartY = height - margins.bottom - pathHeight * originPathProportion; const jonasStartY = height - margins.bottom - pathHeight * 0.75; const marthaStartY = height - margins.bottom - pathHeight * (1 - 0.75); const originEndY = height - margins.bottom - pathHeight * (1 - originPathProportion); svg .append("line") .attr("x1", width / 2 + minDotRadius + 1) .attr("x2", width / 2 + minDotRadius + 1) .attr("y1", originStartY) .attr("y2", height - margins.bottom - pathHeight / 2 + 20) .attr("stroke-width", 0.5) .attr("stroke", fillBright) .attr("stroke-dasharray", "2,2"); svg .append("line") .attr("class", "originStartLine") .attr("x1", width / 2 + minDotRadius + 1) .attr("x2", width / 2 + minDotRadius + 1) .attr("y1", originStartY) .attr("y2", originStartY) .attr("stroke-width", 1) .attr("stroke", fillBright); svg .append("text") .attr("class", "eventText") .attr( "transform", `translate(${width / 2 + minDotRadius + 10},${originStartY}) rotate(90)` ) .attr("text-anchor", "start") .attr("fill", fillBright) .attr("font-weight", "bold") .attr("pointer-events", "none") .attr("font-size", smallerFontSize * 1.5) .text("21 June 1987"); const lines1971Data = [jonasStartY, originStartY, marthaStartY, originEndY]; const lines1971Group = pathGroup .selectAll(".lines1971Group") .data(lines1971Data) .join((group) => { const enter = group.append("g").attr("class", "lines1971Group"); enter.append("line").attr("class", "dateLine"); enter.append("text").attr("class", "dateYear"); enter.append("text").attr("class", "dateWorld"); return enter; }); lines1971Group .select(".dateLine") .attr("pointer-events", "none") .attr("x1", width / 2 - originLineWidth * 4) .attr( "x2", (d, i) => width / 2 - (i === 1 || i === 2 ? 0 : originLineWidth * 3) ) .attr("y1", (d) => d) .attr("y2", (d) => d) .attr("stroke-width", 0.5) .attr("stroke", fillBright); lines1971Group .select(".dateYear") .attr("id", (d) => (d === originStartY ? "startLabel" : "")) .attr("pointer-events", "none") .attr("x", width / 2 - originLineWidth * 4 - 5) .attr("y", (d) => d - 5) .attr("fill", fillBright) .attr("font-size", yearFontSize) .text("1971"); lines1971Group .select(".dateWorld") .attr("pointer-events", "none") .attr("x", width / 2 - originLineWidth * 4 - 5) .attr("text-anchor", "start") .attr("y", (d) => d + 16) .attr("fill", fillBright) .attr("font-size", smallerFontSize) .text( (d, i) => `${ i === 0 ? "JONAS" : i === 1 ? "ORIGIN" : i === 2 ? "MARTHA" : "ORIGIN END" } world` ); const dots1971 = dotsGroup .selectAll(".dots1971") .data(otherData.allData) .join((group) => { const enter = group.append("g").attr("class", "dots1971"); enter.append("circle").attr("class", "outsideDot"); enter.append("circle").attr("class", "circleDot"); return enter; }); dots1971.attr( "transform", (d) => `translate(${width / 2 - originLineWidth * 4},0)` ); dots1971 .select(".outsideDot") .attr("pointer-events", "none") .attr("r", (d) => (d.WrongWorld.length > 0 ? minDotRadius * 4 : 0)) .attr("fill", fillBright) .attr("fill-opacity", 0.2) .attr("cx", (d) => d.orderIndex * (minDotRadius * 2.5)) .attr("cy", (d) => d.World === "Jonas" ? jonasStartY : d.World === "Origin" ? originStartY : d.World === "Martha" ? marthaStartY : originEndY ); // evil terneries; dots1971 .select(".circleDot") .attr("r", minDotRadius * 0.85) .attr("fill", (d) => getEventColor(d, chosenCharacterOption)) .attr("cx", (d) => d.orderIndex * (minDotRadius * 2.5)) .attr("cy", (d) => d.World === "Jonas" ? jonasStartY : d.World === "Origin" ? originStartY : d.World === "Martha" ? marthaStartY : originEndY ) // evil terneries .on("mousemove", (event, d) => { svg .selectAll(".circleDot") .attr("r", (t) => t.ID === d.ID ? minDotRadius * 2 : minDotRadius * 0.85 ) .attr("fill-opacity", (t) => (t.ID === d.ID ? 1 : 0.4)); const dateFormat = d3.timeFormat("%d %b %Y"); const characters = [ ...new Set( d.Characters.split(",").map((m) => characterMapper[m.trim()]) ) ]; let tooltipText = `${dateFormat(d.Date)}
`; tooltipText += `${characters.join(",")}
`; tooltipText += d.Description; tooltip .style("visibility", "visible") .style("left", `${event.pageX + minDotRadius * 2}px`) .style("top", `${event.pageY - 20}px`) .html(tooltipText); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); svg .selectAll(".circleDot") .attr("r", minDotRadius * 0.85) .attr("fill-opacity", 1); }); backgroundPathGroup .append("path") .attr("pointer-events", "none") .attr("d", outsidePath) .attr("fill", fillBrightish) .attr("fill-opacity", 0.15) .attr("stroke-width", 0) .attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); backgroundPathGroup .append("path") .attr("pointer-events", "none") .attr("d", jonasWorldPath) .attr("fill", backgroundFill) .attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); backgroundPathGroup .append("path") .attr("pointer-events", "none") .attr("d", marthaWorldPath) .attr("fill", backgroundFill) .attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); const pathsGroup = pathGroup .selectAll(".pathGroup") .data(pathGroups) .join((group) => { const enter = group.append("g").attr("class", "pathGroup"); enter.append("path").attr("class", "quarterPath"); enter.append("g").attr("class", "labelGroup"); return enter; }); pathsGroup.attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); pathsGroup .select(".quarterPath") .attr("pointer-events", "none") .attr("id", (d) => `path${d.id}`) .attr("stroke", "#808080") .attr("stroke-width", 0) .attr("fill", "transparent") .attr("d", (d) => d.path); const labelGroup = pathsGroup .select(".labelGroup") .selectAll(".labelsGroup") .data((d) => { d.data.forEach((entry) => { entry.totalLabelOffset = entry.labelOffset + d.offset; entry.totalLabelEndOffset = entry.labelEndOffset + d.offset; entry.pathId = `#path${d.id}`; entry.reverse = d.reverse; }); return d.data; }) .join((group) => { const enter = group.append("g").attr("class", "labelsGroup"); enter .append("text") .attr("class", "yearLabel") .append("textPath") .attr("class", "yearLabelTextPath"); enter .append("text") .attr("class", "yearEndLabel") .append("textPath") .attr("class", "yearEndLabelTextPath"); return enter; }); labelGroup .select(".yearLabel") .attr("pointer-events", "none") .attr("dy", (d) => (d.pathId.includes("top") ? -7 : 23)); labelGroup .select(".yearLabelTextPath") .attr("pointer-events", "none") .attr( "startOffset", (d) => `${d.reverse ? 100 - d.totalLabelOffset : d.totalLabelOffset}%` ) .attr("font-size", yearFontSize) .attr("fill", fillBrightish) .attr("text-anchor", "middle") .attr("xlink:href", (d) => d.pathId) .text((d) => d.cycle); labelGroup .select(".yearEndLabel") .attr("pointer-events", "none") .attr("dy", (d) => (d.pathId.includes("top") ? -9 : 17)); labelGroup .select(".yearEndLabelTextPath") .attr("pointer-events", "none") .attr( "startOffset", (d) => `${d.reverse ? 100 - d.totalLabelEndOffset : d.totalLabelEndOffset}%` ) .attr("font-size", 20) .attr("fill", (d, i) => (i === 0 ? "transparent" : colors.portalWhite)) .attr("text-anchor", "middle") .attr("xlink:href", (d) => d.pathId) .text("|"); const allLinks = []; linksForChart.forEach((d) => { const hasSource = infinityDots.some((s) => s.ID === d.source.ID); const hasTarget = infinityDots.some((s) => s.ID === d.target.ID); if (hasSource && hasTarget) { allLinks.push(d); } }); const addPosition = (node) => { if (node.orderIndex !== undefined) { node.position = { x: -margins.left + width / 2 - originLineWidth * 4 + node.orderIndex * (minDotRadius * 2.5), y: (node.World === "Jonas" ? jonasStartY : node.World === "Origin" ? originStartY : node.World === "Martha" ? marthaStartY : originEndY) - (height - pathHeight - margins.bottom) }; } }; otherData.allLinks.forEach((d) => { addPosition(d.source); addPosition(d.target); allLinks.push(d); }); const allLinksGroup = linksGroup .selectAll(".linksGroup") .data(allLinks) .join((group) => { const enter = group.append("g").attr("class", "linksGroup"); enter.append("line").attr("class", "chartLink"); return enter; }); allLinksGroup .attr( "transform", (d) => `translate(${margins.left},${height - pathHeight - margins.bottom})` ) .on("mousemove", (event, d) => { svg .selectAll(".linksGroup") .attr("opacity", (t) => (t.ID === d.ID ? 1 : 0.4)); let tooltipText = ""; if (d.source.World !== d.target.World) { tooltipText += `${d.source.World} World -> ${d.target.World}
`; } const dateFormat = d3.timeFormat("%d %b %Y"); const sourceCharacters = [ ...new Set( d.source.Characters.split(",").map((m) => characterMapper[m.trim()]) ) ]; tooltipText += `${dateFormat(d.source.Date)} - ${sourceCharacters.join( "," )}
`; const targetCharacters = [ ...new Set( d.target.Characters.split(",").map((m) => characterMapper[m.trim()]) ) ]; tooltipText += `${dateFormat(d.target.Date)} - ${targetCharacters.join( "," )}
`; if (d.description !== "") { tooltipText += `${d.description}
`; } tooltip .style("visibility", "visible") .style("left", `${event.pageX + 5}px`) .style("top", `${event.pageY - 20}px`) .html(tooltipText); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); svg .selectAll(".linksGroup") .attr("r", minDotRadius * 0.85) .attr("opacity", 1); }); allLinksGroup .select(".chartLink") .attr("stroke-width", getLinkStrokeWidth) .attr("stroke", (d) => getLinkStroke(d, chosenCharacterOption)) .attr("stroke-dasharray", getLinkStrokeArray) .attr("stroke-opacity", getLinkOpacity) .attr("x1", (d) => d.source.position.x) .attr("x2", (d) => d.target.position.x) .attr("y1", (d) => d.source.position.y) .attr("y2", (d) => d.target.position.y); const link13 = allLinks.find((f) => f.ID === 13); if (link13) { svg .append("path") .attr("class", "endLinkLine") .attr( "d", `M${link13.source.x},${link13.source.y} L${link13.source.x},${link13.source.y}` ) // start .attr( "transform", (d) => `translate(${margins.left},${height - pathHeight - margins.bottom})` ) .attr("stroke-width", getLinkStrokeWidth(link13)) .attr("stroke", (d) => getLinkStroke(link13, chosenCharacterOption)) .attr("stroke-dasharray", getLinkStrokeArray(link13)) .attr("stroke-opacity", 1); } const dotGroup = dotsGroup .selectAll(".dotGroup") .data(infinityDots) .join((group) => { const enter = group.append("g").attr("class", "dotGroup"); enter.append("circle").attr("class", "outsideDot"); enter.append("circle").attr("class", "circleDot"); return enter; }); dotGroup.attr( "transform", `translate(${margins.left},${height - pathHeight - margins.bottom})` ); dotGroup .select(".outsideDot") .attr("pointer-events", "none") .attr("r", (d) => d.WrongWorld.length > 0 || d.MeetingOfSelf ? minDotRadius * 4 : 0 ) .attr("fill", (d) => (d.MeetingOfSelf ? colors.temporalGold : fillBright)) .attr("fill-opacity", 0.2) .attr("cx", (d) => d.position.x) .attr("cy", (d) => d.position.y); dotGroup .select(".circleDot") .attr("r", minDotRadius * 0.85) .attr("fill", (d) => getEventColor(d, chosenCharacterOption)) .attr("cx", (d) => d.position.x) .attr("cy", (d) => d.position.y) .on("mousemove", (event, d) => { svg .selectAll(".circleDot") .attr("r", (t) => t.ID === d.ID ? minDotRadius * 2 : minDotRadius * 0.85 ) .attr("fill-opacity", (t) => (t.ID === d.ID ? 1 : 0.4)); const dateFormat = d3.timeFormat("%d %b %Y"); const characters = [ ...new Set(d.CharacterArray.map((m) => characterMapper[m])) ]; let tooltipText = `${dateFormat(d.Date)}
`; tooltipText += `${characters.join(",")}
`; tooltipText += d.Description; tooltip .style("visibility", "visible") .style("left", `${event.pageX + minDotRadius * 2}px`) .style("top", `${event.pageY - 20}px`) .html(tooltipText); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); svg .selectAll(".circleDot") .attr("r", minDotRadius * 0.85) .attr("fill-opacity", 1); }); svg .append("text") .attr("x", width / 4) .attr("y", height * 0.74) .attr("fill", fillBright) .attr("text-anchor", "middle") .attr("font-size", 60) .attr("class", "animationText") .text(""); if (chosenCharacterOption.value === "") { runAnimation( svg, originStartY, height - margins.bottom - pathHeight / 2 + 20 ); } else { svg.selectAll(".chartLink").attr("opacity", 1); svg.selectAll(".outsideDot").attr("opacity", 1); svg.selectAll(".circleDot").attr("opacity", 1); svg.select(".animationText").text(""); } return svg.node(); }