I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
height = 600
opacity = d3
.scaleLinear()
.domain(d3.extent(network.links, d => d.value))
.range([0.1, 1])
size = d3
.scaleLinear()
.domain(d3.extent(network.nodes, d => d.value))
.range([3, 18])
color = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, d3.max(network.nodes, d => d.cluster))
)
getKey = (a, b) => (a >= b ? `${a}~${b}` : `${b}~${a}`)
initialTweets = FileAttachment("tweets_corrected.json").json()
viewof tweets = {
const myInput = dataInput({
initialValue: initialTweets,
delimiter: ","
});
myInput.value = myInput.value.map(d => d.tweet);
return myInput
}
tweets[0]
import { dataInput } from "@john-guerra/file-input-with-default-value"
network = {
const dLinks = new Map();
for (let t of selected) {
console.log("tweet", t.entities)
for (let i = 0; i < t.entities?.hashtags.length; i += 1) {
for (let j = i + 1; j < t.entities.hashtags.length; j += 1) {
const key = getKey(
t.entities.hashtags[i].text.toLowerCase(),
t.entities.hashtags[j].text.toLowerCase()
);
if (!dLinks.has(key)) dLinks.set(key, 0);
dLinks.set(key, dLinks.get(key) + 1);
}
}
}
const dNodes = new Map();
let links = [];
for (let [l, v] of dLinks) {
if (v < minLinkValue) continue;
const [source, target] = l.split("~");
const s = findOrAdd(dNodes, source);
const t = findOrAdd(dNodes, target);
dNodes.set(source, ((s.value += 1), s));
dNodes.set(target, ((t.value += 1), t));
links.push({ source: s, target: t, value: v });
}
console.log(dNodes, dLinks)
const network = { nodes: Array.from(dNodes.values()), links };
netClustering.cluster(network.nodes, network.links);
// return dNodes;
return network;
}
findOrAdd = (dNodes, n) => {
if (!dNodes.has(n)) dNodes.set(n, { id: n, value: 0 });
return dNodes.get(n);
}
d3 = require("d3@7")
forceBoundary = require("d3-force-boundary")
import { navio } from "@john-guerra/navio"
import { slider, checkbox } from "@jashkenas/inputs"
netClustering = require("netclustering")
forceInABox = require("force-in-a-box")
import {ForceGraph} from "@john-guerra/force-directed-graph"
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.
