chart = { const svg = d3.select( html``); const thr_size = 30; const thr_size_min = 1; var zoomed = function(event) { g.attr("transform", event.transform); if(event.transform.k>1.5){ d3.selectAll(".labels").style("display","block") regions_labels.style("display","none") if(event.transform.k>4){ d3.selectAll(".small-labels").style("display","block") }else{ d3.selectAll(".small-labels").style("display","none") } }else{ labels.style("display","none") regions_labels.style("display","block") } } 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_blacklisted = g.append("g") .selectAll("circle") .data(graph.filter(d=>d.blacklisted=="Yes")) .join("circle") .style("fill","#ffffff00") .style("stroke","#ff0000") .attr("class",d=> d["in-degree"]<= thr_size_min ? "small-instance": "instance") .attr("transform", d => `translate(${x(d.x)} ${y(d.y)})`) const circle = g.append("g") .selectAll("circle") .data(graph.sort((a,b) => b["in-degree"]-a["in-degree"])) .join("circle") .attr("transform", d => `translate(${x(d.x)} ${y(d.y)})`) .attr("id",d=>`circle-${d.label}`) .attr("class",d=> d["in-degree"]<= thr_size_min ? "small-instance": "instance") .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["in-degree"]<=thr_size_min){ circle_sel .append("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", `#cpath-${data.label}`) .style("font-size","20%") .text(data.label.replace("mastodon","").replace("\.social","")) } set(viewof instance,data.label) //viewof instance.value=data.attributes.label //timeline.update(data.attributes.label,public_toots) }); const circle_paths = g.append("g") .selectAll("path") .data(graph.filter(d=>d["in-degree"]>thr_size_min)) .join("path") .attr("id", d=> `cpath-${d.label}`) .style("visibility","hidden") .attr("transform", d => `translate(${x(d.x)} ${y(d.y)})`) const labels = g.append("g") .attr("id","nodes-labels") .selectAll("text") .data(graph.filter(d=>d["in-degree"]>thr_size_min)) .join("text") .append("textPath") .attr("class",d=> d["in-degree"]>thr_size ? "labels": "small-labels") .style("display","none") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", d=> `#cpath-${d.label}`) .text(d=>d.label.replace("mastodon","").replace("\.social","")) const circle_sel = g.append("g").attr("id","circle-sel") const regions_labels = g.append("g") .attr("id","regions-labels") var showSmallInstances = function(show){ if(show){ d3.selectAll(".small-instance").style("display","block") }else{ d3.selectAll(".small-instance").style("display","none") } } var zoomTo = function(instance_name,scale){ var attr = labels_pos.get(instance_name)[0] var move = d3.zoomIdentity.translate(width / 2, height / 2).scale(scale).translate(-x(attr.x),-y(attr.y)) zoomH.transition().duration(2000).call(zoom.transform,move) } var setFocus = function(instance_name){ circle_sel.selectAll("circle").remove() circle_sel.selectAll("text").remove() const tr = d3.select(document.getElementById(`circle-${instance_name}`)).attr("transform") const r = +d3.select(document.getElementById(`circle-${instance_name}`)).attr("r") 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", tr) const cdata = d3.select(document.getElementById(`circle-${instance_name}`)).data()[0] if(+cdata["in-degree"]<=thr_size_min){ circle_sel .append("text") .attr("class","labels") .append("textPath") .attr("text-anchor","middle") .attr("startOffset","50%") .attr("href", `#cpath-${instance_name}`) .style("font-size","20%") .text(instance_name.replace("mastodon","").replace("\.social","")) } zoomTo(instance_name,d3.zoomTransform(d3.select("#g-graph").node()).k) return instance_name } var setColors=function(color_var,regions){ circle .style("fill", d=> color_scales[color_var](d[color_var])) .style("stroke",d => d3.color(color_scales[color_var](d[color_var])).darker()) regions_labels.selectAll("text").remove() 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","150%") .style("fill", d=> color_var=="registration" ? "#000000" : color_scales[color_var](d[color_var])) .attr("transform", d => `translate(${x(d.x)} ${y(d.y)})`) } var setSizes=function(size_var){ var size = size_scales[size_var] circle_blacklisted .attr("r", d=> 2.1*size(d[size_var])) .style("stroke-width", d=> 0.1*size(d[size_var])) circle .attr("r", d=> size(d[size_var])) .style("stroke-width", d=> 0.1*size(d[size_var])) circle_paths .attr("d",function(d){ var r = 1.2*size(d[size_var]); if(d[size_var]==0){ r = 2; } return `M0,${r}A${r},${r}, 0, 1,1 ,0,${-r}A${r},${r}, 0, 1,1 ,0,${r}` }) var fontsize=font_scales[size_var] labels .style("font-size",d=>fontsize(d[size_var])+"%") } return Object.assign(svg.node(), { zoomOut: () => zoomH.transition().call(zoom.transform, d3.zoomIdentity), zoomTo: (instance) => zoomTo(instance,6), setFocus: setFocus, setColors: setColors, setSizes: setSizes, showSmallInstances : showSmallInstances }); }