Public
Edited
Jan 25, 2024
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
update_focus = chart.setFocus(instance)
Insert cell
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])
}
}
Insert cell
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])
}
}
Insert cell
lang_levels=["NA","English","German", "Japanese" , "French", "Chinese","Spanish","Dutch", "Italian" , "Portuguese" ,"Korean", "Polish", "Russian","Catalan","Czech", "Swedish","Ukrainian"]
Insert cell
group_levels= Array.from(new Set(graph.map(d=>+d.group))).sort((a,b)=>a-b)
Insert cell
Insert cell
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}
})
Insert cell
Insert cell
Insert cell
update_instance_info = instanceinfo.update(instance,public_toots)
Insert cell
update_url=function(instance){
//params.set("instance",instance)
//window.history.pushState({focus:instance},"",`index-dev.html?${params}`)
}
Insert cell
seed = Math.ceil(Math.random()*graph.filter(d=>d["in-degree"]>1).length)
Insert cell
update_colors = chart.setColors(color_var,regions)
Insert cell
update_sizes = chart.setSizes(size_var)
Insert cell
update_timeline = timeline.update(instance,public_toots)
Insert cell
hashtags = d3.json(nodes_hash.get(instance)[0].base+"/api/v1/trends?limit=4").catch( d => [])
Insert cell
public_toots = d3.json(nodes_hash.get(instance)[0].base+"/api/v1/timelines/public?local="+local).catch( d => [])
Insert cell
Insert cell
graph.map(d=>d.label).sort()
Insert cell
nodes_hash = d3.group(graph,d=>d.label)
Insert cell
graph = FileAttachment("nodes17112022v4.csv").csv()
Insert cell
margin=10
Insert cell
expand_factor=1
Insert cell
x = d3.scaleLinear()
.domain([d3.min(graph,d=>+d.x),d3.max(graph,d=>+d.x)])
.range([margin,expand_factor*width-margin])
Insert cell
y = d3.scaleLinear()
.domain([d3.min(graph,d=>+d.y),d3.max(graph,d=>+d.y)])
.range([expand_factor*height-margin,margin])
Insert cell
max_degree = d3.max(graph,d=>+d[size_var])
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
html`
<style>
text {
font-size: 7pt;
cursor: pointer;
}
circle {
cursor: pointer;
}

</style>
`
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Insert cell
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;
}
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more