Old school D3 from simpler times

All examples By author By category About

jsclose

Full window Github gist

Kanye Wests Network

A visualization of the Kanye West's related artist network. Built using networkx python package and Spotify Api.

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"> </script>
    
</head>

<body>
<h1> Related Artist Network </h1>

<script type="text/javascript">
    /* Set the diagrams Height & Width */
    var h = 800,
        w = 1000;
    var color = d3.scale.category20();
    var svg = d3.select("body")
        .append("svg")
        .attr("height", h)
        .attr("width", w);
    d3.json("kanye.json", function(json) {
        /* Draw the node labels first */
        var texts = svg.selectAll("text")
            .data(json.nodes)
            .enter()
                .append("text")
                .attr("fill", "black")
                .attr("font-family", "sans-serif")
                .attr("font-size", "10px")
                .text(function(d) {
                    return d.id;
                });
        /* Establish the dynamic force behavor of the nodes */
        var force = d3.layout.force()
            .nodes(json.nodes)
            .links(json.links)
            .size([w, h])
            .linkDistance([10])
            .charge([-750])
            .gravity(0.4)
            .start();
        /* Draw the edges/links between the nodes */
        var edges = svg.selectAll("line")
            .data(json.links)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1)
            .attr("marker-end", "url(#end)");
        /* Draw the nodes themselves */
        var nodes = svg.selectAll("circle")
            .data(json.nodes)
            .enter()
            .append("circle")
            .attr("r", function(d){
                return Math.sqrt(d.followers/10000)
            })
            .attr("opacity", 0.5)
            .style("fill", function(d, i) {
               return color(i)
            })
            .call(force.drag)
             .on('dblclick', connectedNodes); //Added code 
        /* Run the Force effect */
        force.on("tick", function() {
            edges.attr("x1", function(d) {
                    return d.source.x;
                })
                .attr("y1", function(d) {
                    return d.source.y;
                })
                .attr("x2", function(d) {
                    return d.target.x;
                })
                .attr("y2", function(d) {
                    return d.target.y;
                });
            nodes.attr("cx", function(d) {
                    return d.x;
                })
                .attr("cy", function(d) {
                    return d.y;
                })
            texts.attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        });

//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < json.nodes.length; i++) {
    linkedByIndex[i + "," + i] = 1;
};
json.links.forEach(function (d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
    if (toggle == 0) {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        nodes.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });
        edges.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });
        edges.style("stroke-width", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 3 : 0.8;
        });

//Reduce the op
        toggle = 1;
    } else {
        //Put them back to opacity=1
        nodes.style("opacity", .5);
        edges.style("opacity", 1);

toggle = 0;
    }
}

});

</script>
</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js