chart = {

// replay;

const width = 1000;

const height = 800;

data.forEach(node => {

node.system_id = parseInt(node.system_id);

node.region_id = parseInt(node.region_id);

node.sys_name = node.sys_name ; // parseInt(node.sys_name);

node.neighbors = node.neighbors.map(Number);

// Genereeri igale süsteemile juhuslikud koordinaadid (x, y) visualiseerimiseks

node.x = 0 ; // Math.random() * 1000; // Juhuslik x-koordinaat

node.y = 0 ; // Math.random() * 800; // Juhuslik y-koordinaat

const svg = d3.create("svg").attr("width", width).attr("height", height); // .attr("viewBox", [0, 0, width, height]);

const nodes = data.map(d => ({id: d.system_id, name:d.sys_name, region:d.region_id}));

let links = data.flatMap(d => d.neighbors.map(neighbor => ({

source: d.system_id,

target: neighbor

const seenLinks = new Set();

links = links.filter(d => {

let key = [d.source, d.target].sort().join("-"); // TEMP link's ( .sort() ) w is A-B or/and B-A , then only let/make A-B (not let doble's (like B-A))

if (seenLinks.has(key)) return false; // when found double "link" (in "links")

seenLinks.add(key); return true;

const simulation = d3.forceSimulation(nodes)

.force("link", d3.forceLink(links).id(d => d.id))

.force("charge", d3.forceManyBody().strength(-5)) //omavaheline tõukejõud

.force("center", d3.forceCenter(width / 2, height / 2)); // kogu keskpunkt

const link = svg.append("g")

.attr("stroke", "#999")

.attr("stroke-opacity", 0.6)

.selectAll("line")

.data(links)

.join("line")

.attr("stroke-width", d => Math.sqrt(d.value));

const node = svg.append("g")

.attr("stroke", "#fff")

.attr("stroke-width", 1.5)

.selectAll("circle")

.data(nodes)

.join("circle")

.attr("r", 5)

.attr("fill", "#69b3a2")

.call(drag(simulation));

const label = svg.append("g")

.selectAll("text")

.data(nodes)

.join("text")

.attr("text-anchor", "middle")

.attr("font-size", "10px")

.attr("fill", "black")

.text(d => d.name); //d.id+" "+

simulation.on("tick", () => {

link

.attr("x1", d => d.source.x)

.attr("y1", d => d.source.y)

.attr("x2", d => d.target.x)

.attr("y2", d => d.target.y);

node

.attr("cx", d => d.x)

.attr("cy", d => d.y);

label

.attr("x", d => d.x)

.attr("y", d => d.y + 15); // position label below node

function drag(simulation) {

function dragstarted(event, d) {

if (!event.active) simulation.alphaTarget(0.05).restart();

d.fx = d.x;

d.fy = d.y;

}

function dragged(event, d) {

d.fx = event.x;

d.fy = event.y;

}

function dragended(event, d) {

if (!event.active) simulation.alphaTarget(0);

d.fx = null;

d.fy = null;

}

return d3.drag()

.on("start", dragstarted)

.on("drag", dragged)

.on("end", dragended);

return Object.assign(svg.node());

// replay;