Public
Edited
Nov 17, 2022
chart(tree)
url = "https://econtwitter.net/@Edent@mastodon.social/109359170070635243"
urlParse = (url) => {
const idsMatcher = /\@[^\@\/]*/ig
const ids = url.match(idsMatcher)
const instance = url.split('@')[0].split('/').slice(-2)[0]
const status = url.split('/').slice(-1)[0]
return ({instance:instance, status:status})
}
urlParse(url)
getUrlStatus = (urlObject) => {
const status = `https://${urlObject.instance}/api/v1/statuses/${urlObject.status}`
const context = `https://${urlObject.instance}/api/v1/statuses/${urlObject.status}/context`
return ({status:status, context:context})
}
urlStatus = getUrlStatus(urlParse(url))
getStatus = (url) => {
return d3.json(url.status)
}
getContext = (url) => {
return d3.json(url.context)
}
status = getStatus(urlStatus)
context = getContext(urlStatus)
bootstrapTree = (status, context) => {
var root = {name: stripHTML(status.content), children: []}
context.descendants.forEach(
(child) => root.children.push({
name:stripHTML(child.content),
children: []
})
)
return root
}
stripHTML = (text) => {
return text.replace(/<[^>]+>/g, '')
}
tree = bootstrapTree(status, context)
import {chart} from "@mauforonda/collapsible-tree"
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.
