md`# Intersection Nodes`
width = 500;
height = 500;
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);
let nodes = [];
for (let i = 0; i < coordinates.length; i++) {
nodes.push([coordinates[i].x, coordinates[i].y]);
}
// Append the nodes to the svg element
for (let i = 0; i < nodes.length; i++) {
svg
.append('circle')
.attr('cx', nodes[i][0])
.attr('cy', nodes[i][1])
.attr('r', r)
.style('fill', 'green')
.text('merhaba');
}
let links = [];
// branch 1 in
links.push(
{
count: 56,
source: nodes[3],
target: nodes[2]
}
);
// Link from the first node to the third
links.push(
{count: 13,
source: nodes[4],
target: nodes[19]
}
);
links.push(
{count: 46,
source: nodes[5],
target: nodes[12]
}
);
// branch 2 in
links.push(
{count: 44,
source: nodes[9],
target: nodes[8]
}
);
links.push(
{count: 23,
source: nodes[10],
target: nodes[1]
}
);
links.push(
{count: 84,
source: nodes[11],
target: nodes[18]
}
);
//branch 3 in
links.push(
{count: 68,
source: nodes[15],
target: nodes[14]
}
);
links.push(
{count: 12,
source: nodes[16],
target: nodes[7]
}
);
links.push(
{count: 76,
source: nodes[17],
target: nodes[0]
}
);
// branch 4 in
links.push(
{count: 35,
source: nodes[21],
target: nodes[20]
}
);
links.push(
{count: 87,
source: nodes[22],
target: nodes[13]
}
);
links.push(
{count: 56,
source: nodes[23],
target: nodes[6]
}
);
const sqrtScale = d3.scaleSqrt()
.domain(links.map(d=>d.count))
.range([2,10]);
const colorScheme=['#f28e2c ','#e15759 ','#76b7b2 ','#59a14f ']
const colorScale = d3.scaleQuantile()
.domain(links.map((d,i) => i))
.range(colorScheme);
// Append the links to the svg element
console.log(links)
// for (let i = 0; i < links.length; i++) {
svg.selectAll('path')
.data(links)
.enter()
.append('path')
.attr('d', (f,i) => {
var sx = links[i].source[0];
var sy = links[i].source[1];
var tx = links[i].target[0];
var ty = links[i].target[1];
var h = height /2;
var w = width /2;
var d;
if (i % 3 === 0) {
if(i === 0 || i === 6) {
return `M ${sx} ${sy} Q ${tx} ${sy} ${tx} ${ty} `
}
return `M ${sx} ${sy} Q ${sx} ${ty} ${tx} ${ty} `
}
if(i == 4 || i == 7 ||i == 10 || i == 1) {
return `M ${sx} ${sy} ${tx} ${ty} `
}
if(i == 2 || i == 5 || i == 8 || i == 11) {
return `M ${sx} ${sy} Q ${w} ${h} ${tx} ${ty} `
}
return d;
}
)
.attr('stroke', (d,k)=>{
const s=Math.floor(k/3)
return colorScheme[s]
})
.style('stroke-width',function (d,i) {
return sqrtScale(links[i].count);
})
.attr('fill', 'none');
return svg.node();
}
coordinates = [
{ x: width/2 + (r*6), y: height/2 -(r*21)},
{ x: width/2 + (r*9), y: height/2 - (r*21)},
{ x: width/2 + (r*12), y: height/2 - (r*21) },
{ x: width/2 + r*21, y: height/2 - (r*12) },
{ x: width/2 + r*21, y: height/2 - (r*9) },
{ x: width/2 +r*21, y: height/2 - (r*6)},
{ x: width/2 + r*21, y: height/2 + (r*6) },
{ x: width/2 + r*21, y: height/2 + (r*9) },
{ x: width/2 + r*21, y: height/2 + (r*12)},
{ x: width/2 + (r*12), y: height/2 + (r*21) },
{ x: width/2 + (r*9), y: height/2 + (r*21) },
{ x: width/2 + (r*6), y: height/2 + (r*21) },
{ x: width/2 - (r*6), y: height/2 + (r*21)},
{ x: width/2 - (r*9), y: height/2 + (r*21) },
{ x: width/2 - (r*12), y: height/2 + (r*21) },
{ x: width/2 - r*21, y: height/2 + (r*12) },
{ x: width/2 - r*21, y: height/2 + (r*9) },
{ x: width/2 - r*21, y: height/2 + (r*6)},
{ x: width/2 - r*21, y: height/2 - (r*6) },
{ x: width/2 - r*21, y: height/2 - (r*9) },
{ x: width/2 - r*21, y: height/2 - (r*12)},
{ x: width/2 - (r*12), y: height/2 -(r*21)},
{ x: width/2 - (r*9), y: height/2 - (r*21)},
{ x: width/2 - (r*6), y: height/2 - (r*21) },
]
r = 10
//
d3 = require("d3@5");
//
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.
