31:T1993,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 }); }32:T7ed,timeline ={ const toots_list=d3.select(html`

`); const toots_title = toots_list.append("article").attr("class","box") const toots_data = toots_list.append("div").attr("id","toots") var update=function(instance,public_toots){ toots_title.selectAll("h1").remove() toots_title.append("h1").append("a").attr("href",`https://${instance}`).text(instance) toots_title.selectAll("h2").remove() if(public_toots.length==0){ toots_title.append("h2").text("Public timeline not available.") } toots_data.selectAll("article").remove() const toots = toots_data.selectAll("article") .data(public_toots) .join("article") .attr("class","box media") toots .append("div") .attr("class","media-left") .html(toot => `

`) var toots_cont = toots .append("div") .attr("class","media-content") .html(toot => `

${toot.account.display_name} @${toot.account.acct}

${toot.content}

`) toots_cont.each(function(d) { d3.select(this) .selectAll(".medias") .data(d.media_attachments) .join("div") .attr("class","medias") .html( media => `

`) }) toots_cont.append("small").html(toot => `${toot.created_at}`); return instance } return Object.assign(toots_list.node(), { update:update }); }33:[{"id":"4f63d6c0d71ffdef30dc7a67ea34081d45bcb1b936a36ce35b51fe7f31cabb27df00e3be5d775f011d9da3fcb1d57acdaeaeab380800b71a11674ed51c6da164","href":"https://static.observableusercontent.com/files/4f63d6c0d71ffdef30dc7a67ea34081d45bcb1b936a36ce35b51fe7f31cabb27df00e3be5d775f011d9da3fcb1d57acdaeaeab380800b71a11674ed51c6da164","name":"graphF.json","type":"application/json","lastModified":1668591985820.032,"size":2272236}] 2f:{"title":"Mapstodon notebook","cells":[{"id":196,"value":"# Mapstodon notebook\n\nA quick and dirty graph-viz of fediverse as of 9/11/2022. Graph derived from 500 status of each instances public timeline. This note book is used to run:\n\nhttps://www.comeetie.fr/galerie/mapstodon/ \n\nthe graph was build using some R code available at: \n\nhttps://github.com/comeetie/map-stodon ","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"viewof instance = Inputs.select(graph.nodes.map(d=>d.attributes.label).sort(), {label: \"Instance name : \",value:graph.nodes[seed].key})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"viewof local= html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"buttons = {\n const form = html``;\n form.out.onclick = () => chart.zoomOut();\n form.instance.onclick = () => chart.zoomTo(instance);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"seed = Math.ceil(Math.random()*graph.nodes.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"regions=[{label:\"French\",x:-2500,y: 250,col:1},{label:\"Deutsch\",x:-2300,y: -800,col:6},{label:\"Japan\",x:-700,y:-500,col:9},{label:\"Science\",x:-2000,y:450,col:12},{label:\"Games/Arts\",x:-1300,y:350,col:10},{label:\"Data/Geek\",x:-1700,y:50,col:4},{label:\"Spanish\",x:-1450,y:-300,col:13},{label:\"Cat\",x:-1200,y:650,col:12},{label:\"infosec\",x:-1500,y:780,col:16}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":846,"value":"update_focus = chart.setFocus(instance)","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"graph.nodes.filter(d=>d.key==\"aspiechattr.me\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"update_timeline = timeline.update(instance,public_toots)","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"public_toots = d3.json(\"https://\"+instance+\"/api/v1/timelines/public?local=\"+local).catch( d => [])\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"labels_pos = d3.group(graph.nodes, n => n.attributes.label)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"graph.nodes.map(d=>d.attributes.label).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"nodes_hash = d3.group(graph.nodes,d=>d.key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"graph = FileAttachment(\"graphF.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"margin=10","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"x = d3.scaleLinear()\n .domain([-2800,-400])\n .range([margin,width-margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"y = d3.scaleLinear()\n .domain([-1050,1050])\n .range([height-margin,margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"col(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"col=d3.scaleOrdinal().range([\"#c45447\",\n\"#f04138\",\n\"#ad827a\",\n\"#d45200\",\n\"#f9960e\",\n\"#fbbe19\",\n\"#e6d148\",\n\"#c0da7a\",\n\"#c7d5ab\",\n\"#70d649\",\n\"#598251\",\n\"#02c381\",\n\"#60e7b4\",\n\"#00916b\",\n\"#02b3dc\",\n\"#3e79c0\",\n\"#a254dc\",\n\"#9c61ac\",\n\"#ff96f1\",\n\"#c24d83\",\n\"#ff87b8\"]).domain([0,1,2,7,4,5,6,3,8,9,10,11,19,13,14,15,16,17,18,12,20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"size = d3.scaleSqrt().domain([0,150]).range([1,15])","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"fontsize = d3.scaleSqrt().domain([0,150]).range([15,80])","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":" html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}