{ /******* /* /* TABS CONTROL /* *******/ var nodelinkButton = document.getElementById("nodelinkButton"); var communityButton = document.getElementById("communityButton"); var nodelink3dButton = document.getElementById("nodelink3dButton"); document.getElementById("nodelink").style.display = "block"; document.getElementById("nodelinkButton").classList.add("active"); nodelinkButton.onclick = function(evt) { openTab(evt, 'nodelink'); } communityButton.onclick = function(evt) { openTab(evt, 'community'); } nodelink3dButton.onclick = function(evt) { openTab(evt, 'nodelink3d'); } function openTab(evt, tabName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } /******* /* /* VARIABLE DEFINITION AND EXTRACTION FROM DOM /* *******/ var toxicitySlider = document.getElementById("toxicity"); var toxicityValue = document.getElementById("toxicityValue"); toxicityValue.innerHTML = toxicitySlider.value; // Display the default toxicity slider value var closenessSlider = document.getElementById("closeness"); var closenessValue = document.getElementById("closenessValue"); closenessValue.innerHTML = closenessSlider.value; var betweennessSlider = document.getElementById("betweenness"); var betweennessValue = document.getElementById("betweennessValue"); betweennessValue.innerHTML = betweennessSlider.value; var degreeSlider = document.getElementById("degree"); var degreeValue = document.getElementById("degreeValue"); degreeValue.innerHTML = degreeSlider.value; var commentsSlider = document.getElementById("comments"); var commentsValue = document.getElementById("commentsValue"); commentsValue.innerHTML = commentsSlider.value; /******* /* /* DATA ACQUISITION /* *******/ // Get the data and Sort them const node_small = sankey.nodes.filter(d => d.group == '1227.d08c7bc9-30b0-4b33-a712-11180780cec5' || d.group == '1039.77ef16e2-9be5-4fa8-b322-07f0dd716459' || d.group == '1075.ad6aa64a-f43c-4e05-80f3-db084fd3094a' || d.group == '1040.1b8f1f78-9c8b-4fbf-aedc-9a19aca03799' || d.group == '194.f7540454-972f-42ae-a029-474a6d90d897' || d.group == '1140.e2e62de9-6f63-478c-8fab-72e344d7cf8f').sort(function(a, b) { var keyA = a.group, keyB = b.group; // Compare the 2 dates if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }) // const node_small = sankey.nodes.filter(d => { // let temp = d.group.split('.'); // let currGroup = parseInt(temp[0]); // if (currGroup > 1138 && currGroup < 1145 ) { // return d; // } // }) .sort(function(a, b) { var keyA = a.group, keyB = b.group; // Compare the 2 dates if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }); // Get the ids const nodes_list = node_small.map(d => d.id); const link_small = sankey.links.filter(d => nodes_list.includes(d.target) && nodes_list.includes(d.source)); // Get all the details of the node by ids and filters applied const node_small_graph_original = clusters_echo_chambers_6days_and_more.filter(d => nodes_list.includes(d.community)); const min_max_temp = node_small_graph_original.map(v => v.nb_total_comments) const max = Math.max(...min_max_temp); commentsSlider.setAttribute('max', max); /******* /* /* PLOT SETTINGS /* *******/ function draw_plot(data, props={}) { const x = props.hasOwnProperty('x') ? props.x : undefined; const y = props.hasOwnProperty('y') ? props.y : undefined; const fill = props.hasOwnProperty('fill') ? props.fill : undefined; const stroke = props.hasOwnProperty('stroke') ? props.fill : undefined; const r = props.hasOwnProperty('r') ? props.r : undefined; const title = props.hasOwnProperty('title') ? props.title : undefined; const xLabel = props.hasOwnProperty('xLabel')? props.xLabel : undefined; const yLabel = props.hasOwnProperty('yLabel') ? props.yLabel : undefined; let plot = Plot.plot({ inset: 8, grid: true, color: { legend: true, }, marks: [ Plot.frame({stroke: "#ccc"}), // draws a light gray frame mark around the Plot Plot.dot(data, {x: x, y: y, fill: fill, stroke: stroke, r: r, title: title }), Plot.axisX({label: xLabel, lineWidth: 8, marginBottom: 40}), Plot.axisY({label: yLabel}), ], color: { legend: true, }, tooltip: { fill: "red", stroke: "blue", r: 8 } }); return plot; } function draw_node_link(data) { let chart = ForceGraph(data, { nodeId: (d) => d.id, // node identifier, to match links nodeGroup: (d) => d.group, // group identifier, for color nodeTitle: (d) => d.id, // hover text width, height: 600, invalidation // stop when the cell is re-run }) return chart; } function draw_node_link_3d(data) { const NODE_REL_SIZE = 5; const Graph = ForceGraph3D({ controlType: "orbit", })(document.getElementById("nodelink3d")) // Basic Settings .graphData(data) .nodeLabel("id") .nodeId("id") .nodeVal("size") .nodeOpacity(0.9) .nodeAutoColorBy("group") // Direction Settings .linkDirectionalArrowLength(3.5) .linkDirectionalArrowRelPos(1) .linkCurvature(0.25) // Directional Moving Particles .linkDirectionalParticles("value") .linkDirectionalParticleSpeed((d) => d.value * 0.001) // Curved Lines and Self Links .linkCurvature("curvature") .linkCurveRotation("rotation") .linkDirectionalParticles(2) // Click to Focus on Node .onNodeClick((node) => { // Aim at node from outside it const distance = 40; const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z); const newPos = node.x || node.y || node.z ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio, } : { x: 0, y: 0, z: distance, }; // special case if node is in (0,0,0) Graph.cameraPosition( newPos, // new position node, // lookAt ({ x, y, z }) 3000 // ms transition duration ); }) // Fix Node After Dragging .onNodeDragEnd((node) => { node.fx = node.x; node.fy = node.y; node.fz = node.z; }) // Canvas Background Color .backgroundColor("#001a33") .nodeRelSize(NODE_REL_SIZE) .linkColor(() => "rgba(255,255,255,1)"); } /******* /* /* NODE-LINK VISUALIZATION SETTINGS /* *******/ //... /******* /* /* CHART 1 SETTINGS (TOXICITY, COMMENTS & MEMBERS) /* *******/ const chart1Props = { x: 'nb_total_comments', y: 'percent_toxic', fill: 'community', stroke: 'community', title: (d) => `${d.cluster} \n Comments: ${d.nb_total_comments} \n Toxicity: ${d.percent_toxic}% \n Members: ${d.cl_size} people \n Density: ${d.density}%`, xLabel: 'Comments', yLabel: 'Toxicity' }; /******* /* /* CHART 2 SETTINGS (CLOSENESS & BETWEENNESS CENTRALITY) /* *******/ const chart2Props = { x: 'cl_close', y: 'cl_betw', fill: 'community', stroke: 'community', title: (d) => `${d.cluster} \n Closeness: ${d.cl_close} \n Betweenness: ${d.cl_betw} \n Degree: ${d.cl_deg} \n`, xLabel: 'Closeness Centrality', yLabel: 'Betweenness Centrality' }; /******* /* /* CHART 3 SETTINGS (BETWEENNESS & DEGREE CENTRALITY) /* *******/ const chart3Props = { x: 'cl_deg', y: 'cl_betw', fill: 'community', stroke: 'community', title: (d) => `${d.cluster} \n Closeness: ${d.cl_close} \n Betweenness: ${d.cl_betw} \n Degree: ${d.cl_deg} \n`, xLabel: 'Degree Centrality', yLabel: 'Betweenness Centrality' }; /******* /* /* CHART 4 SETTINGS (CLOSENESS & DEGREE CENTRALITY) /* *******/ const chart4Props = { x: 'cl_deg', y: 'cl_close', fill: 'community', stroke: 'community', title: (d) => `${d.cluster} \n Closeness: ${d.cl_close} \n Betweenness: ${d.cl_betw} \n Degree: ${d.cl_deg} \n`, xLabel: 'Degree Centrality', yLabel: 'Closeness Centrality' }; /******* /* /* DRAW, SET & APPEND THE VISUALIZATION OF NODE-LINK AND CHARTS /* *******/ vis_draw_set(); /******* /* /* VISUALIZATION EVENT LISTENER & APPENDMENT TO THE HTML TREE /* *******/ function set_node_link(thePlot, parentElem) { // Event Listener of thePlot // ... append_plot(thePlot, parentElem); } function set_plot(thePlot, parentElem) { // Event Listener of thePlot d3.select(thePlot) .selectAll("path") .on("pointerenter", function () { d3.select(thePlot).selectAll("path").attr("opacity", 0.2); d3.select(this).attr("opacity", 1); }); d3.select(thePlot).on("pointerleave", function () { d3.select(thePlot).selectAll("path").attr("opacity", 1); }); append_plot(thePlot, parentElem); } function append_plot(thePlot, parentElem) { // Append thePlot to the html page d3.select(parentElem).html(""); d3.select(parentElem).append(() => thePlot); } /******* /* /* FILTER EVENT LISTENERS /* *******/ function chart_filtering() { const dataFilter = node_small_graph_original.filter(n => n.percent_toxic <= toxicitySlider.value && n.cl_close <= closenessSlider.value && n.cl_betw <= betweennessSlider.value && n.cl_deg <= degreeSlider.value && n.nb_total_comments <= commentsSlider.value); return dataFilter; } function node_link_set(data) { // Get the node-link data to be displayed by filters applied above let indexTempArr = data.map(d => d.cluster); let node_small_vis = node_small.filter(v => indexTempArr.includes(v.id)); let link_small_vis = link_small.filter(v => indexTempArr.includes(v.source) && indexTempArr.includes(v.target)); let sankey_small = { links: link_small_vis, nodes: node_small_vis } return sankey_small; } function vis_draw_set() { const dataFilter = chart_filtering(); console.log("DATAFILTER: ", dataFilter); const nodeLinkFilter = node_link_set(dataFilter); const nodeLink = draw_node_link(nodeLinkFilter); set_node_link(nodeLink, '#nodelink'); // draw_node_link_3d(nodeLinkFilter); const communityData = nodeLinkFilter.nodes ? nodeLinkFilter.nodes : {}; const groupedCommunityData = groupBy(communityData); const communityPack = draw_community_pack(groupedCommunityData); set_plot(communityPack, '#community'); const plot1 = draw_plot(dataFilter, chart1Props); set_plot(plot1, '#chart1'); const plot2 = draw_plot(dataFilter, chart2Props); set_plot(plot2, '#chart2'); const plot3 = draw_plot(dataFilter, chart3Props); set_plot(plot3, '#chart3'); const plot4 = draw_plot(dataFilter, chart4Props); set_plot(plot4, '#chart4'); } toxicitySlider.oninput = function() { toxicityValue.innerHTML = this.value; vis_draw_set(); } closenessSlider.oninput = function() { closenessValue.innerHTML = this.value; vis_draw_set(); } betweennessSlider.oninput = function() { betweennessValue.innerHTML = this.value; vis_draw_set(); } degreeSlider.oninput = function() { degreeValue.innerHTML = this.value; vis_draw_set(); } commentsSlider.oninput = function() { commentsValue.innerHTML = this.value; vis_draw_set(); } /***** /* /* COMMUNITY SETTINGS /* *****/ function groupBy(arr) { let groups = { name: "sankey", children: [] }; const arr_original = arr; let currGroup = null; arr.forEach((item, key) => { const currIndex = groups.children.length - 1; if (currGroup == item.group) { // A Node with the same group with previous ones groups.children[currIndex].children.push({ name: item.id, size: item.size }); } else { if (key == (arr_original.length - 1) && item.group == arr_original[key-1].group) { groups.children[currIndex].children.push({ name: item.id, size: item.size }); } else if(key == (arr_original.length - 1) && item.group != arr_original[key-1].group) { groups.children.push({ name: item.id, size: item.size }); } else if ((key == 0 && item.group != arr_original[key+1].group) || (item.group != arr_original[key+1].group && item.group != arr_original[key-1].group)) { // A New Lonely Node Detected groups.children.push({ name: item.id, size: item.size }); } else { // A New Node with Children Detected groups.children.push( { name: item.group, children: [ { name: item.id, size: item.size } ] }); } currGroup = item.group; } }); return groups; } function draw_community_pack(data) { // Display Options let width = 400; let height = width; let bold = true; let black = false; let shadow = true; let multicolor = true; let hexcolor = "#0099cc"; const format = d3.format(",d") const pack = data => d3.pack() .size([width, height]) .padding(3) (d3.hierarchy(data) .sum(d => d.size) .sort((a, b) => b.value - a.value)) const root = pack(data); let focus = root; let view; let fontsize = d3.scaleOrdinal() .domain([1,3]) .range([24,16]) function setColorScheme(multi){ if (multi) { let color = d3.scaleOrdinal() .range(d3.schemeCategory10) return color; } } let color = setColorScheme(multicolor); function setCircleColor(obj) { let depth = obj.depth; while (obj.depth > 1) { obj = obj.parent; } let newcolor = multicolor ? d3.hsl(color(obj.data.name)) : d3.hsl(hexcolor); newcolor.l += depth == 1 ? 0 : depth * .1; return newcolor; } function setStrokeColor(obj) { let depth = obj.depth; while (obj.depth > 1) { obj = obj.parent; } let strokecolor = multicolor ? d3.hsl(color(obj.data.name)) : d3.hsl(hexcolor); return strokecolor; } const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("width", "calc(100% + 28px)") .style("height", "auto") .style("background", "white") .style("cursor", "pointer") .on("click", () => zoom(root)); const node = svg.append("g") .selectAll("circle") .data(root.descendants().slice(1)) .enter().append("circle") .attr("fill", setCircleColor) .attr("stroke", setStrokeColor) .attr("pointer-events", d => !d.children ? "none" : null) .on("mouseover", function() { d3.select(this).attr("stroke", d => d.depth == 1 ? "black" : "white"); }) .on("mouseout", function() { d3.select(this).attr("stroke", setStrokeColor); }) .on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation())); const label = svg.append("g") .style("fill", function() { return black ? "black" : "white"; }) .style("text-shadow", function(){ if (shadow) { return black ? "2px 2px 0px white" : "2px 2px 0px black"; } else { return "none"; } }) .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .enter().append("text") .style("fill-opacity", d => d.parent === root ? 1 : 0) .style("display", d => d.parent === root ? "inline" : "none") .style("font", d => fontsize(d.depth) + "px sans-serif") .style("font-weight", function() { return bold ? "bold" : "normal"; }) // .text(d => d.data.name); .text(d => (d.data.name.length > 10) ? d.data.name.slice(0, 10-1) + '...' : d.data.name); zoomTo([root.x, root.y, root.r * 2]); function zoomTo(v) { const k = width / v[2]; view = v; label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k + fontsize(d.depth)/4})`); node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k); } function zoom(d) { const focus0 = focus; focus = d; const transition = svg.transition() .duration(d3.event.altKey ? 7500 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); label .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .style("fill-opacity", d => d.parent === focus ? 1 : 0) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } return svg.node(); } }