Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changing link color to match with source node color. #55

Open
tjlca opened this issue Oct 4, 2021 · 3 comments
Open

Changing link color to match with source node color. #55

tjlca opened this issue Oct 4, 2021 · 3 comments

Comments

@tjlca
Copy link

tjlca commented Oct 4, 2021 

    var link = linkG.data(sankeyLinks)
      .enter()
      .append("path")
      .attr("d", curveSankeyForceLink)
      .style("stroke-width", function (d) { return Math.max(1, d.width); })
      .style("stroke", function (d) {return colour(d.depth); })
      .style("opacity", 0.7);

This code did not work. Changed red:black to colour(d.depth)
@tomshanley
Copy link
Owner

Hard to tell from that snippet above. Do you have an example online I can view? Or, please can you check that
a) sankeyLinks have a 'depth' property that you are expecting
b) 'colour' is an appropriate scale, and has been set up properly, to use whatever values d.depth provides

@tjlca
Copy link
Author

tjlca commented Oct 4, 2021 •
edited
Loading

Copied from index.html for Sankey with embedded arrows. Line of interest - 168. I think that SankeyLinks do not have a depth property and that is why its not working. Can you kindly provide me a work around for that? I unfortunately do not have any online block which I can share for you. I am just creating these plots locally. I downloaded the sankey-circular.js file, the arrows.js, data file and the index.html and preparing the plots in my browser.

Modified index html file - index.txt

<!DOCTYPE html>
<html>

<head>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-sankey-circular.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="data.js"></script>

  <link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">

  <title>Sankey with circular links</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background: #FFFFFF;
    }

    rect {
      shape-rendering: crispEdges;
    }

    text {
      /*text-shadow: 0 1px 0 #fff;*/
      font-size: 12px;
      font-family: 'Roboto', sans-serif;
    }

    .link {
      fill: none;
    }
  </style>
</head>

<body>

  <h1>Sankey with circular links</h1>
  <p>Colours and arrows influenced by a <a href="https://www.loc.gov/resource/g4042m.ct002283/">1960 chart showing the inland freight on the Mississippi River made by the United States Army Corps of Engineers</a>.</p>

  <div id="chart"></div>

  <script>
    var margin = { top: 200, right: 100, bottom: 120, left: 100 };
    var width = 1200;
    var height = 400;

    let data = data0;

    const nodePadding = 40;

    const circularLinkGap = 2;

    var sankey = d3.sankey()
      .nodeWidth(20)
      .nodePadding(nodePadding)
      .nodePaddingRatio(0.7)
      .scale(0.5)
      .size([width, height])
      .nodeId(function (d) {
        return d.name;
      })
      .nodeAlign(d3.sankeyLeft)
      .iterations(32);

    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    var linkG = g.append("g")
      .attr("class", "links")
      .attr("fill", "none")
      .attr("stroke-opacity", 0.2)
      .selectAll("path");

    var nodeG = g.append("g")
      .attr("class", "nodes")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .selectAll("g");

    //run the Sankey + circular over the data
    let sankeyData = sankey(data);
    let sankeyNodes = sankeyData.nodes;
    let sankeyLinks = sankeyData.links;

    let depthExtent = d3.extent(sankeyNodes, function (d) { return d.depth; });
    let depthExtent2 = d3.extent(sankeyLinks, function (d) { return d.depth; });
    

    var colour = d3.scaleSequential(d3.interpolateCool)
      .domain(depthExtent);

    var colour2 = d3.scaleSequential(d3.interpolateCool)
      .domain(depthExtent2);


    //Adjust link Y coordinates based on target/source Y positions


    var node = nodeG.data(sankeyNodes)
      .enter()
      .append("g");

    node.append("rect")
      .attr("x", function (d) { return d.x0; })
      .attr("y", function (d) { return d.y0; })
      .attr("height", function (d) { return d.y1 - d.y0; })
      .attr("width", function (d) { return d.x1 - d.x0; })
      .style("fill", function (d) { return "green"; })
      //.style("fill", "black")
      .style("opacity", 0.5)
      .style("stroke", "black")
      .on("mouseover", function (d) {

        let thisName = d.name;

        node.selectAll("rect")
          .style("opacity", function (d) {
            return highlightNodes(d, thisName)
          })

        d3.selectAll(".sankey-link")
          .style("opacity", function (l) {
            return l.source.name == thisName || l.target.name == thisName ? 1 : 0.3;
          })

        node.selectAll("text")
          .style("opacity", function (d) {
            return highlightNodes(d, thisName)
          })
      })
      .on("mouseout", function (d) {
        d3.selectAll("rect").style("opacity", 0.5);
        d3.selectAll(".sankey-link").style("opacity", 0.7);
        d3.selectAll("text").style("opacity", 1);
      })

    /*node.append("text")
      .attr("x", function (d) { return d.x0 - 6; })
      .attr("y", function (d) { return d.y0 + ((d.y1 - d.y0) / 2); })
      .attr("dy", "0.35em")
      .attr("text-anchor", "end")
      .text(function (d) { return d.name; })
      .filter(function (d) { return (d.x0 < width / 2) && (d.depth != 0); })
      .attr("x", function (d) { return d.x1 + 6; })
      .attr("text-anchor", "start")*/

    node.append("text")
      .attr("x", function (d) { return (d.x0 + d.x1) / 2; })
      .attr("y", function (d) { return d.y0 - 12; })
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function (d) { return d.name; });

    node.append("title")
      .text(function (d) { return d.name + "\n" + (d.value); });

    var link = linkG.data(sankeyLinks)
      .enter()
      .append("path")
      .attr("class", "sankey-link")
      .attr("d", sankeyPath)
      .style("stroke-width", function (d) { return Math.max(1, d.width); })
      .style("stroke", function (d) { return d.circular ? "red" : colour(d.depth);
      })
      //.style("stroke", function (d) { return d.circular ? "red" : "blue";
      //})
      .style("opacity", 0.7);

    link.append("title")
      .text(function (d) {
        return d.source.name + " → " + d.target.name + "\n Index: " + (d.index);
      });

@tjlca
Copy link
Author

tjlca commented Oct 4, 2021

image
Current status of the plot. According to the script, I am trying to keep the circular flows red but the linear flows as the node color. That did not work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tomshanley @tjlca