Color Specific Links on D3 Sankey Chart

Question

we are needing help coloring the specific links of this sankey chart. We want the links that connect with "Raleigh" to be green, all the others staying grey.

Here is a picture of what it looks like, followed by a picture of what where the green links will go:

Sankey Now Sankey Future

We are new to d3 and just can't figure it out, any help would be great!!

var svg = d3.select("svg").attr("style", "outline: thin solid grey;"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TWh"; },
    color = d3.scaleOrdinal(d3.schemeCategory10);

var school = {"nodes": [




{"name":"Happiness Index"}, // 0
{"name":"Business Cost Index"}, // 1
{"name":"Home Price to Income"}, // 2
{"name":"Population Growth"}, // 3  
{"name":"3 Year GDP Growth"}, // 4
{"name":"Percent with Degree"}, // 5


{"name":"Austin"}, // 6
{"name":"Nashville"}, // 7
{"name":"Atlanta"}, // 8
{"name":"Raleigh"}, // 9
{"name":"Washington DC"}, // 10

],
"links":[


// From Happiness
    {"source":0,"target":6,"value":97},
    {"source":0,"target":9,"value":100},
    {"source":0,"target":10,"value":96},


// From Business Cost
    {"source":1,"target":9,"value":87},
    {"source":1,"target":8,"value":88},
    {"source":1,"target":7,"value":99},

// From PTI
    {"source":2,"target":8,"value":86},



// From Pop Growth
    {"source":3,"target":9,"value":87},
    {"source":3,"target":6,"value":94},

// From 3yrgdp
    {"source":4,"target":9,"value":100},
    {"source":4,"target":6,"value":88},
    {"source":4,"target":7,"value":96},

// From percent undergrad
    {"source":5,"target":9,"value":85},
    {"source":5,"target":10,"value":100},
]};

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [width - 1, height - 6]]);

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

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

sankey(school);

link = link
    .data(school.links)
    .enter().append("path")
      .attr("d", d3.sankeyLinkHorizontal())
      .attr("stroke-width", function(d) { return Math.max(1, d.width); })


// link hover values
link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "
" + format(d.value); });

node = node
    .data(school.nodes)
    .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; })
      .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); })
      .attr("stroke", "#000");

node.append("text")
      .attr("x", function(d) { return d.x0 - 6; })
      .attr("y", function(d) { return (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; })
      .attr("x", function(d) { return d.x1 + 6; })
      .attr("text-anchor", "start");

svg.append("text")
        .attr("x", 10)
        .attr("y", 30)
        .attr("class", "graphTitle")
        .text(" ");

svg.append("text")
        .attr("x", width - 80)
        .attr("y", height - 10)

Mark · Accepted Answer

Modify the links to:

link = link
    .data(school.links)
    .enter().append("path")
    .attr("d", d3.sankeyLinkHorizontal())
    .attr("stroke-width", function(d) { return Math.max(1, d.width); })
    .style("stroke", function(d){
      return d.target.name == "Raleigh" ? "green" : "gray";
    });

Running code:

Color Specific Links on D3 Sankey Chart

Answers (1)

Related Questions