function draw_sankey() { let sankeyOptions = sankeyOptionsSelection.selection; let edgeColor = document.getElementById("edge-color").value; let align = document.getElementById("align").value; let color_echo_chambers = []; color_echo_chambers.push(d3.schemeTableau10[3], d3.schemeTableau10[0], d3.schemeTableau10[4], d3.schemeTableau10[1], d3.schemeTableau10[6]); let color_other = d3.schemeTableau10[8]; let color_non_echo_chambers = d3.schemeTableau10[9]; const transition_duration = '1s'; let nodeOndetails = null; const check_link_colors = (sourceColor, targetColor) => { if (sourceColor == color_non_echo_chambers) { return color_non_echo_chambers; } else { if (targetColor == color_non_echo_chambers) { return color_non_echo_chambers; } else { return targetColor; } } }; const container = html``; // const svg = d3 // .select(container) // .append("svg") // .attr("viewBox", `0 0 ${width} ${height}`); const zoom = d3.zoom().scaleExtent([1, 40]).on("zoom", zoomed); const svg = d3.select(container).append("svg").attr("class", "sankey-viz").attr("viewBox", [0, 0, width, height]); // const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const div = d3 .select(container) .append("div") .classed("tooltip", true); // create a new tooltip, // passing it a selection for the tooltip's DOM element. const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(datum) { const additionalData = clusters_echo_chambers_6days_and_more_clean.find(o => o.cluster == datum.id); if (additionalData) { return `Id: ${datum.id}
Group: ${datum.group}
Snapshot: ${datum.snapshot}
People: ${datum.size}
Density: ${additionalData.density}
`; } else { return `Id: ${datum.id}
Group: ${datum.group}
Snapshot: ${datum.snapshot}
People: ${datum.size} `; } } // Defining 'sankey' here because update will be used in dragMove: https://github.com/d3/d3-sankey#sankey_update const sankey = d3 .sankey() .nodeId((d) => d.name) .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`]) .nodeWidth(15) .nodePadding(10) .extent([ [1, 5], [width - 1, height - 5] ]); //This logic makes a copy of datanodes and datalinks, which will be extended with drag logic let dataNodes = data.nodes.map((d) => Object.assign({}, d)); let dataLinks = data.links.map((d) => Object.assign({}, d)); let group = sankey({ nodes: dataNodes, links: dataLinks }); // Prepend a 'Total' Node to chart. To do so, extract total values from group sankey structure for top nodes. const nodes = group.nodes; const links = group.links; const coef = 62; // The nodes coordinates recalculation let x0 = 1 + coef ; let x1 = 16 + coef; let layer = 0; // Sort the nodes out nodes.sort(function(a, b) { var keyA = a.id, keyB = b.id; // Compare the 2 dates if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }); let currNum = nodes[0].id.split(".")[0]; Object.keys(nodes).forEach((key) => { if (currNum != nodes[key].id.split(".")[0]) { currNum = nodes[key].id.split(".")[0]; x0 += 180; x1 += 180; layer += 1; } nodes[key].x0 = x0; nodes[key].x1 = x1; nodes[key].layer = layer; }); const nodeWidth = nodes[0].x1 - nodes[0].x0; // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const wrapper = svg.append("g"); // Container for draggable nodes // const node = svg const node = wrapper .selectAll("g") .data(nodes) .join("g") .attr("transform", (d) => `translate(${d.x0}, ${d.y0})`); // .attr("style", "opacity: 1"); // Relative to container node .append("rect") .attr("height", (d) => d.y1 - d.y0) // .attr("height", (d) => d.size * 3) .attr("width", (d) => d.x1 - d.x0) // .attr("fill", (d) => check_echo_chambers(d)) .attr("fill", (d) => d.color) // .attr("stroke", "#000") // .append("title") .text((d) => `${d.name}\n${format(d.value)}`); // Relative to container/ node rect node .append("text") .attr("font-family", "sans-serif") .attr("letter-spacing", '.02rem') .attr("font-weight", 500) // .attr("fill", (d) => check_echo_chambers(d, 'text')) .attr("fill", (d) => d.color) .attr("font-size", 10) .attr("style", "opacity: 1") .attr("x", (d) => (d.x0 < width / 2 ? 6 + (d.x1 - d.x0) : -6)) // +/- 6 pixels relative to container .attr("y", (d) => (d.y1 - d.y0) / 2) // middle of node .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name.split(/\W/)[0] + "." + d.name.split(/\W/)[1] + "..."); // d3V6 events: https://observablehq.com/@d3/d3v6-migration-guide#events node .attr("cursor", "move") .call(d3.drag().on("start", dragStart).on("drag", dragMove).on("end", (event, d) => tooltip.display(d, tooltipContents))); node.on('mouseover', (event, d) => showLinks(d)) .on('mouseout', hideLinks) .on("mousemove", event => { // move the tooltip, // passing the native browser event tooltip.move(event); }); node.on("click", (event, d) => toggleDetails(d)); svg.call(zoom); // const link = svg const link = wrapper .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply") .attr("style", "opacity: 1"); if (edgeColor === "path") { const gradient = link .append("linearGradient") .attr("id", (d) => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") // .attr("stop-color", (d) => check_echo_chamberss(d.source))) .attr("stop-color", (d) => d.source.color)) .call(gradient => gradient.append("stop") .attr("offset", "100%") // .attr("stop-color", (d) => check_echo_chamberss(d.target))) .attr("stop-color", (d) => d.target.color)); } //if link .append("path") .attr("transform", (d) => `translate(${d.x0}, ${d.y0})`) .attr("class", "link") .attr("aria-hidden", true) .attr("d", d3.sankeyLinkHorizontal()) // .attr("stroke",(d) => edgeColor === "path" ? d.uid // : edgeColor === "input" ? check_echo_chambers(d.source) // : edgeColor === "output" ? check_echo_chambers(d.target) // : "#aaa") .attr("stroke", (d) => edgeColor === "none" ? "#aaa" : edgeColor === "path" // ? check_echo_chambers(d.source) == color_echo_chambers[0] ? check_echo_chambers(d.target) : color_non_echo_chambers ? check_link_colors(d.source.color, d.target.color) : edgeColor === "input" ? d.source.color : d.target.color // ? check_echo_chambers(d.source) // : check_echo_chambers(d.target) ) .attr("stroke-width", (d) => Math.max(1, d.width)); link .append("title") .text((d) => `${d.source.name} → ${d.target.name}\n\n Flow Weight: ${format(d.value)}`); function highlightNode(d) { d3.selectAll('rect').style( 'stroke', r => r.name === d.name ? 'turquoise' : undefined ).style('transition-duration', transition_duration); d3.selectAll('rect').style( 'stroke-width', r => r.name === d.name ? 2 : 0 ).style('transition-duration', transition_duration); // showNodeLink(d.name); } function neutralizeHighlight() { d3.selectAll('rect').style( 'stroke', undefined ).style('transition-duration', transition_duration); } function toggleDetails(d) { console.log("NODE ON DETAILS: ", nodeOndetails); if (nodeOndetails == d.id) { nodeOndetails = null; neutralizeHighlight(); console.log("NEUTRALIZING"); } else { if (nodeOndetails == null) { nodeOndetails = d.id highlightNode(d); console.log("HIGHLIGHTING"); } } } function showLinks(d) { if (nodeOndetails == null) { const linkedNodes = []; let traverse = [{ linkType : 'sourceLinks', nodeType : 'target', }, { linkType : 'targetLinks', nodeType : 'source', }]; traverse.forEach((step) => { d[step.linkType].forEach((l) => { linkedNodes.push(l[step.nodeType]); }); }); const check_opacity_node = (remainingNode, r) => { if (sankeyOptions == 'evolving') return remainingNode.group === r.group; else if (sankeyOptions == 'influence') return remainingNode.name === r.name; else return remainingNode.name === r.name; } const check_findings_node = (r) => { const temp = linkedNodes.find(remainingNode => check_opacity_node(remainingNode, r)); return temp; } let highlighted_nodes = []; const check_rect_text = (r) => { if (sankeyOptions == 'evolving') return r.group === d.group ? '1' : '0.1'; else if (sankeyOptions == 'influence') return check_findings_node(r) || r.name === d.name ? '1' : '0.1'; else { if (check_findings_node(r) || r.group === d.group) { highlighted_nodes.push(r.name); return '1'; } else return '0.1'; } } const check_path = (p) => { if (sankeyOptions == 'evolving') return (p && (p.source.group === d.group && p.target.group === d.group)) ? '1' : '0.1'; else if (sankeyOptions == 'influence') return (p && (p.source.name === d.name || p.target.name === d.name)) ? '1' : '0.1'; else return (p && ( highlighted_nodes.includes(p.source.name) && highlighted_nodes.includes(p.target.name)) || p.target.name == d.name) ? '1' : '0.1'; } d3.selectAll('rect').style( 'opacity', r => check_rect_text(r) ).style('transition-duration', transition_duration); d3.selectAll('text').style( 'opacity', r => check_rect_text(r) ).style('transition-duration', transition_duration); d3.select(this).style('opacity', '1').style('transition-duration', transition_duration); d3.selectAll('path.link').style( 'opacity', p => check_path(p) ).style('transition-duration', transition_duration); } tooltip.display(d, tooltipContents); } function hideLinks() { if (nodeOndetails == null) { d3.selectAll('rect').style('opacity', '1').style('transition-duration', transition_duration); d3.selectAll('text').style('opacity', '1').style('transition-duration', transition_duration); d3.selectAll('path').style('opacity', '1').style('transition-duration', transition_duration); } tooltip.hide(); } function dragStart(event, d) { if (nodeOndetails == null) { d.__x = event.x; d.__y = event.y; d.__x0 = d.x0; d.__y0 = d.y0; d.__x1 = d.x1; d.__y1 = d.y1; } tooltip.hide(); } //dragStart function dragMove(event, d) { if (nodeOndetails == null) { d3.select(this).attr("transform", function (d) { const dx = event.x - d.__x; const dy = event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } // if if (d.x1 > width) { d.x0 = width - nodeWidth; d.x1 = width; } // if if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } // if if (d.y1 > height) { d.y0 = height - (d.__y1 - d.__y0); d.y1 = height; } // if return `translate(${d.x0}, ${d.y0})`; }); //.attr('transform', function (d) { // https://github.com/d3/d3-sankey#sankey_update sankey.update({ nodes, links }); link.selectAll(".link").attr("d", d3.sankeyLinkHorizontal()); } tooltip.hide(); } //dragMove function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(40) .translate(-x, -y), d3.pointer(event) ); } function zoomed({ transform }) { wrapper.attr("transform", transform); } // return svg.node(); return Object.assign(container, { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomReset: reset, scales: { color }, }); // return container; }