viewof selected = navio( tweets)
FORCE simulation of data
Requires update on the data so we assign to a VARIABLE
FORCE simulation takes NODES as parameters
FUNCTIONS/ FEATURES to play the data by d3 functionalities
{
// NOTE: d => ({...d}) for duplicating values of NODES, but we cannot duplicate
// for LINKS, it will break the links of the nodes
// SOURCE; we use source to get ORIGINAL links of NODES since the duplicate links are broken
const nodes= network.nodes.map( d=> ({...d})),
// MIRRORING/ Copying the VALUES
links= network.links.map( s=> ({
source: s.source.id,
target: s.target.id,
value: s.value
}));
const svg= d3.create("svg").attr("viewBox", [0 , 0 , width, height]);
// CREATE circle for EACH HASHTAGS
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// const circles= svg.selectAll("circle")
// .data(nodes)
// .join("circle")
// // .attr("cx", d => d.x)
// // .attr("cy", d => d.y)
// .attr("r", 3);
// LINES,
// DATA => pass the links
const lines= svg
.selectAll("line")
.data(links)
.join("line")
.style("stroke", "#ccc")
.style("stroke-opacity", l => {
console.log(l, opacity(l.value));
return opacity(l.value);
});
//// TEXT display of HASHtags
const text= svg.selectAll("text")
.data(nodes)
.join("text")
.attr("fill", "#333")
.style("font-size", d => size( d.value) + "pt")
.style("fill", d => color(d.cluster))
.text( d => d.id);
// ticked function to UPDATE data points
// Add text of hashtags
const ticked= () =>{
// circles.attr("cx", d => d.x)
// .attr("cy", d=> d.y);
lines
.attr("x1", d => d.source.x)
.attr("y1", d=> d.source.y)
.attr("x2", d=> d.target.x)
.attr("y2", d=> d.target.y);
text.attr("x", d => d.x)
.attr("y", d => d.y);
}
// VISUALIZATION
/// FORCE Simulations; perform functions
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// UPDATE the simulation when NEW data selected with above FUNCTION => tick mark
const simulation= d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-20))
// CONNECT via link, we need to IDENTIFY via SOURCE for ID
.force("link", d3.forceLink(links).id( d => d.id))
.force("center", d3.forceCenter( width/ 2, height/ 2) )
// Keeping the VALUES by boundary
.force("boundary", forceBoundary(3, 3 , width, height))
.on("tick", ticked);
// DRAGE EVENTS, and PASS the simulation
text.call(drag(simulation));
return svg.node();
// NOTE:
// STOPPING the background process to clean the garbage
// REQ. in observable,
invalidation.then(() => simulation.stop());
}
style= html `<style> svg text{
font-family: sans-serif;
text-anchor: middle;
cursor: pointer;
}`
color= d3.scaleOrdinal( d3.schemeDark2)
opacity= d3.scaleLinear()
.domain( d3.extent( network.links, d => d.value))
.range([0, 1]);
size= d3.scaleLinear()
.domain( d3.extent(network.nodes, d=> d.value))
.range([ 4, 19])
height= 400
network= {
// DRAG the NODES after finding it and FIXED the NODES
const dLinks= new Map();
for (let t of selected){
// Twice LOOPING for creating co-oocurences
for(let i =0; i< t.entities.hashtags.length; i+=1)
for(let j = i + 1; j< t.entities.hashtags.length; j += 1)
{
// STRUCTURE to get the values => here, hashtags
const key = getKey(
t.entities.hashtags[i].text,
t.entities.hashtags[j].text
);
// IF no key found initialize a NEW KEY
if (!dLinks.has(key)) dLinks.set(key, 0);
dLinks.set(key, dLinks.get(key) + 1);
}
}
// NODES
const dNodes= new Map();
let links= [];
for( let[l,v] of dLinks){
const [source, target]= l.split("~");
// FINDING NODES if exists, if not CREATE new one
const s= findOrAdd(dNodes, source);
const t= findOrAdd(dNodes, target);
dNodes.set(source, ((s.value += 1 ), s));
dNodes.set(target, ((t.value += 1), t));
// FOr visualization we push the array and links
links.push({ source: s, target: t, value: v});
}
const network = { nodes: Array.from(dNodes.values()), links };
// CLUSTERING; CLUSTERS the nodes and links values
netClustering.cluster(network.nodes, network.links);
return network;
}
getKey= (a, b) => (a >= b ? `${a}~${b}` : `${b}~${a}`)
findOrAdd= ( dNodes, n) =>{
if (!dNodes.has(n)) dNodes.set(n, { id: n, value: 0 });
return dNodes.get(n);
}
drag= simulation =>{
function dragstarted( event){
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx= event.subject.x;
event.subject.fy= event.subject.y;
}
function dragged(event){
event.subject.fx= event.x;
event.subject.fy= event.y;
}
function dragended(event){
if(!event.active) simulation.alphaTarget(0);
event.subject.fx= null;
event.subject.fy= null;
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
tweets= FileAttachment("duto_guerra_tweets.json").json()
d3= require("d3@6")
import { navio } from "@john-guerra/navio"
forceBoundary= require("d3-force-boundary")
netClustering= require("netclustering")
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.
