Unlisted
Edited
Nov 16, 2022
1 fork
1 star
seed = Math.ceil(Math.random()*graph.nodes.length)
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}]
update_focus = chart.setFocus(instance)
timeline ={
const toots_list=d3.select(html`<div></div>`);
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 => `
<a href="${toot.account.url}">
<figure class="image is-64x64"><img src="${toot.account.avatar_static}" alt="Avatar"></figure>
</a> `)
var toots_cont = toots
.append("div")
.attr("class","media-content")
.html(toot => `
<a href=${toot.account.url}>
<div class="content">
<p>
<strong>${toot.account.display_name}</strong>
<small>@${toot.account.acct}</small>
</p>
</div>
</a>
<p>${toot.content}</p>
`)
toots_cont.each(function(d) {
d3.select(this)
.selectAll(".medias")
.data(d.media_attachments)
.join("div")
.attr("class","medias")
.html( media => `<figure class="attachement">
<img src="${media.preview_url}" /></figure>`)
})
toots_cont.append("small").html(toot => `<a href="${toot.uri}">${toot.created_at}</a>`);
return instance
}
return Object.assign(toots_list.node(), {
update:update
});
}
graph.nodes.filter(d=>d.key=="aspiechattr.me")
update_timeline = timeline.update(instance,public_toots)
public_toots = d3.json("https://"+instance+"/api/v1/timelines/public?local="+local).catch( d => [])
graph.nodes.map(d=>d.attributes.label).sort()
nodes_hash = d3.group(graph.nodes,d=>d.key)
graph = FileAttachment("graphF.json").json()
margin=10
x = d3.scaleLinear()
.domain([-2800,-400])
.range([margin,width-margin])
y = d3.scaleLinear()
.domain([-1050,1050])
.range([height-margin,margin])
col(3)
d3 = require("d3@6")
html`
<style>
text {
font-size: 7pt;
cursor: pointer;
}
circle {
cursor: pointer;
}
</style>
`
html`<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />`
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
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.
