Published
Edited
Jul 22, 2020
1 fork
Insert cell
md`# Force directed graph
This graph is generated using d3 spring layout package and customized for first 50 nodes from the facebook snap dataset provided in the assignement. The node weights are the # of links of the node and the size varies by the weight. The color of each node is also assigned my the weight of the nodes using d3 scaleOrdinal.
`
Insert cell
d3.extent(n4.map(d => d.followers_count))
Insert cell
r_scale = d3.scalePow().exponent(0.5).range([5, 20]).domain(d3.extent(n2.map(d => d.data.user.followers_count)))
Insert cell
r_scale(n3[40].data.user.followers_count)
Insert cell
chart = {
const links = l3.map(d => Object.create(d));
const nodes = n3.map(d => Object.create(d));
const nn = nodes.map(n => {
const red = d3.randomInt(1, 256)();
const green = d3.randomInt(1, 256)();
const blue = d3.randomInt(1, 256)();
const alpha = Math.random();
return {
color: d3.rgb(red, green, blue, alpha)
};
});
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
const gethtml = (node) => {
return `<div>Usuario: ${node.data.user.name}</div> <div>followers: ${node.data.user.followers_count}</div>`;
}
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody().strength(-140).distanceMax(50).distanceMin(10))
.force("center", d3.forceCenter(width / 2, height / 2));

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", 1);

const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", d => r_scale(d.data.user.followers_count))
.attr("fill", d => color(d))
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '.85');
div.transition()
.duration(50)
.style("opacity", 1);
let num = 50;
div.html(gethtml(d))
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on('mouseout', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '1');
div.transition()
.duration('50')
.style("opacity", 0);
})
.call(drag(simulation));

simulation.on("tick", () => {
node.attr("cx", function(d) { return d.x = Math.max(5, Math.min(width - 5, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(5, Math.min(height - 5, d.y)); });

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);

});

invalidation.then(() => simulation.stop());

return svg.node();
}
Insert cell
l=FileAttachment("links@3.json").json()
Insert cell
d3.extent(n["nodes"].map(d => d.weight))
Insert cell
n=FileAttachment("network@6.json").json()
Insert cell
n2 = d3.json("https://gist.githubusercontent.com/whatevercamps/53fdda09b7c8a28b2e017417462b3679/raw/72d4d876bae393b439bd98ed45f8f51de28595ff/nodos.json")
Insert cell
l2 = d3.json("https://gist.githubusercontent.com/whatevercamps/6452cd84a5cac4f25e7a9ed377f93118/raw/cc272dddf50fb6b1300a4153c0f883548997f47b/links.json")
Insert cell
n3 = d3.json("https://gist.githubusercontent.com/whatevercamps/e671f85e26517cb723341fe921e42726/raw/185bb08ac127f7e26f4a5932f856f1cc9d83771f/nodes-2.json")
Insert cell
l3 = d3.json("https://gist.githubusercontent.com/whatevercamps/46db1b8ee6bb2472ba9bd594a7c84b17/raw/13b9fbb6132a3b84b612f1fe08b288822afc8ae7/links-2.json")
Insert cell
n4 = d3.csv("https://gist.githubusercontent.com/whatevercamps/16b64067452669a6668963b25fa2a14d/raw/f78f924c09349e83d56d226d9d560207fd649c1b/completo_final.csv")
Insert cell
l4 = d3.csv("https://gist.githubusercontent.com/whatevercamps/16b64067452669a6668963b25fa2a14d/raw/f78f924c09349e83d56d226d9d560207fd649c1b/completo_links.csv")
Insert cell
style = html`<style>

div.tooltip {
position: absolute;
text-align: center;
padding: .5rem;
background: #FFFFFF;
color: #313639;
border: 1px solid #313639;
border-radius: 8px;
pointer-events: none;
font-size: 1.3rem;
}

</style>`
Insert cell
height=600
Insert cell
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(Math.sqrt(d.weight));
}
Insert cell
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
Insert cell
d3 = require("d3@5", 'd3-random')
Insert cell

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.
Learn more