dataset = d3.json("https://gist.githubusercontent.com/emanueles/1dc73efc65b830f111723e7b877efdd5/raw/2c7a42b5d27789d74c8708e13ed327dc52802ec6/lesmiserables.json")
popularity = {
let counter = {};
// para cada link, adiciona 1 a popularidade de target e source.
dataset.links.forEach(function(link) {
counter[link.source] == null ? counter[link.source] = 1 : counter[link.source] += 1;
counter[link.target] == null ? counter[link.target] = 1 : counter[link.target] += 1;
});
return counter;
}
nodeRadiusScale = d3.scaleSqrt()
.domain(d3.extent(Object.values(popularity)))
.range([5, 20])
graph = ForceGraph(dataset, {
height: 800,
width: width,
nodeRadius: node => nodeRadiusScale(popularity[node.id]),
nodeGroup: node => node.group,
nodeTitle: node => `${node.id}: ${popularity[node.id]} ${plurazire('connection', popularity[node.id])}`,
nodeDistanceMax: 270,
nodeStrenght: -50,
linkDistance: 50,
})
function plurazire(word, n) {
return n > 1 ? word + 's' : word;
}
import {ForceGraph} from "@emanueles/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.
