semantic_graph/www/graph.js

const CONFIG = {
    'nodeSize': 8,
    'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
    'dataUrl': '../semantic_data.json',
    'preSimulate': false, // run simulation before starting, so we don't start with lines jumping around
    'labels': {
        'rotate': true,
    },
    'countries': ['Austria', 'Italy', 'Belgium', 'Latvia', 'Bulgaria', 'Lithuania', 'Croatia', 'Luxembourg', 'Cyprus', 'Malta', 'Czechia', 'Netherlands', 'Denmark', 'Poland', 'Estonia', 'Portugal', 'Finland	', 'Romania', 'France', 'Slovakia', 'Germany', 'Slovenia', 'Greece', 'Spain', 'Hungary', 'Sweden', 'Ireland'],
    'eu': {
        'lonMin': -10,
        'lonMax': 35,
        'center': [11, 47],
    },
    "filters": ["Institution", "Deployments", "Technology", "Dataset"],
};


// thanks to https://bl.ocks.org/denisemauldin/cdd667cbaf7b45d600a634c8ae32fae5
var graph, store;


var filteredCategories = [];//= ["Institution"];

CONFIG.filters.forEach(f => {
    let labelEl = document.createElement('label')
    let inputEl = document.createElement('input')
    let textEl = document.createElement('span');
    inputEl.type = "checkbox";
    textEl.innerText = f;
    labelEl.appendChild(inputEl);
    labelEl.appendChild(textEl);

    if(!filteredCategories.includes(f)) {
        inputEl.checked = true;
    }

    inputEl.addEventListener('change', function(e){
        if(e.target.checked) {
            filteredCategories.forEach((d, i) => {
                if(d == f) {
                    filteredCategories.splice(i, 1);
                }
            });
        } else {
            if(!filteredCategories.includes(f)) {
                filteredCategories.push(f);
            }
        }
        filter();
        update();
    })

    document.getElementById('filters').appendChild(labelEl);
})


function getSizeForNode(node) {
    //   if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize;
    //   if (weights[node['@id']]) return nodeSize * weights[node['@id']];
    //   if (node['@id'] == firstNodeId) return nodeSize * 1.2;
    //   // everynode has at least one link. these should equal 1
    //   return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40);
    if (node.parent) {
        return 2;
    }
    // if(getCategories(node).indexOf('City') !== -1) {
    //     return 2;
    // }
    return CONFIG.nodeSize;
}

function splitText(text) {
    var characters = [" ", "-", "_", '\xAD'];
    var charSplitPos = {};
    var mid = Math.floor(text.length / 2);
    var splitPos = false;
    var splitPosChar = false;
    // split sentences
    var _iteratorNormalCompletion6 = true;
    var _didIteratorError6 = false;
    var _iteratorError6 = undefined;

    try {
        for (var _iterator6 = characters[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
            var char = _step6.value;

            if (text.indexOf(char) < 0) {
                continue;
            }
            var tmid = text.substr(0, mid).lastIndexOf(char);
            if (tmid === -1) {
                tmid = text.indexOf(char);
            }
            tmid += 1; // we want to cut _after_ the character
            // console.log("Char", char, tmid);
            if (splitPos === false || Math.abs(tmid - mid) < Math.abs(splitPos - mid)) {
                // console.log("least!");
                splitPos = tmid;
                splitPosChar = char;
            }
        }
        // console.log("pos",splitPos)

    } catch (err) {
        _didIteratorError6 = true;
        _iteratorError6 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion6 && _iterator6.return) {
                _iterator6.return();
            }
        } finally {
            if (_didIteratorError6) {
                throw _iteratorError6;
            }
        }
    }

    if (splitPos === false) {
        return false;
    }

    var text1 = text.substr(0, splitPos).trim();
    var text2 = text.substr(splitPos).trim();

    if (splitPosChar == '\xAD') {
        text1 += "-";
    }

    // find most equal split
    return [text1, text2];
};

function getTitle(obj) {
    if (obj.parent) {
        return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ")
    }
    return obj['@id'].split('#', 1)[0].replace(/_/g, " ")
}
function getCategories(obj) {
    if (!obj._INST) {
        return [];
    }
    return obj['_INST'].map(classId => classId.split('#', 1)[0]);
}
function getClasses(obj) {
    if (!obj._INST)
        return 'node';
    const classes = getCategories(obj);
    return 'node ' + classes.join(' ');
}
function getUrl(obj) {
    return CONFIG.baseUrl + obj['@id'].split('#', 1)[0];
}


// see also: http://bl.ocks.org/dwtkns/4973620
let width = window.innerWidth;
let height = window.innerHeight;

const svg = d3.select("svg")


// SET UP MAP:
const projection = d3.geoHill()
    .rotate([-12, 0, 0])
    .translate([width / 2, height * 1.5])
    .scale(height * 1.5);

const proj = d3.geoPath().projection(projection);
const graticule = d3.geoGraticule10();
const euCenter = projection(CONFIG.eu.center);

const container = svg.append("g").attr("id", "container");
// container.append("circle").attr("cx", euCenter[0]).attr("cy", euCenter[1]).attr("r", 500).attr("fill","red")

const g_countries = container.append("g").attr("id", "countries");
const g_borders = container.append("g").attr("id", "borders");
const g_graticule = container.append("g")
    .append('path')
    .attr("class", "graticule")
    .attr("fill", "none")
    .attr('d', proj(graticule))
    .attr("stroke-width", "!px")
    .attr("stroke", (n) => {
        return "lightgray";
    });
;

function sizeWindow() {
    width = window.innerWidth;
    height = window.innerHeight;

    svg
        .attr("viewBox", [0, 0, width, height])
        .attr("width", width)
        .attr("height", height);

    // 
    // 
    // update();
}
sizeWindow()
window.addEventListener('resize', sizeWindow);

svg.call(d3.zoom().scaleExtent([0.3, 8]).on("start", function () {
    svg.node().classList.add("dragging");
}).on("end", function () {
    svg.node().classList.remove("dragging");
}).on("zoom", function ({ transform }) {
    container.attr("transform", transform);
}));



var node = container.append("g")
    .attr('class', 'nodes')
    .selectAll(".node");
var link = container.append("g")
    .attr('class', 'links')
    .selectAll(".link");
// let linkLines = link.selectAll('line');


// REQUEST ATLAS & GRAPH
const req_data = new Request(CONFIG.dataUrl, { method: 'GET' });
const req_world = new Request('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json', { method: 'GET' });
Promise.all([fetch(req_data), fetch(req_world)])
    .then(([res_data, res_world]) => {
        return Promise.all([res_data.json(), res_world.json()]);
    })
    .then(([data, world]) => {
        buildGraph(data, world);
    }).catch(error => {
        console.error(error);
    });
;

let linkCounts = [];
const simulation = d3.forceSimulation()
    .force("link", d3.forceLink()
        .id(d => d['@id'])
        .iterations(2) // increase to make more rigid
        .distance((l) => {
            // if (getCategories(l.source).indexOf('City') || getCategories(l.target).indexOf('City')) {
            //     // if(l.source.lat || l.target.lat) {
            //     return 2;
            // }
            return 10;
        })
        .strength((l) => {
            if (linkCounts.length < 1) {
                // replicate from d3-force/src/link.js so we have access to this in our own strength function
                linkCounts = new Array(store.nodes.length)
                for (let i = 0; i < store.links.length; ++i) {
                    let link = store.links[i];
                    linkCounts[link.source.index] = (linkCounts[link.source.index] || 0) + 1;
                    linkCounts[link.target.index] = (linkCounts[link.target.index] || 0) + 1;
                }
            }

            if (store.nodesBorderingEu.indexOf(l.source) !== -1 || store.nodesBorderingEu.indexOf(l.target) !== -1) {
                // console.log('outside', l.target)
                return 0.0001;
            }
            // original:
            return 1 / Math.min(linkCounts[l.source.index], linkCounts[l.target.index]);
        })
    )
    // .force("charge", d3.forceManyBody()
    //     .strength(-10)
    // )
    // .force("center", d3.forceCenter(width / 2, height / 2))
    .force("collision", d3.forceCollide(function (d) {
        return getSizeForNode(d) * 1.5; // avoid overlapping nodes
    }))
    .force("outsideEu", d3.forceRadial(height/2.7, euCenter[0], euCenter[1])
        .strength(function (node, idx) {
            // return 1;
            if (store.nodesBorderingEu.indexOf(node) !== -1) {
                // console.log(node, store.nodesBorderingEu.indexOf(node) !== -1);
                return 1;
            }
            return 0;
        })
    );

function buildGraph(data, world) {
    // land = topojson.feature(world, world.objects.land)
    const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
    const countries = topojson.feature(world, world.objects.countries).features;


    const nodes = data.nodes.filter(n => n._INST || n.parent).map(d => Object.create(d));
    console.log('all nodes', nodes);
    const nodeMap = Object.fromEntries(nodes.map(d => [d['@id'], d]));
    const links = data.links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d));
    console.log(nodeMap, links);

    graph = {
        "nodes": [],
        "links": [],
    }
    store = {
        "nodes": [...nodes],
        "links": [...links],
        "nodesBorderingEu": links.filter(l => l.name == 'City' && (nodeMap[l.target].lon < CONFIG.eu.lonMin || nodeMap[l.target].lon > CONFIG.eu.lonMax)).map(l => nodeMap[l.source]),
    }

    filter();

    // the .source and .target attributes are still ID's. Only after initialisation of the force are they replaced with their representative objects

    const nodesEastOfEu = links.filter(l => l.name == 'City' && (nodeMap[l.target].lon < CONFIG.eu.lonMin)).map(l => nodeMap[l.source]);


    var c = g_countries.selectAll("path")
        .data(countries)
        .enter()
        .append("path")
        .attr("class", "countries")
        .attr("d", proj)
        .attr("fill", (n) => {
            if (CONFIG.countries.indexOf(n.properties.name) !== -1) {
                return '';
            }
            return "rgba(200,200,200,.7)";
        });

    g_borders
        .append("path")
        .attr("class", "borders")
        .attr("d", proj(borders))
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", (n) => {
            return "white";
        });

    nodes.forEach(function (d) {
        d.x = euCenter[0];
        d.y = euCenter[1];

        if (store.nodesBorderingEu.indexOf(d) !== -1) {
            if (nodesEastOfEu.indexOf(d) !== -1) {
                d.x = 466.5836692678423;
                d.y = 466.3493609705728;
            } else {
                d.x = 1406.608195836305;
                d.y = 807.9332721328062;
            }

        }

        if (d.lon && d.lat) {
            // console.log("fix node", d);
            var p = projection([d.lon, d.lat]);
            d.x = p[0];
            d.y = p[1];
            d.fx = p[0];
            d.fy = p[1];
        }
    })

    update();


    return svg.node();
}

function update() {


    // see also: https://www.createwithdata.com/enter-exit-with-d3-join/
    node = node.data(graph.nodes, d => d.id)
        .join(function (enter) {
            let group = enter.append("g").attr("class", getClasses);
            group.call(drag(simulation));
            group.on("click", (evt, n) => selectNode(evt, n, node));
            group.append('circle').attr("r", getSizeForNode);
            var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "5");
            nodeTitle
                .each(function (node, nodes) {
                    var textLength = void 0;
                    const self = d3.select(this);
                    const titleText = getTitle(node);
                    var titleTexts = false;
                    if (titleText.length > 20) {
                        titleTexts = splitText(titleText);
                    }
                    if (titleTexts !== false) {
                        const tspan1 = self.append("tspan").text(titleTexts[0]).attr("y", "-10").attr("x", "0");
                        const tspan = self.append("tspan").text(titleTexts[1]).attr("y", "10").attr("x", "0");
                        const textLength1 = tspan.node().getComputedTextLength();
                        const textLength2 = tspan.node().getComputedTextLength();
                        textLength = Math.max(textLength1, textLength2);
                    } else {
                        self.text(titleText);
                        textLength = self.node().getComputedTextLength();
                    }
                    // scale according to text length:
                    if (textLength > getSizeForNode(node) * 2) {
                        self.attr('transform', 'scale(' + getSizeForNode(node) * 2 / textLength / 1.05 + ')');
                    }
                });
            return group;
        });

    // let linkText;
    // let linkLine;
    link = link
        .data(graph.links)
        .join(
            enter => {
                console.log(enter);
                let group = enter.append("g").attr("class", "link");
                group.append("line").attr("marker-end", "url(#arrowHead)").attr('id', (d,i) =>  'linkid_' + i);
                group.filter((l) => l.name != "City").append("text").attr("class", "labelText").text(function (l) {
                        return l.name;
                    });
                // group.append("text")
                //         .attr("class", "labelText")
                //         .attr("dx", 20)
                //         .attr("dy", 0)
                //         .style("fill", "red")
                //     .append("textPath")
                //         .attr("xlink:href", function (d, i) { return "#linkid_" + i; })
                //         .attr("startOffset","50%")
                //         .text((d,i) => d.name );
                return group;
            }
        )
        ;
    // let linkEnter = link.enter()
    // let linkLine = link.selectAll('line');
    // let newLinks = link.enter().append("g").attr("class","link");
    // newLinks.append("line").attr("marker-end", "url(#arrowHead)");
    // newLinks.filter((l) => l.name != "City").append("text").text(function (l) {
    //     return l.name;
    // });

    // link.exit().remove();

    // let linkLine = link.selectAll('line');
    // let linkText = link.selectAll('text');
    //     // }) function(update){ return update }, function(exit) {
    //     //     exit.remove();
    //     // })

    //     ;

    // console.log(link, linkText, linkLine)

    simulation.nodes(graph.nodes);
    simulation.on("tick", () => {

        // console.log('t', link._groups[0].length);

        link.each(function (d) {
            let sourceX, targetX, midX, dx, dy, angle;

            // This mess makes the arrows exactly perfect.
            // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
            if (d.source.x < d.target.x) {
                sourceX = d.source.x;
                targetX = d.target.x;
            } else if (d.target.x < d.source.x) {
                targetX = d.target.x;
                sourceX = d.source.x;
            } else if (d.target.isCircle) {
                targetX = sourceX = d.target.x;
            } else if (d.source.isCircle) {
                targetX = sourceX = d.source.x;
            } else {
                midX = (d.source.x + d.target.x) / 2;
                if (midX > d.target.x) {
                    midX = d.target.x;
                } else if (midX > d.source.x) {
                    midX = d.source.x;
                } else if (midX < d.target.x) {
                    midX = d.target.x;
                } else if (midX < d.source.x) {
                    midX = d.source.x;
                }
                targetX = sourceX = midX;
            }

            dx = targetX - sourceX;
            dy = d.target.y - d.source.y;
            angle = Math.atan2(dx, dy);

            /* DISABLED
            srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
            tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
            */
            var srcSize = getSizeForNode(d.source);
            var tgtSize = getSizeForNode(d.target);

            // Compute the line endpoint such that the arrow
            // is touching the edge of the node rectangle perfectly.
            d.sourceX = sourceX + Math.sin(angle) * srcSize;
            d.targetX = targetX - Math.sin(angle) * tgtSize;
            d.sourceY = d.source.y + Math.cos(angle) * srcSize;
            d.targetY = d.target.y - Math.cos(angle) * tgtSize;

            let rel = d3.select(this);
            rel.select('line')
                .attr("x1", d.sourceX)
                .attr("y1", d.sourceY)
                .attr("x2", d.targetX)
                .attr("y2", d.targetY)

            rel.select('text')
                .attr("transform", function (d) {
                    const dx = (d.target.x - d.source.x) / 2;
                    const dy = (d.target.y - d.source.y) / 2;
                    const x = d.source.x + dx;
                    const y = d.source.y + dy;
                    const deg = Math.atan(dy / dx) * 180 / Math.PI;
                    // if dx/dy == 0/0 -> deg == NaN
                    if (isNaN(deg)) {
                        return "";
                    }
                    // return "";
                    return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
                });


        })/*.attr("x1", function (d) {
            return d.sourceX;
        }).attr("y1", function (d) {
            return d.sourceY;
        }).attr("x2", function (d) {
            return d.targetX;
        }).attr("y2", function (d) {
            return d.targetY;
        });*/
        // linkText

        node
            .attr("transform", d => `translate(${d.x}, ${d.y})`);
    });

    simulation.force("link")
        .links(graph.links);


    // simulate the first bit without drawing, so we don't have the 'jumping' graph in the beginning
    if (CONFIG.preSimulate) {
        for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
            simulation.tick();
        }
    }

}

//	filter function
function filter() {
    //	add and remove nodes from data based on type filters
    store.nodes.forEach(function (n) {
        const cats = getCategories(n);
        if (cats.every(c => filteredCategories.includes(c))) {
            // hide
            graph.nodes.forEach(function (d, i) {
                if (n['@id'] === d['@id']) {
                    graph.nodes.splice(i, 1);
                }
            });
        } else {
            // add back
            if (!graph.nodes.includes(n)) {
                graph.nodes.push(n);
            }
        }

    });

    //	add and remove links from data based on availability of nodes
    let checkOn;
    if(typeof store.links[0].source !== 'object') {
        checkOn = graph.nodes.map(n => n['@id'])
    } else {
        checkOn = graph.nodes
    }
    
    store.links.forEach(function (l) {

        if (!checkOn.includes(l.source) || !checkOn.includes(l.target)) {
            // hide
            console.log('hide!')
            graph.links.forEach(function (d, i) {
                if (l === d) {
                    graph.links.splice(i, 1);
                }
            });

        } else if (!graph.links.includes(l)) {
            graph.links[graph.links.length] = l;
            // console.log('add', l, graph.links)
        }

    });
    // console.log(graph.links)

}

const drag = simulation => {

    let ignoreDrag = false;
    function dragstarted(event) {
        if (event.subject.fx) ignoreDrag = true;
        if (!event.active) simulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
    }

    function dragged(event) {
        if (ignoreDrag) return;
        event.subject.fx = event.x;
        event.subject.fy = event.y;
    }

    function dragended(event) {
        if (ignoreDrag) {
            ignoreDrag = false;
            return;
        }
        if (!event.active) simulation.alphaTarget(0);
        event.subject.fx = null;
        event.subject.fy = null;
    }

    return d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);
};

function selectNode(evt, node, d3Node) {
    console.log(evt, node, d3Node);
    document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
    d3Node._groups[0][node.index].classList.add('selected');

    infoEl = document.getElementById('nodeInfo');
    infoEl.classList.remove('hidden');

    const url = getUrl(node);
    const hrefEl = infoEl.querySelector('.nodeHref');
    hrefEl.textContent = getTitle(node);
    hrefEl.setAttribute('href', url);
    infoEl.querySelector('.nodeContents').src = url;

}

const closeEl = document.getElementById('closeInfo');
if(closeEl) {

    document.getElementById('closeInfo').addEventListener('click', (evt) => {
        document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
        document.getElementById('nodeInfo').classList.add('hidden');
    })
    
}