import {checkbox, select} from "@jashkenas/inputs"
viewof ch1 = checkbox({
title: "Verified Account",
options: [
{ value: "t", label: "True" },
{ value: "f", label: "False" }
],
value: ["t", "f"],
})
mutable linked_users = ""
chart = {
// const links = data.links.map(d => Object.create(d));
// const nodes = data.nodes.map(d => Object.create(d));
const links = filtered.links.map(d => Object.create(d));
const nodes = filtered.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("x", d3.forceX())
.force("y", d3.forceY());
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 6)
.attr("fill", color)
.call(drag(simulation))
.attr("id", d=>d.id);
node.append("title")
.text(d => (d.id + ' ' + d.group));
node.on("click", function(d){
mutable linked_users = this.id;
});
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
// data = d3.json("https://raw.githubusercontent.com/sharpsonmong/fyp/main/out_cotweet.json?token=AII4MQ4YDWUFLYFXK5EYDWDAC73VM")
// data = d3.json("https://raw.githubusercontent.com/sharpsonmong/fyp/main/FSA_3051-3055_coretweet.json?token=AII4MQ2GMTT5XPVQ7FNFQXTAEZE52")
data = d3.json("https://raw.githubusercontent.com/sharpsonmong/fyp/main/out_co-retweet.json?token=AII4MQ4NAKK466B5FYFZJWDAP2MBW")
groupid = (dd3==="true")?dd3 : parseInt(dd3)
users = data.nodes.filter(d=>d.group === groupid || groupid==="true").map(a => a.id);
usersObj = {
var obj = []
for(var i = 0; i < data.nodes.length; i++) {
if (data.nodes[i].group === groupid || groupid==="true") {
obj.push(data.nodes[i]);
}
}
return obj;
}
linksObj = {
var obj = []
for(var i = 0; i < data.links.length; i++) {
if (users.includes(data.links[i].source) || users.includes(data.links[i].target)) {
obj.push(data.links[i]);
}
}
return obj;
}
filtered = {
var haha = new Object
haha.directed = data.directed
haha.graph = data.graph
haha.multigraph = data.multigraph
haha.nodes = usersObj
haha.links = linksObj
return haha;
}
height = 1200
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
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);
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event,d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event,d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
userdata = d3.json("https://raw.githubusercontent.com/sharpsonmong/fyp/main/user.json?token=AII4MQ726MAEOPLQMUKVLTTAPWVNK")
userdata.tokenized_word
M = userdata.tokenized_word
occurences = {
var occurences = new Object;
for (var i = 0; i < M.length; i++) {
if (typeof occurences[M[i]] == "undefined") {
occurences[M[i]] = 1;
} else {
occurences[M[i]]++;
}
}
return occurences;
}
occurences.length
word_data = {
var stopwords = ['i','me','my','myself','we','our','ours','ourselves','you','your','yours','yourself','yourselves','he','him','his','himself','she','her','hers','herself','it','its','itself','they','them','their','theirs','themselves','what','which','who','whom','this','that','these','those','am','is','are','was','were','be','been','being','have','has','had','having','do','does','did','doing','a','an','the','and','but','if','or','because','as','until','while','of','at','by','for','with','about','against','between','into','through','during','before','after','above','below','to','from','up','down','in','out','on','off','over','under','again','further','then','once','here','there','when','where','why','how','all','any','both','each','few','more','most','other','some','such','no','nor','not','only','own','same','so','than','too','very','s','t','can','will','just','don','should','now']
var a =[];
for (const i in occurences ){
if (!stopwords.includes(i) && i !="" && occurences[i]>1){
a.push({text:i, value:occurences[i]});
}
}
return a;
}
fontFamily = "sans-serif"
fontScale = 15
rotate = function() { return (~~(Math.random() * 6) - 3) * 20; }
padding = 0
word_height = 500
scale = d3.scaleOrdinal(d3.schemeCategory10);
chart_word = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, word_height])
.attr("font-family", fontFamily)
.attr("text-anchor", "middle");
const cloud = d3.cloud()
.size([width, word_height])
.words(word_data.map(d => Object.create(d)))
.padding(padding)
.rotate(rotate)
.font(fontFamily)
.fontSize(d => Math.sqrt(d.value) * fontScale)
.on("word", ({size, x, y, rotate, text}) => {
svg.append("text")
.attr("font-size", size)
.attr("transform", `translate(${x},${y}) rotate(${rotate})`)
.attr("fill", function(d,i){return scale(Math.random() * 10);})
.text(text);
});
cloud.start();
invalidation.then(() => cloud.stop());
return svg.node();
}
pie = d3.pie()
.sort(null)
.value(d => d.value)
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
chart3 = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
return svg.node();
}
d3 = Object.assign(await require("d3@6"), {cloud: await require("d3-cloud@1")})
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.