Sankey from CSV III

Create a Sankey diagram from a CSV file. I got most of this code from d3noob's block, but I added the code to convert the CSV data into the format required by d3-sankey.

In this version, the links are colored as a linear gradient, transitioning from the color of the source to that of the target. In version 1, the links were not colored. In version 2, the links were colored according to this source.

My verdict: A single color is the easiest to read.

forked from HarryStevens's block: Sankey from CSV III

forked from esperandeo's block: Sankey from CSV III

La percentuale è da intendersi in quante canzoni è presente (in percentuale) quel termine

forked from salvob41's block: Sankey from CSV III

forked from hailtothethief's block: Sankey from CSV III

forked from salvob41's block: Sankey from CSV III

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>

body {
        margin: 0;
        font-family: "Helvetica Neue", sans-serif;
      }

.node rect {
        cursor: move;
        fill-opacity: .9;
        shape-rendering: crispEdges;
      }
      .node text {
        pointer-events: none;
        text-shadow: 0px 0px 2px #fff;
        font-size: .8em;
      }

.link {
        fill: none;
        stroke: #000;
        stroke-opacity: .5;
      }
      .link:hover {
        stroke-opacity: 1;
      }

</style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="sankey.js"></script>

// format variables
      var formatNumber = d3.format(",.0f"),    // zero decimal places
          format = function(d) { return formatNumber(d) + "%"; },
          color = d3.scaleOrdinal(d3.schemeCategory20);

// append the svg object to the body of the page
      var svg = d3.select("body").append("svg")
      		.attr('class', 'graph')
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Set the sankey diagram properties
      var sankey = d3.sankey()
          .nodeWidth(10)
          .nodePadding(10)
          .size([width, height]);

var path = sankey.link();

// defs for the linear gradients
      var defs = svg.append("defs");
      
      // load the data
      d3.queue()
          .defer(d3.csv, "data.csv")
          .await(ready);
      
      function onchange() {
      selectValue = d3.select('select').property('value')
      name = selectValue+".csv";
       //svg.selectAll("*").remove();
        svg.select("defs").selectAll("*").remove();
        svg.selectAll("g").selectAll("*").remove();
        
      d3.queue()
          .defer(d3.csv, name)
          .await(ready);
    };

function ready(error, csv){

// create an array to push all sources and targets, before making them unique
        var arr = [];
        csv.forEach(function(d){

arr.push(d.source);
          arr.push(d.target);

});

// create nodes array
        var nodes = arr.filter(onlyUnique).map(function(d,i){
          return {
            node: i,
            name: d
          }
        });

// create links array
        var links = csv.map(function(csv_row){
          return {
            source: getNode("source"),
            target: getNode("target"),
            value: +csv_row.value
          }

function getNode(type){
            return nodes.filter(function(node_object){ return node_object.name == csv_row[type]; })[0].node;
          }

});

sankey
            .nodes(nodes)
            .links(links)
            .layout(32);

// add in the links
        var link = svg.append("g").selectAll(".link")
            .data(links)
          .enter().append("path")
            .attr("class", "link")
            .attr("d", path)
            .style("stroke", function(d, i){

// create the gradient
              var gradient_id = "gradient-" + i;
              var gradient = defs.append("linearGradient")
                  .attr("id", gradient_id);
              gradient.append("stop")
                  .attr("offset", "5%")
                  .attr("stop-color", color(d.source.name.replace(/ .*/, "")));
              gradient.append("stop")
                  .attr("offset", "95%")
                  .attr("stop-color", color(d.target.name.replace(/ .*/, "")));

// TODO: Figure out what the hell is happening with bob and jimmy
              return i == 0 ? color(d.source.name.replace(/ .*/, "")) : "url(#" + gradient_id + ")";
              // return "url(#" + gradient_id + ")";
            })
            .style("stroke-width", function(d) { return Math.max(1, d.dy); })
            .sort(function(a, b) { return b.dy - a.dy; });

// add the link titles
        link.append("title")
              .text(function(d) {
              return d.source.name + " → " + 
                      d.target.name + "\n" + format(d.value); });

// add in the nodes
        var node = svg.append("g").selectAll(".node")
            .data(nodes)
          .enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) { 
              return "translate(" + d.x + "," + d.y + ")"; 
            })
            .call(d3.drag()
              .subject(function(d) {
                return d;
              })
              .on("start", function() {
                this.parentNode.appendChild(this);
              })
              .on("drag", dragmove));

// add the rectangles for the nodes
        node.append("rect")
            .attr("height", function(d) { return d.dy < 0 ? .1 : d.dy; })
            .attr("width", sankey.nodeWidth())
            .style("fill", function(d) { 
              return d.color = color(d.name.replace(/ .*/, "")); 
            })
            .style("stroke", function(d) { 
              return d3.rgb(d.color).darker(2); 
            })
          .append("title")
            .text(function(d) { 
              return d.name + "\n" + format(d.value); 
            });

// add in the title for the nodes
        node.append("text")
            .attr("x", -6)
            .attr("y", function(d) { return d.dy / 2; })
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .attr("transform", null)
            .text(function(d) { return d.name; })
          .filter(function(d) { return d.x < width / 2; })
            .attr("x", 6 + sankey.nodeWidth())
            .attr("text-anchor", "start");

// the function for moving the nodes
        function dragmove(d) {
          d3.select(this)
            .attr("transform", 
                  "translate(" 
                     + d.x + "," 
                     + (d.y = Math.max(
                        0, Math.min(height - d.dy, d3.event.y))
                       ) + ")");
          sankey.relayout();
          link.attr("d", path);
        }

}

// unique values of an array
      function onlyUnique(value, index, self) { 
          return self.indexOf(value) === index;
      }

</script>
  </body>
</html>

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