Digital tools + social sciences + design at the Tantlab (Copenhagen). Ex Sciences Po médialab (Paris). Co-founder of Gephi & Hyphe. Toots at @jacomyma@mas.to.
d3 = require("d3@7")
// Load Graphology.
// It is called "Graph" because it is the constructor of the Graph class.
Graph = require('graphology@0.25.1/dist/graphology.umd.min.js')
// Load Graphology Library (layout algorithms, parser, etc.)
GraphologyLibrary = require('graphology-library@0.7.1/dist/graphology-library.min.js')
// Load the network as XML into the variable "arctic"
arctic = FileAttachment("arctic.gexf").xml()
// Parse the XML file.
// We need the parser from Graphology Library, the Graph constructor,
// and of course the file ("arctic").
graph = GraphologyLibrary.gexf.parse(Graph, arctic)
getScales = function(g, settings) {
// Settings defaults
settings = settings || {};
settings.canvasOversampling = settings.canvasOversampling || 2;
settings.canvasWidth = settings.canvasWidth || 500;
settings.canvasHeight = settings.canvasHeight || 500;
settings.canvasMargin = (settings.canvasMargin!==undefined) ? settings.canvasMargin : 24 * settings.canvasOversampling;
settings.nodeSize = settings.nodeSize || 0.5 * settings.canvasOversampling;
/// Scale node coordinates
// Compute domain and range for X and Y axes
var xDomain = d3.extent(
g.nodes().map(nid => g.getNodeAttribute(nid, "x"))
);
var xRange = [0 + settings.nodeSize + settings.canvasMargin, settings.canvasWidth * settings.canvasOversampling - settings.nodeSize - settings.canvasMargin];
var yDomain = d3.extent(
g.nodes().map(nid => g.getNodeAttribute(nid, "y"))
);
var yRange = [0 + settings.nodeSize + settings.canvasMargin, settings.canvasHeight * settings.canvasOversampling - settings.nodeSize - settings.canvasMargin];
// Compare the ratios (range / domain)
if ((xRange[1]-xRange[0])/(xDomain[1]-xDomain[0])>(yRange[1]-yRange[0])/(yDomain[1]-yDomain[0])) {
// The X axis is more stretched: we reduce the range
const xMiddle = (xRange[0]+xRange[1]) / 2;
const newRange = yRange[1] - yRange[0];
xRange = [xMiddle - newRange/2, xMiddle + newRange/2];
} else {
// The Y axis is more stretched: we reduce the range
const yMiddle = (yRange[0]+yRange[1]) / 2;
const newRange = xRange[1] - xRange[0];
yRange = [yMiddle - newRange/2, yMiddle + newRange/2];
}
// Flip Y axis
yRange.reverse();
// Build scales
var x = d3.scaleLinear()
.domain(xDomain)
.range(xRange);
var y = d3.scaleLinear()
.domain(yDomain)
.range(yRange);
return {x, y}
}
kde = require('fast-kde')
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.
