Visualizing changes in a network using D3

edges.csv

index.html

<input type="range" min="0" max="149" value="0" id="frame_picker">
<div id="network"></div>

<script src="https://code.jquery.com/jquery-3.2.1.js" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="index.js"></script>

index.js

const width = 960
const height = 500
const frame_length = 1500
const stability_for_changed_nodes = .1
const stability_for_unchanged_nodes = 2
const edgeWidthScale = d3.scalePow().range([1, 4])
const load_network = (callback) => d3.queue()
    .defer(d3.csv, "edges.csv")
    .defer(d3.csv, "nodes.csv")
    .await(callback)
const find_node = (d) => d3.selectAll("#nodes g").filter("[data-last-id=\"" + d.id + "\"]")
const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)
const parse_translate = (text) => text.replace("translate(", "").replace(")", "").split(",").map((i) => i.trim() * 1)


const create_svg_groups = (svg) => {
    svg.append("g").attr("id", "edges")
    svg.append("g").attr("id", "nodes")
}


const create_svg = () =>
    d3.select("#network")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(create_svg_groups)


const add_new_nodes = (svgNodes) => svgNodes
    .enter()
    .append("g")
        .call(set_node_coordinates)
        .call(label_nodes)
        .append("circle")
            .call(set_node_color)
            .attr("r", 10)


const label_nodes = (svgNodes) => {
    svgNodes.selectAll("text").remove()
    svgNodes.append("text")
        .style("font-size", "10px")
        .attr("dx", 12)
        .text(function(d) { return d.id })
}


const set_node_data_attributes = (svgNodes) => svgNodes
    .attr("data-last-group", (d) => d.group)
    .attr("data-last-id", (d) => d.id)
    .attr("data-x", (d) => d.x)
    .attr("data-y", (d) => d.y)


const set_node_color = (svgNodes) => svgNodes
    .attr("fill", (d) => ({
        "Blue team": "blue",
        "Red team": "red",
        "Yellow team": "yellow",
    }[d.group]))


const update_node_coordinates = (svgNodes) => svgNodes
    .transition()
    .duration(frame_length)
    .call(set_node_coordinates)


const set_node_coordinates = (svgNodes) => svgNodes
    .attr("transform", function(d, i, n) {
        const node = d3.select(n[i])
        const x1 = node.attr("data-x")
        const y1 = node.attr("data-y")
        if (distance(x1, y1, d.x, d.y) <= 50) {
            d.x = x1
            d.y = y1
        }
        return "translate(" + d.x + "," + d.y + ")"
    })


const remove_superfluous_edges = (svgEdges) => svgEdges
    .exit().remove()


const add_new_edges = (svgEdges) => svgEdges
    .enter()
    .append("line")
        .attr("stroke-width", (d) => edgeWidthScale(d.weight))
        .attr("stroke", "black")
        .attr("opacity", .5)


const make_edges_follow_their_nodes = (svgEdges) => svgEdges
    .transition()
    .duration(frame_length)
    .attrTween("x1", function(d) { return ((t) => {return parse_translate(find_node(d.source).attr("transform"))[0]}) })
    .attrTween("y1", function(d) { return ((t) => {return parse_translate(find_node(d.source).attr("transform"))[1]})  })
    .attrTween("x2", function(d) { return ((t) => {return parse_translate(find_node(d.target).attr("transform"))[0]}) })
    .attrTween("y2", function(d) { return ((t) => {return parse_translate(find_node(d.target).attr("transform"))[1]})  })


const update_nodes = (nodes) => d3.select("#nodes")
    .selectAll("g")
    .data(nodes)
    .call(add_new_nodes)
    .call(update_node_coordinates)
    .call(set_node_data_attributes)
    .call(label_nodes)
    .select("circle")
        .call(set_node_color)


const update_edges = (edges) => d3.select("#edges")
    .selectAll("line")
    .data(edges, (d) => {return d.source.id + "-" + d.target.id})
    .call(remove_superfluous_edges)
    .call(add_new_edges)
    .call(make_edges_follow_their_nodes)


const create_frame_loader = () => {
    const simulation = create_simulation()
    const run_simulation = (nodes, edges) => {
        simulation.nodes(nodes)
        simulation.force("link").links(edges)
        simulation.alpha(1).restart()
        // See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick
        for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
            simulation.tick();
        }
    }

    const load_frame = (frame) => {
        run_simulation(frame.nodes, frame.edges)
        update_nodes(frame.nodes)
        update_edges(frame.edges)
    }

    return load_frame
}


const get_frame_picker = () =>
    d3.select("#frame_picker")


const set_up_event_handling = (load_frame, get_frame) =>
    get_frame_picker().on("change", (_, __, picker) => {
        load_frame(get_frame(picker[0].value))
    })


const jump_to_frame = (frame) =>
    get_frame_picker().property("value", frame)


const load_current_frame = (load_frame, get_frame) =>
    load_frame(get_frame(get_frame_picker().property("value")))


const jump_to_next_frame = () => jump_to_frame(
    (get_frame_picker().property("value") * 1) + 1)


const set_up_animation = (callback) =>
    d3.interval(() => {
        jump_to_next_frame()
        callback()
    }, frame_length)


const load_first_frame = (load_frame, frame_getter) => {
    jump_to_frame(0)
    load_current_frame(load_frame, frame_getter)
}


const set_up_interactivity = (load_frame, frame_getter) => {
    set_up_event_handling(load_frame, frame_getter)
    load_first_frame(load_frame, frame_getter)
    set_up_animation(() => load_current_frame(load_frame, frame_getter))
}


const initalize_component = (frame_getter) => {
    create_svg()
    set_up_interactivity(create_frame_loader(), frame_getter)
}


const create_frame_getter = (edges, nodes) => ((frame) => ({
    "edges": edges.filter((edge) => edge.frame == frame),
    "nodes": nodes.filter((node) => node.frame == frame),
}))


const create_visualization = () => {
    load_network((error, edges, nodes) => {
        initalize_component(create_frame_getter(edges, nodes))
    })
}


const get_node_attr = (d, attr, fallback) => {
    const item = find_node(d)
    if (item.nodes().length == 1) {
        return item.attr(attr)
    } else {
        return fallback
    }
}


const is_changed = (d) =>
    get_node_attr(d, "data-last-group", "") !== d.group


const get_stability = (d) =>
    is_changed(d) ? stability_for_changed_nodes : stability_for_unchanged_nodes


const create_simulation = () => d3.forceSimulation()
    .force("link", d3.forceLink()
        .id(function(d) {return d.id; })
        .distance((d) => (d.source.group === d.target.group ? 40 : 250)))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("x", d3.forceX()
        .x((d) => get_node_attr(d, "data-x", width / 2))
        .strength(get_stability))
    .force("y", d3.forceY()
        .y((d) => get_node_attr(d, "data-y", height / 2))
        .strength(get_stability))
    .force("center", d3.forceCenter(width / 2, height / 2))


$(document).ready(() => {
    create_visualization()
})

nodes.csv