Mastodon Hashtagsmastodon postThe trail of hashtagsWho to follow on mastodonThe Mastodonverse Packed Bar ChartThe MastodonverseMastodon Key MetricsMastodon Archive ToolWhat goes on in MastodonDiscover Mastodon InstancesMastodon activity 🐘Mastodon instances listMastodon users and statuses over timeMastodon 🐘
Mapstodon notebook
update_focus = chart.setFocus(instance)
font_scales={
return {
"in-degree":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["in-degree"])]).range([15,60]),
"users":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["users"])]).range([15,180]),
"toots-frequency":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["toots-frequency"])]).range([15,180])
}
}
size_scales={
return {
"in-degree":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["in-degree"])]).range([1,10]),
"users":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["users"])]).range([1,30]),
"toots-frequency":d3.scaleSqrt().domain([0,d3.max(graph,d=>+d["toots-frequency"])]).range([1,30])
}
}
lang_levels=["NA","English","German", "Japanese" , "French", "Chinese","Spanish","Dutch", "Italian" , "Portuguese" ,"Korean", "Polish", "Russian","Catalan","Czech", "Swedish","Ukrainian"]
group_levels= Array.from(new Set(graph.map(d=>+d.group))).sort((a,b)=>a-b)
regions=landmarks[color_var].map(function(l){
const cnode=nodes_hash.get(l.instance)[0];
return {"instance":l.instance,"label":l.label,"group":cnode.group,"language":cnode.language,"x":cnode.x,"y":cnode.y}
})
update_instance_info = instanceinfo.update(instance,public_toots)
update_url=function(instance){
//params.set("instance",instance)
//window.history.pushState({focus:instance},"",`index-dev.html?${params}`)
}
seed = Math.ceil(Math.random()*graph.filter(d=>d["in-degree"]>1).length)
update_colors = chart.setColors(color_var,regions)
update_sizes = chart.setSizes(size_var)
update_timeline = timeline.update(instance,public_toots)
hashtags = d3.json(nodes_hash.get(instance)[0].base+"/api/v1/trends?limit=4").catch( d => [])
public_toots = d3.json(nodes_hash.get(instance)[0].base+"/api/v1/timelines/public?local="+local).catch( d => [])
graph.map(d=>d.label).sort()
nodes_hash = d3.group(graph,d=>d.label)
graph = FileAttachment("nodes17112022v4.csv").csv()
margin=10
expand_factor=1
x = d3.scaleLinear()
.domain([d3.min(graph,d=>+d.x),d3.max(graph,d=>+d.x)])
.range([margin,expand_factor*width-margin])
y = d3.scaleLinear()
.domain([d3.min(graph,d=>+d.y),d3.max(graph,d=>+d.y)])
.range([expand_factor*height-margin,margin])
max_degree = d3.max(graph,d=>+d[size_var])
d3 = require("d3@6")
html`
<style>
text {
font-size: 7pt;
cursor: pointer;
}
circle {
cursor: pointer;
}
</style>
`
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
function SearchForm({
uid = DOM.uid("autosuggestion").id,
placeholder = "",
description = "",
format = (d) => d,
suggestion = () => []
} = {}) {
const input = htl.html`<input
type="text"
placeholder="${placeholder}"
list="${uid}"
autocomplete="off"
>`;
const tag = htl.html`<div style="font-size: 0.85rem; font-style: italic; margin-top: 3px;">${description}</div>`;
const datalist = htl.html`<datalist id="${uid}">`;
const form = htl.html`<div>${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;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
