30:T679,# Mapstodon notebook A quick and dirty graph-viz of fediverse as of 18/11/2022. Graph derived from 500 status of each instances public timeline. This note book is used to run: https://www.comeetie.fr/galerie/mapstodon/ the graph was build using some R code available at: https://github.com/comeetie/map-stodon For any question or if you did not want your instance to be processed, contact me by emails or with mastodon @comeetie@mapstodon.space. ## Methodology Starting from a list of 5000 instances, I have tried to download 500 toots of all the public timelines. For each one with a response, I counted the number of occurrences of each instances in the public toots. The graph was then build by inserting a directed edge between instance A and B if instance B appeared in more than 2% of A public timeline toots and if this proportion was 5 time bigger than the average proportion of A toots across all instances. This choice was made to build a network that highlights communities, and has interesting consequences, like mastodon.social being on the edges of the networks since it appears in almost all of the timelines. With this graph in hands, I have then used the forceAtlas layout algorithm to find the nodes positions. And performed a Louvain clustering of the nodes to get groups for coloring the nodes. ## Variables - in-degree : number of edge that point towards A in the graph - toots-frequency : proportions of toots across all instances public timelines that were coming from A - users : total number of users (active or not) - group : results obatined with the Louvain clustering - language : first language of the instance 31:T1c0d,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 }); }32:T77a,instanceinfo ={ const instance_info_div=d3.select(html`

`); const toots_title = instance_info_div.append("article").attr("class","box") var update=function(instance){ const cnode=nodes_hash.get(instance)[0]; toots_title.selectAll("h1").remove() toots_title.append("h1").append("a").attr("href",cnode.base).text(instance) toots_title.select("#infos-instance").remove() toots_title.append("div").attr("id","infos-instance").html( `

Users
${cnode.users>10000?Math.round(cnode.users/1000)+" K": cnode.users}

Toots frequency
${d3.format(".1f")(1000*(+nodes_hash.get(instance)[0]["toots-frequency"]))} ‰

In-degree
${+nodes_hash.get(instance)[0]["in-degree"]}

Language
${nodes_hash.get(instance)[0]["language_all"]}

Registration
${cnode.registration=="Open (by admin approval)" ? 'Open (by admin approval)' : cnode.registration}

` ) toots_title.select("#hashtags-instance").remove() const hasht = toots_title.append("div").attr("id","hashtags-instance") hasht.selectAll(".hashtags").data(hashtags).join("span").attr("class","hashtags").html(d=>`#${d.name}`) } return Object.assign(instance_info_div.node(), { update:update }); }33:T956,timeline ={ const toots_list=d3.select(html`

`); const toots_data = toots_list.append("div").attr("id","toots") var update=function(instance,public_toots){ 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) { var media_class = ""; if(d.sensitive){ media_class = "sensitive-media" } d3.select(this) .selectAll(".medias") .data(d.media_attachments) .join("div") .attr("class","medias") .append("figure") .attr("class","attachement") .append("img") .attr("src",media =>media.preview_url) .attr("class",media_class) .on("click",function(d){ var media_cl = d3.select(this).attr("class") if(media_cl=="sensitive-media"){ d3.select(this).attr("class","sensitive-media-visible") }else{ if(media_cl=="sensitive-media-visible"){ d3.select(this).attr("class","sensitive-media") } } }) }) toots_cont.append("small").html(toot => `${toot.created_at}`); return instance } return Object.assign(toots_list.node(), { update:update }); }34:T583,landmarks={ return {"group":[{"instance":"infosec.exchange","label":"Infosec"},{"instance":"fosstodon.org","label":"Data/Geek"},{"instance":"mastodon.gamedev.place","label":"Arts / Games"},{"instance":"fediscience.org","label":"Science"},{"instance":"wxw.moe","label":"Chinese"},{"instance":"fedibird.com","label":"Japanese"},{"instance":"planet.moe","label":"Korean"},{"instance":"piaille.fr","label":"French"},{"instance":"troet.cafe","label":"German"},{"instance":"meow.social","label":"Fandom"},{"instance":"journa.host","label":"Journalist"}],"language":[{"instance":"infosec.exchange","label":"English"},{"instance":"wxw.moe","label":"Chinese"},{"instance":"fedibird.com","label":"Japanese"},{"instance":"planet.moe","label":"Korean"},{"instance":"piaille.fr","label":"French"},{"instance":"troet.cafe","label":"German"},{"instance":"mastodon.uno","label":"Spanish"}],"registration":[{"instance":"infosec.exchange","label":"Infosec"},{"instance":"fosstodon.org","label":"Data/Geek"},{"instance":"mastodon.gamedev.place","label":"Arts / Games"},{"instance":"fediscience.org","label":"Science"},{"instance":"wxw.moe","label":"Chinese"},{"instance":"fedibird.com","label":"Japanese"},{"instance":"planet.moe","label":"Korean"},{"instance":"piaille.fr","label":"French"},{"instance":"troet.cafe","label":"German"},{"instance":"meow.social","label":"Fandom"},{"instance":"jouna.host","label":"Journalist"}]} }35:T793,function SearchForm({ uid = DOM.uid("autosuggestion").id, placeholder = "", description = "", format = (d) => d, suggestion = () => [] } = {}) { const input = htl.html``; const tag = htl.html`

${description}

`; const datalist = htl.html``; const form = htl.html`

${tag}${input}${datalist}`; let results = []; form.value = ""; // starting value form.onsubmit = (event) => { console.log("submit") event.preventDefault(); } form.onchange = (event) => { console.log("change") const value = event.target.value; if(nodes_hash.has(value)){ form.value = results.find((d) => format(d) == value) || ""; input.blur(); // removes keyboard focus from the element upon submission form.dispatchEvent(new Event("input", {bubbles: true})); }else{ console.log("catched") } }; // "cache" const options = new Map(); const getOption = async (text) => options.get(text) || (text ? options.set(text, await suggestion(text)) : options.set(text, []), options.get(text)); input.oninput = async (event) => { let value = event.target.value; results = await getOption(value); d3.select(`#${uid}`) .selectAll("option") .data(results) .join("option") .attr("value", format); console.log("classsel") if(results.length==0 & value.length>0){ d3.select(input).style("color","#ff0000").attr("class","instance-notfound") d3.select(tag).style("color","#ff0000").text("Instance not found") }else{ d3.select(input).style("color","#000000").attr("class","instance-ok") d3.select(tag).style("color","#000000").text("Searching an instance") } }; return form; }36:[{"id":"695c5d7ce8658856a63474630b7a8db663587b9ab0d3192cd79a588696bfe950e6261daa0fa00347069b9171c074dac8faa718600057c802db38411b16d3c2f6","href":"https://static.observableusercontent.com/files/695c5d7ce8658856a63474630b7a8db663587b9ab0d3192cd79a588696bfe950e6261daa0fa00347069b9171c074dac8faa718600057c802db38411b16d3c2f6","name":"nodes17112022v3.csv","type":"text/csv","lastModified":1668784848619.307,"size":1028257},{"id":"499a3639f0e1149beea9fda6853929216f2338748adda9106a9f5a15259421d34a61ac7547e9861c2e6ab66cd4a95160f88823ad0043668117587a90434f9745","href":"https://static.observableusercontent.com/files/499a3639f0e1149beea9fda6853929216f2338748adda9106a9f5a15259421d34a61ac7547e9861c2e6ab66cd4a95160f88823ad0043668117587a90434f9745","name":"nodes17112022v3@1.csv","type":"text/csv","lastModified":1668785193379.809,"size":1028264},{"id":"73c4c9e577d92ca26bdd89b72fa9391e63d582260a296efa3cab1a24ed4fa6cc4cc1035acdca76b8ffee07c6e95960e472f943165a4416156e81bb83a8e74335","href":"https://static.observableusercontent.com/files/73c4c9e577d92ca26bdd89b72fa9391e63d582260a296efa3cab1a24ed4fa6cc4cc1035acdca76b8ffee07c6e95960e472f943165a4416156e81bb83a8e74335","name":"nodes17112022v4.csv","type":"text/csv","lastModified":1670316690946.735,"size":1028031}] 2e:{"title":"Mapstodon notebook","cells":[{"id":196,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1300,"value":"viewof instance = SearchForm({\n placeholder: \"Type-in to search...\",\n description: \"Searching an instance\",\n suggestion: (text) => graph.filter(n => n.label.match(text)).map(n=>n.label)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"buttons = {\n const form = html`\n \n \n`;\n form.out.onclick = () => chart.zoomOut();\n form.instance.onclick = () => chart.zoomTo(instance);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"color_scales = {\n return {\n group:d3.scaleOrdinal().range([\"#666666\",\n\"#66c2a5\",\n\"#fc8d62\",\n\"#8da0cb\",\n\"#e78ac3\",\n\"#a6d854\",\n\"#ffd92f\",\n\"#e5c494\",\n\"#b3b3b3\",\n\"#1b9e77\",\n\"#d95f02\",\n\"#7570b3\",\n\"#e7298a\",\n\"#66a61e\",\n\"#e6ab02\",\n\"#a6761d\",\n\"#f0027f\"]).domain(group_levels),\n language:d3.scaleOrdinal([\n \"#a6cee3\",\n \"#1f78b4\",\n \"#b2df8a\",\n \"#33a02c\",\n \"#fb9a99\",\n \"#e31a1c\",\n \"#fdbf6f\",\n \"#ff7f00\",\n \"#cab2d6\",\n \"#6a3d9a\",\n \"#8dd3c7\",\n \"#b15928\",\n \"#bc80bd\",\n \"#fdb462\",\n \"#fb8072\",\n \"#ffff99\",\n \"#a65628\"\n ]).domain(lang_levels),\n registration:d3.scaleOrdinal().range([\"#4daf4a\",\"#feb24c\",\"#e41a1c\"]).domain([\"Open\",\"Open (by admin approval)\",\"Closed\"])\n}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"viewof size_var = Inputs.select([\"toots-frequency\",\"users\",\"in-degree\"], {label: \"Size : \",value:\"in-degree\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"viewof color_var = Inputs.select([\"language\",\"group\",\"registration\"], {label: \"Color : \",value:\"group\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"clipboard = Inputs.button(\"Copy this place to clipboard for sharing\", {\n value: null,\n reduce: function(){\n navigator.clipboard.writeText(`https://www.comeetie.fr/galerie/mapstodon?instance=${instance} #fediversemap #mapstodon`)\n },\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"viewof local= html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"viewof show_small_instances= html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"urlparams = {\n if(params.has(\"instance\") && nodes_hash.has(params.get(\"instance\"))){\n set(viewof instance,params.get(\"instance\"))\n // wait a little and zoom\n new Promise((resolve, reject) => {\n setTimeout(() => {\n chart.zoomTo(params.get(\"instance\"));\n }, 2200);\n})\n //chart.setFocus(params.get(\"instance\"))\n }else{\n set(viewof instance,graph.filter(d=>d[\"in-degree\"]>1)[seed].label)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"update_focus = chart.setFocus(instance)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1207,"value":"font_scales={\n return {\n \"in-degree\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"in-degree\"])]).range([15,60]),\n \"users\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"users\"])]).range([15,180]),\n \"toots-frequency\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"toots-frequency\"])]).range([15,180])\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1191,"value":"size_scales={\n return {\n \"in-degree\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"in-degree\"])]).range([1,10]),\n \"users\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"users\"])]).range([1,30]),\n \"toots-frequency\":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d[\"toots-frequency\"])]).range([1,30])\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"lang_levels=[\"NA\",\"English\",\"German\", \"Japanese\" , \"French\", \"Chinese\",\"Spanish\",\"Dutch\", \"Italian\" , \"Portuguese\" ,\"Korean\", \"Polish\", \"Russian\",\"Catalan\",\"Czech\", \"Swedish\",\"Ukrainian\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1015,"value":"group_levels= Array.from(new Set(graph.map(d=>+d.group))).sort((a,b)=>a-b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"regions=landmarks[color_var].map(function(l){ \n const cnode=nodes_hash.get(l.instance)[0];\n return {\"instance\":l.instance,\"label\":l.label,\"group\":cnode.group,\"language\":cnode.language,\"x\":cnode.x,\"y\":cnode.y}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1364,"value":"update_small_instances_visibility = chart.showSmallInstances(show_small_instances)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"update_instance_info = instanceinfo.update(instance,public_toots)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1179,"value":"update_url=function(instance){\n //params.set(\"instance\",instance)\n //window.history.pushState({focus:instance},\"\",`index-dev.html?${params}`)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"seed = Math.ceil(Math.random()*graph.filter(d=>d[\"in-degree\"]>1).length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1063,"value":"update_colors = chart.setColors(color_var,regions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1107,"value":"update_sizes = chart.setSizes(size_var)","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"update_timeline = timeline.update(instance,public_toots)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"hashtags = d3.json(nodes_hash.get(instance)[0].base+\"/api/v1/trends?limit=4\").catch( d => [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"public_toots = d3.json(nodes_hash.get(instance)[0].base+\"/api/v1/timelines/public?local=\"+local).catch( d => [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"labels_pos = d3.group(graph, n => n.label)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"graph.map(d=>d.label).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"nodes_hash = d3.group(graph,d=>d.label)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"graph = FileAttachment(\"nodes17112022v4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"margin=10","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"expand_factor=1","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"x = d3.scaleLinear()\n .domain([d3.min(graph,d=>+d.x),d3.max(graph,d=>+d.x)])\n .range([margin,expand_factor*width-margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"y = d3.scaleLinear()\n .domain([d3.min(graph,d=>+d.y),d3.max(graph,d=>+d.y)])\n .range([expand_factor*height-margin,margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"max_degree = d3.max(graph,d=>+d[size_var])","pinned":true,"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":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"},{"id":1309,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"viewof instance_bis = Inputs.select(graph.map(d=>d.label).sort(), {label: \"Instance : \"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}