chart = { const svg = d3.select( html``); var zoomed = function(event) { g.attr("transform", event.transform); if(event.transform.k>1.5){ labels.style("display","block") regions_labels.style("display","none") if(event.transform.k>4){ labels_small.style("display","block") }else{ labels_small.style("display","none") } }else{ labels.style("display","none") regions_labels.style("display","block") labels_small.style("display","none") } } var zoom = d3.zoom() .scaleExtent([0.5, 25]) .on("zoom", zoomed) var zoomH = svg .call(zoom); const g = svg.append("g").attr("id","g-graph"); const circle_sel = g.append("g").attr("id","circle-sel") const circle = g.append("g") .selectAll("circle") .data(graph.nodes.sort((a,b) => b.attributes["nansi-indegree"]-a.attributes["nansi-indegree"])) .join("circle") .attr("r", d=> size(d.attributes["nansi-indegree"])) .style("fill", d=> col(d.attributes["nansi-louvain"])) .style("stroke",d => d3.color(col(d.attributes["nansi-louvain"])).darker()) .style("stroke-width", d=> 0.1*size(d.attributes["nansi-indegree"])) .attr("transform", d => `translate(${x(d.attributes.x)} ${y(d.attributes.y)})`) .on("click",function(d){ circle_sel.selectAll("circle").remove() circle_sel.selectAll("text").remove() const tr = d3.select(this).attr("transform"); const r = +d3.select(this).attr("r"); circle_sel .append("circle") .attr("r",Math.max(2*r,8)) .attr("transform",tr) .style("fill","#ffffff00") .style("stroke","#000000") .style("stroke-width", 0.75) .style("stroke-dasharray","4 1") var data = this.__data__; if(data.attributes["nansi-indegree"]==0){ circle_sel .append("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", `#cpath-${data.key}`) .style("font-size","20%") .text(data.attributes.label.replace("mastodon","").replace("\.social","")) } set(viewof instance,data.attributes.label) //viewof instance.value=data.attributes.label //timeline.update(data.attributes.label,public_toots) }); const thr_size=10; const circle_paths = g.append("g") .selectAll("path") .data(graph.nodes) .join("path") .attr("d",function(d){ var r = 1.2*size(d.attributes["nansi-indegree"]); if(d.attributes["nansi-indegree"]==0){ r = 2; } return `M0,${r}A${r},${r}, 0, 1,1 ,0,${-r}A${r},${r}, 0, 1,1 ,0,${r}` }) .attr("id", d=> `cpath-${d.key}`) .style("visibility","hidden") .attr("transform", d => `translate(${x(d.attributes.x)} ${y(d.attributes.y)})`) const labels = g.append("g") .attr("id","nodes-labels-medium") .selectAll("text") .data(graph.nodes.filter(d=> d.attributes["nansi-indegree"]>thr_size)) .join("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", d=> `#cpath-${d.key}`) .style("display","none") .style("font-size",d=>fontsize(d.attributes["nansi-indegree"])+"%") .text(d=>d.attributes.label.replace("mastodon","").replace("\.social","")) const labels_small = g.append("g") .attr("id","nodes-labels-medium") .selectAll("text") .data(graph.nodes.filter(d=> d.attributes["nansi-indegree"]<=thr_size & d.attributes["nansi-indegree"]>0 )) .join("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", d=> `#cpath-${d.key}`) .style("display","none") .style("font-size",d=>fontsize(d.attributes["nansi-indegree"])+"%") .text(d=>d.attributes.label.replace("mastodon","").replace("\.social","")) const regions_labels = g.append("g") .attr("id","regions-labels") .selectAll("text") .data(regions) .join("text") .text(d=>d.label) .attr("class","regions-labels") .attr("filter","url(#whiteOutlineEffect)") .attr("text-anchor","middle") .style("visibility","visible") .style("font-size","190%") .style("fill", d=>col(d.col)) .attr("transform", d => `translate(${x(d.x)} ${y(d.y)})`) var zoomTo = function(instance_name,scale){ var attr = labels_pos.get(instance_name)[0].attributes var move = d3.zoomIdentity.translate(width / 2, height / 2).scale(scale).translate(-x(attr.x),-y(attr.y)) zoomH.transition().duration(2500).call(zoom.transform,move) } var setFocus = function(instance_name){ circle_sel.selectAll("circle").remove() circle_sel.selectAll("text").remove() var cnode = nodes_hash.get(instance_name)[0] console.log(cnode) const r = size(cnode.attributes["nansi-indegree"]) circle_sel .append("circle") .attr("r",Math.max(2*r,8)) .style("fill","#ffffff00") .style("stroke","#000000") .style("stroke-width", 0.75) .style("stroke-dasharray","4 1") .attr("transform", `translate(${x(cnode.attributes.x)} ${y(cnode.attributes.y)})`) if(cnode.attributes["nansi-indegree"]==0){ circle_sel .append("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", `#cpath-${cnode.key}`) .style("font-size","20%") .text(cnode.attributes.label.replace("mastodon","").replace("\.social","")) } zoomTo(instance_name,d3.zoomTransform(d3.select("#g-graph").node()).k) return cnode.key } return Object.assign(svg.node(), { zoomOut: () => zoomH.transition().call(zoom.transform, d3.zoomIdentity), zoomTo: (instance) => zoomTo(instance,12), setFocus: setFocus }); }