console.clear()

var SRC_FILE = "split-votes-all.json";

// set the dimensions and margins of the graph
var margin = {top: 5, right: 5, bottom: 5, left: 5},
    width = 350 - margin.left - margin.right,
    height = 760 - margin.top - margin.bottom;

// format variables
var formatNumber = d3.format(",.0f"),    // zero decimal places
    format = d3.format(",.0f")    // zero decimal places

var color = d3.scaleOrdinal(d3.schemeCategory10);

// append the svg object to the body of the page
var svg = d3.select("#chart").append("svg")
    .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(36)
    .nodePadding(12)
    .size([width, height]);

var path = sankey.link();


d3.json(SRC_FILE, function(error, graph) {
  //console.log(graph)
    sankey
        .nodes(graph.nodes)
        .links(graph.links)
        .layout(0);// no iterations to arrange

  // add in the links
    var link = svg.append("g").selectAll(".link")
        .data(graph.links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("stroke-width", (d) => Math.max(1, d.dy))
        .style("fill", "none")
        .style("stroke-opacity", (d) => 0.25)
        .style("stroke", (d) => color(d.target.name))
        .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(graph.nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
        .attr("transform", function(d) {
  		  return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.drag()
          .subject((d) => d)
          .on("start", () => this.parentNode.appendChild(this))
          .on("drag", dragmove));

  // add the rectangles for the nodes
    node.append("rect")
        .attr("height", (d) => d.dy )
        .attr("width", sankey.nodeWidth())
        .style("fill", (d) => color(d.group))
        .style("stroke", (d) => d3.rgb(color(d.name)).darker(1))
        .append("title")
        .text((d) => d.name + " " + format(d.value) );

  // add in the title for the nodes
    node.append("text")
        .attr("x", -6)
        .attr("y", (d) => d.dy / 2)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text((d) => d.name + " " + format(Math.round(d.value / 10) * 10) )
      .filter((d) => 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);
    }
  });