Published
Edited
Aug 5, 2020
2 forks
Importers
4 stars
{
return draw(network, width, height, thickness)
}
function draw(network, width, height, thickness){
const svg = d3.select(DOM.svg(width, height))
.classed('chart', true);
let pos = layout(network, width, height)
let thick = d3.scaleLinear().domain([Math.min(...network.edges.map(e => e.w)), 0, Math.max(...network.edges.map(e => e.w))]).range([thickness, 1, thickness])
let color = d3.scaleLinear().domain([Math.min(...network.edges.map(e => e.w)), 0, Math.max(...network.edges.map(e => e.w))]).range(['red', 'purple', 'blue'])
var link = svg
.selectAll(".line")
.data(network.edges)
.enter().append("line")
.attr("x1", d => pos(d.s).x)
.attr("y1", d => pos(d.s).y)
.attr("x2", d => pos(d.t).x)
.attr("y2", d => pos(d.t).y)
.attr("stroke-width", d => thick(d.w))
.attr("stroke", d => color(d.w))
var node = svg
.selectAll(".node")
.data(network.nodes )
.enter().append("circle")
.attr("id", (d => `n-${d.layer}-${d.id}`))
.attr("cx", d => pos(d.id).x)
.attr("cy", d => pos(d.id).y)
.attr("r", 25)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "white")
return svg.node();
}
function layout(net, width, height, margin=50) {
// Determine the layer sizes
let lsz = net.nodes.reduce((a, i) => {a[i.layer]= a[i.layer] ? a[i.layer]+1: 1; return a}, {})
// Set the horizontal scaler
let horz = d3.scaleLinear()
.domain([0, Math.max(...net.nodes.map(n => n.layer))])
.range([margin, width-margin]);
const pos = (id) => {
const node = net.nodes.find(e => e.id == id);
return {
x: horz(node.layer),
y: d3.scaleLinear().domain([0, lsz[node.layer]+1]).range([0, height])(node.nr)}
}
return pos
}
d3 = require('d3@4')
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.
