Public
Edited
Dec 17, 2022
assocFileData = await FileAttachment("AssocData@1.csv").csv()
data = assocFileData.map( d => ({ source: d.VarName1, target: d.VarName2, value: d.Strength }) ).filter( d => d.value > 0.7 )
rename = name => name.substring(name.indexOf(".") + 1, name.lastIndexOf("."))
names = Array.from(new Set(data.flatMap(d => [d.source, d.target]))).sort(d3.ascending)
matrix = {
const index = new Map(names.map((name, i) => [name, i]));
const matrix = Array.from(index, () => new Array(names.length).fill(0));
for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += parseFloat( value );
return matrix;
}
indexMatrix = {
const srcIndexMatrix = Array.from( matrix, () => new Array(matrix.length).fill(0) );
const dstIndexMatrix = Array.from( matrix, () => new Array(matrix.length).fill(0) );
for (var i = 0; i < matrix.length; i++)
for (var j = 0; j < matrix[i].length; j++)
{
srcIndexMatrix[i][j] = (matrix[i][j] !== 0 ? j+1 : 0);
dstIndexMatrix[i][j] = (matrix[i][j] !== 0 ? i+1 : 0);
}
return { srcIndexMatrix: srcIndexMatrix, dstIndexMatrix: dstIndexMatrix };
}
chord = d3.chordDirected()
.padAngle(10 / innerRadius)
.sortSubgroups(d3.ascending)
.sortChords(d3.ascending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbon()
.radius(innerRadius - 2)
.padAngle(1 / innerRadius)
values = data.map( d => d.value )
color = d3.scaleLinear(values, d3.quantize(d3.interpolateHsl("purple","white"), values.length))
opac = d3.scaleLinear().domain(d3.extent( values)).range( [0.1,1] )
outerRadius = innerRadius + 50
innerRadius = Math.min(width, height) * 0.5 - 50
width = 954
height = width
d3 = require("d3@6")
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.
