D3.js Chord Diagram - Make chords touch the pulled apart arc











up vote
2
down vote

favorite












D3 and Javascript newbie here. I am making a chord diagram with one arc that is pulled apart from the center. I have managed to move the arc into my desire position but I wonder how do I make the group of chord touching the arc again and not messing up the position of other groups of chords?



Here is an image to explain my desired result.





I am currently using an if statement to select the angle where arc C is staying and translate its position.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


I am able to translate the position of the chords by using the translate as well. 



.attr("transform", "translate(" + 50 + "," + 50 + ")")

.attr("d", path);




However, when I applied the same if statement to it the translate stop working. It seems like the if statement does not met the condition. I wonder what will be the right statement to put into the if statement to help me select the section of chords that I am trying to move.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


Thanks!






javascript d3.js chord-diagram







share|improve this question
























  • with exact the same method as you pulled the arc apart
    – rioV8
    Nov 11 at 9:54















up vote
2
down vote

favorite












D3 and Javascript newbie here. I am making a chord diagram with one arc that is pulled apart from the center. I have managed to move the arc into my desire position but I wonder how do I make the group of chord touching the arc again and not messing up the position of other groups of chords?



Here is an image to explain my desired result.





I am currently using an if statement to select the angle where arc C is staying and translate its position.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


I am able to translate the position of the chords by using the translate as well. 



.attr("transform", "translate(" + 50 + "," + 50 + ")")

.attr("d", path);




However, when I applied the same if statement to it the translate stop working. It seems like the if statement does not met the condition. I wonder what will be the right statement to put into the if statement to help me select the section of chords that I am trying to move.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


Thanks!






javascript d3.js chord-diagram







share|improve this question
























  • with exact the same method as you pulled the arc apart
    – rioV8
    Nov 11 at 9:54













up vote
2
down vote

favorite









up vote
2
down vote

favorite











D3 and Javascript newbie here. I am making a chord diagram with one arc that is pulled apart from the center. I have managed to move the arc into my desire position but I wonder how do I make the group of chord touching the arc again and not messing up the position of other groups of chords?



Here is an image to explain my desired result.





I am currently using an if statement to select the angle where arc C is staying and translate its position.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


I am able to translate the position of the chords by using the translate as well. 



.attr("transform", "translate(" + 50 + "," + 50 + ")")

.attr("d", path);




However, when I applied the same if statement to it the translate stop working. It seems like the if statement does not met the condition. I wonder what will be the right statement to put into the if statement to help me select the section of chords that I am trying to move.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


Thanks!






javascript d3.js chord-diagram







share|improve this question















D3 and Javascript newbie here. I am making a chord diagram with one arc that is pulled apart from the center. I have managed to move the arc into my desire position but I wonder how do I make the group of chord touching the arc again and not messing up the position of other groups of chords?



Here is an image to explain my desired result.





I am currently using an if statement to select the angle where arc C is staying and translate its position.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


I am able to translate the position of the chords by using the translate as well. 



.attr("transform", "translate(" + 50 + "," + 50 + ")")

.attr("d", path);




However, when I applied the same if statement to it the translate stop working. It seems like the if statement does not met the condition. I wonder what will be the right statement to put into the if statement to help me select the section of chords that I am trying to move.



.attr("transform", function(d) {

            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {

                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}

        ;})


Thanks!






javascript d3.js chord-diagram




javascript d3.js chord-diagram






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 11:01

























asked Nov 11 at 8:36









Popo.J

112




112












  • with exact the same method as you pulled the arc apart
    – rioV8
    Nov 11 at 9:54


















  • with exact the same method as you pulled the arc apart
    – rioV8
    Nov 11 at 9:54
















with exact the same method as you pulled the arc apart
– rioV8
Nov 11 at 9:54




with exact the same method as you pulled the arc apart
– rioV8
Nov 11 at 9:54












1 Answer
1






active

oldest

votes

















up vote
1
down vote













According to the documentation, you can pass the radius as a parameter when creating the chord/ribbon.



Documentation for ribbon



// from documentation

   var ribbon = d3.ribbon();

     ribbon({

            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},

            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}

     }); 







<!DOCTYPE html>

<meta charset="utf-8">

<style>



body {

  font: 20px sans-serif;

}



.group-tick line {

  stroke: #000;

}



.ribbons {

  fill-opacity: 0.67;

}



</style>

<svg width="800" height="800">

<defs>

      <linearGradient id="Gradient1">

        <stop class="stop1" offset="0%"/>

        <stop class="stop2" offset="50%"/>

        <stop class="stop3" offset="100%"/>

      </linearGradient>

      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">

        <stop offset="0%" stop-color="red"/>

        <stop offset="50%" stop-color="black" stop-opacity="0"/>

        <stop offset="100%" stop-color="blue"/>

      </linearGradient>

  </defs>

</svg>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script>



var matrixData={

  "Occupants":

  [0, 10,10,10,10,0,0,0,10,10,10,10,10],

  "Flooring":

  [70,0,0,0,0,0,30,0,0,0,0,0,0],

  "Millwork":

  [40, 0,0,0,0,0,60,0,0,0,0,0],

  "Ceilings": 

  [60, 0,0,0,0,0,40,0,0,0,0,0,0],

  "Wet Applied Products":

  [60, 0,0,0,0,0,40,0,0,0,0,0,0],

  "Curtain Wall":

  [0, 0,0,0,0,0,100,0,0,0,0,0,0],

  "Environment":

  [0, 10,10,10,10,0,10,0,10,10,10,0,10],

  "Roofing":

  [0, 0,0,0,0,0,80,0,0,0,0,0],

  "Insulation":

  [50, 0,0,0,0,0,50,0,0,0,0,0,0],

  "MEPFP":

  [40, 0,0,0,0,0,60,0,0,0,0,0,0],

  "Structure": 

  [50, 0,0,0,0,0,50,0,0,0,0,0,0],

  "Furniture":

  [90, 0,0,0,0,0,10,0,0,0,0,0,0]

}





matrix= Object.values(matrixData);

matrixKeys = Object.keys(matrixData);

  

var svg = d3.select("svg"),

    width = +svg.attr("width"),

    height = +svg.attr("height"),

    outerRadius = Math.min(width, height) * 0.5 - 150,

    innerRadius = outerRadius - 30;



	

	

var formatValue = d3.formatPrefix(",.0", 1e3);



var chord = d3.chord()

    .padAngle(0.024)

    .sortSubgroups(d3.descending);



var arc = d3.arc()

    .innerRadius(innerRadius)

    .outerRadius(outerRadius);



var ribbon = d3.ribbon();



var color = d3.scaleOrdinal()

    .domain(d3.range(4))

    .range(["#6FCDE3", 

            "#D7DAE5", 

            "#D7DAE5", 

            "#D7DAE5", 

            "#D7DAE5", 

            "#D7DAE5", 

            "#E5E52B",

            "#D7DAE5",

            "#D7DAE5", 

            "#D7DAE5", 

            "#D7DAE5", 

            "#D7DAE5"

           ]);



var g = svg.append("g")

    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")

    .datum(chord(matrix));



var group = g.append("g")

    .attr("class", "groups")

  .selectAll("g")

  .data(function(chords) { return chords.groups; })

  .enter().append("g");



group.append("path")

    .style("fill", function(d) { return color(d.index); })

    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })

    .attr("d", function(d,i) { 

		var radius = 0;

		if(d.index%2 != 0) radius = 50;

		return arc.innerRadius(innerRadius + radius)

    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {

		fade(.1,d);

	})

    .on("mouseout", function(d,i) {

		fade(1,d);

	});



var groupTick = group.selectAll(".group-tick")

  .data(function(d) { return groupTicks(d, 1e3); })

  .enter().append("g")

    .attr("class", "group-tick")

    .attr("transform", function(d) { 

	  var radius = 0;

	  if(d.index%2 != 0) radius = 50;

      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 

        ") translate(" + (outerRadius + radius) + ",2)"; 

    });



groupTick.append("line")

    .attr("x2", 6);



groupTick

  .filter(function(d) { return d.value % 5e3 === 0; })

  .append("text")

    .attr("x", 8)

    .attr("dy", ".35em")

    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })

    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })

    .text(function(d) { 

  return matrixKeys[d.index]; 

});



g.append("g")

    .attr("class", "ribbons")

  .selectAll("path")

  .data(function(chords) { 

	return chords; })

  .enter().append("path")

    .attr("d", function(d) {

		if(d.source.index%2 == 0) d.source.radius = innerRadius;

		else d.source.radius = innerRadius + 50;

		if(d.target.index%2 == 0) d.target.radius = innerRadius;

		else d.target.radius = innerRadius + 50;

		return ribbon(d);

	})

	.attr("class", function(d,i) { return matrixKeys[d.index]})

    .style("fill", function(d) { return color(d.target.index); })

    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });



		

	

// Returns an array of tick angles and values for a given group and step.

function groupTicks(d, step) {

  var k = (d.endAngle - d.startAngle) / d.value;

  return d3.range(0, d.value, step).map(function(value) {

    return {

      index:d.index,

      value: value, 

      angle: value * k + d.startAngle

    };

  });

}



function fade(opacity, d2) {

			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 

				return d.source.index != d2.index && d.target.index != d2.index;

			});

			hightLight.transition()

                    .style("opacity", opacity);

        }



</script>








share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247071%2fd3-js-chord-diagram-make-chords-touch-the-pulled-apart-arc%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    According to the documentation, you can pass the radius as a parameter when creating the chord/ribbon.



    Documentation for ribbon



    // from documentation
    
   var ribbon = d3.ribbon();
    
     ribbon({
    
            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
    
            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
    
     }); 
    






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

    
body {
    
  font: 20px sans-serif;
    
}
    

    
.group-tick line {
    
  stroke: #000;
    
}
    

    
.ribbons {
    
  fill-opacity: 0.67;
    
}
    

    
</style>
    
<svg width="800" height="800">
    
<defs>
    
      <linearGradient id="Gradient1">
    
        <stop class="stop1" offset="0%"/>
    
        <stop class="stop2" offset="50%"/>
    
        <stop class="stop3" offset="100%"/>
    
      </linearGradient>
    
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
    
        <stop offset="0%" stop-color="red"/>
    
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
    
        <stop offset="100%" stop-color="blue"/>
    
      </linearGradient>
    
  </defs>
    
</svg>
    
<script src="https://d3js.org/d3.v5.min.js"></script>
    
<script>
    

    
var matrixData={
    
  "Occupants":
    
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
    
  "Flooring":
    
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
    
  "Millwork":
    
  [40, 0,0,0,0,0,60,0,0,0,0,0],
    
  "Ceilings": 
    
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
    
  "Wet Applied Products":
    
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
    
  "Curtain Wall":
    
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
    
  "Environment":
    
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
    
  "Roofing":
    
  [0, 0,0,0,0,0,80,0,0,0,0,0],
    
  "Insulation":
    
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
    
  "MEPFP":
    
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
    
  "Structure": 
    
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
    
  "Furniture":
    
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
    
}
    

    

    
matrix= Object.values(matrixData);
    
matrixKeys = Object.keys(matrixData);
    
  
    
var svg = d3.select("svg"),
    
    width = +svg.attr("width"),
    
    height = +svg.attr("height"),
    
    outerRadius = Math.min(width, height) * 0.5 - 150,
    
    innerRadius = outerRadius - 30;
    

    
	
    
	
    
var formatValue = d3.formatPrefix(",.0", 1e3);
    

    
var chord = d3.chord()
    
    .padAngle(0.024)
    
    .sortSubgroups(d3.descending);
    

    
var arc = d3.arc()
    
    .innerRadius(innerRadius)
    
    .outerRadius(outerRadius);
    

    
var ribbon = d3.ribbon();
    

    
var color = d3.scaleOrdinal()
    
    .domain(d3.range(4))
    
    .range(["#6FCDE3", 
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#E5E52B",
    
            "#D7DAE5",
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#D7DAE5", 
    
            "#D7DAE5"
    
           ]);
    

    
var g = svg.append("g")
    
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
    
    .datum(chord(matrix));
    

    
var group = g.append("g")
    
    .attr("class", "groups")
    
  .selectAll("g")
    
  .data(function(chords) { return chords.groups; })
    
  .enter().append("g");
    

    
group.append("path")
    
    .style("fill", function(d) { return color(d.index); })
    
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
    
    .attr("d", function(d,i) { 
    
		var radius = 0;
    
		if(d.index%2 != 0) radius = 50;
    
		return arc.innerRadius(innerRadius + radius)
    
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
    
		fade(.1,d);
    
	})
    
    .on("mouseout", function(d,i) {
    
		fade(1,d);
    
	});
    

    
var groupTick = group.selectAll(".group-tick")
    
  .data(function(d) { return groupTicks(d, 1e3); })
    
  .enter().append("g")
    
    .attr("class", "group-tick")
    
    .attr("transform", function(d) { 
    
	  var radius = 0;
    
	  if(d.index%2 != 0) radius = 50;
    
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
    
        ") translate(" + (outerRadius + radius) + ",2)"; 
    
    });
    

    
groupTick.append("line")
    
    .attr("x2", 6);
    

    
groupTick
    
  .filter(function(d) { return d.value % 5e3 === 0; })
    
  .append("text")
    
    .attr("x", 8)
    
    .attr("dy", ".35em")
    
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
    
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
    
    .text(function(d) { 
    
  return matrixKeys[d.index]; 
    
});
    

    
g.append("g")
    
    .attr("class", "ribbons")
    
  .selectAll("path")
    
  .data(function(chords) { 
    
	return chords; })
    
  .enter().append("path")
    
    .attr("d", function(d) {
    
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
    
		else d.source.radius = innerRadius + 50;
    
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
    
		else d.target.radius = innerRadius + 50;
    
		return ribbon(d);
    
	})
    
	.attr("class", function(d,i) { return matrixKeys[d.index]})
    
    .style("fill", function(d) { return color(d.target.index); })
    
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
    

    
		
    
	
    
// Returns an array of tick angles and values for a given group and step.
    
function groupTicks(d, step) {
    
  var k = (d.endAngle - d.startAngle) / d.value;
    
  return d3.range(0, d.value, step).map(function(value) {
    
    return {
    
      index:d.index,
    
      value: value, 
    
      angle: value * k + d.startAngle
    
    };
    
  });
    
}
    

    
function fade(opacity, d2) {
    
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
    
				return d.source.index != d2.index && d.target.index != d2.index;
    
			});
    
			hightLight.transition()
    
                    .style("opacity", opacity);
    
        }
    

    
</script>








    share|improve this answer

























      up vote
      1
      down vote













      According to the documentation, you can pass the radius as a parameter when creating the chord/ribbon.



      Documentation for ribbon



      // from documentation
      
   var ribbon = d3.ribbon();
      
     ribbon({
      
            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
      
            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
      
     }); 
      






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

      
body {
      
  font: 20px sans-serif;
      
}
      

      
.group-tick line {
      
  stroke: #000;
      
}
      

      
.ribbons {
      
  fill-opacity: 0.67;
      
}
      

      
</style>
      
<svg width="800" height="800">
      
<defs>
      
      <linearGradient id="Gradient1">
      
        <stop class="stop1" offset="0%"/>
      
        <stop class="stop2" offset="50%"/>
      
        <stop class="stop3" offset="100%"/>
      
      </linearGradient>
      
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      
        <stop offset="0%" stop-color="red"/>
      
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
      
        <stop offset="100%" stop-color="blue"/>
      
      </linearGradient>
      
  </defs>
      
</svg>
      
<script src="https://d3js.org/d3.v5.min.js"></script>
      
<script>
      

      
var matrixData={
      
  "Occupants":
      
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
      
  "Flooring":
      
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
      
  "Millwork":
      
  [40, 0,0,0,0,0,60,0,0,0,0,0],
      
  "Ceilings": 
      
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
      
  "Wet Applied Products":
      
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
      
  "Curtain Wall":
      
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
      
  "Environment":
      
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
      
  "Roofing":
      
  [0, 0,0,0,0,0,80,0,0,0,0,0],
      
  "Insulation":
      
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
      
  "MEPFP":
      
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
      
  "Structure": 
      
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
      
  "Furniture":
      
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
      
}
      

      

      
matrix= Object.values(matrixData);
      
matrixKeys = Object.keys(matrixData);
      
  
      
var svg = d3.select("svg"),
      
    width = +svg.attr("width"),
      
    height = +svg.attr("height"),
      
    outerRadius = Math.min(width, height) * 0.5 - 150,
      
    innerRadius = outerRadius - 30;
      

      
	
      
	
      
var formatValue = d3.formatPrefix(",.0", 1e3);
      

      
var chord = d3.chord()
      
    .padAngle(0.024)
      
    .sortSubgroups(d3.descending);
      

      
var arc = d3.arc()
      
    .innerRadius(innerRadius)
      
    .outerRadius(outerRadius);
      

      
var ribbon = d3.ribbon();
      

      
var color = d3.scaleOrdinal()
      
    .domain(d3.range(4))
      
    .range(["#6FCDE3", 
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#E5E52B",
      
            "#D7DAE5",
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#D7DAE5", 
      
            "#D7DAE5"
      
           ]);
      

      
var g = svg.append("g")
      
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
      
    .datum(chord(matrix));
      

      
var group = g.append("g")
      
    .attr("class", "groups")
      
  .selectAll("g")
      
  .data(function(chords) { return chords.groups; })
      
  .enter().append("g");
      

      
group.append("path")
      
    .style("fill", function(d) { return color(d.index); })
      
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
      
    .attr("d", function(d,i) { 
      
		var radius = 0;
      
		if(d.index%2 != 0) radius = 50;
      
		return arc.innerRadius(innerRadius + radius)
      
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
      
		fade(.1,d);
      
	})
      
    .on("mouseout", function(d,i) {
      
		fade(1,d);
      
	});
      

      
var groupTick = group.selectAll(".group-tick")
      
  .data(function(d) { return groupTicks(d, 1e3); })
      
  .enter().append("g")
      
    .attr("class", "group-tick")
      
    .attr("transform", function(d) { 
      
	  var radius = 0;
      
	  if(d.index%2 != 0) radius = 50;
      
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
      
        ") translate(" + (outerRadius + radius) + ",2)"; 
      
    });
      

      
groupTick.append("line")
      
    .attr("x2", 6);
      

      
groupTick
      
  .filter(function(d) { return d.value % 5e3 === 0; })
      
  .append("text")
      
    .attr("x", 8)
      
    .attr("dy", ".35em")
      
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
      
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
      
    .text(function(d) { 
      
  return matrixKeys[d.index]; 
      
});
      

      
g.append("g")
      
    .attr("class", "ribbons")
      
  .selectAll("path")
      
  .data(function(chords) { 
      
	return chords; })
      
  .enter().append("path")
      
    .attr("d", function(d) {
      
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
      
		else d.source.radius = innerRadius + 50;
      
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
      
		else d.target.radius = innerRadius + 50;
      
		return ribbon(d);
      
	})
      
	.attr("class", function(d,i) { return matrixKeys[d.index]})
      
    .style("fill", function(d) { return color(d.target.index); })
      
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
      

      
		
      
	
      
// Returns an array of tick angles and values for a given group and step.
      
function groupTicks(d, step) {
      
  var k = (d.endAngle - d.startAngle) / d.value;
      
  return d3.range(0, d.value, step).map(function(value) {
      
    return {
      
      index:d.index,
      
      value: value, 
      
      angle: value * k + d.startAngle
      
    };
      
  });
      
}
      

      
function fade(opacity, d2) {
      
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
      
				return d.source.index != d2.index && d.target.index != d2.index;
      
			});
      
			hightLight.transition()
      
                    .style("opacity", opacity);
      
        }
      

      
</script>








      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        According to the documentation, you can pass the radius as a parameter when creating the chord/ribbon.



        Documentation for ribbon



        // from documentation
        
   var ribbon = d3.ribbon();
        
     ribbon({
        
            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
        
            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
        
     }); 
        






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

        
body {
        
  font: 20px sans-serif;
        
}
        

        
.group-tick line {
        
  stroke: #000;
        
}
        

        
.ribbons {
        
  fill-opacity: 0.67;
        
}
        

        
</style>
        
<svg width="800" height="800">
        
<defs>
        
      <linearGradient id="Gradient1">
        
        <stop class="stop1" offset="0%"/>
        
        <stop class="stop2" offset="50%"/>
        
        <stop class="stop3" offset="100%"/>
        
      </linearGradient>
        
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        
        <stop offset="0%" stop-color="red"/>
        
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        
        <stop offset="100%" stop-color="blue"/>
        
      </linearGradient>
        
  </defs>
        
</svg>
        
<script src="https://d3js.org/d3.v5.min.js"></script>
        
<script>
        

        
var matrixData={
        
  "Occupants":
        
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
        
  "Flooring":
        
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
        
  "Millwork":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0],
        
  "Ceilings": 
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Wet Applied Products":
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Curtain Wall":
        
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
        
  "Environment":
        
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
        
  "Roofing":
        
  [0, 0,0,0,0,0,80,0,0,0,0,0],
        
  "Insulation":
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "MEPFP":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
        
  "Structure": 
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "Furniture":
        
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
        
}
        

        

        
matrix= Object.values(matrixData);
        
matrixKeys = Object.keys(matrixData);
        
  
        
var svg = d3.select("svg"),
        
    width = +svg.attr("width"),
        
    height = +svg.attr("height"),
        
    outerRadius = Math.min(width, height) * 0.5 - 150,
        
    innerRadius = outerRadius - 30;
        

        
	
        
	
        
var formatValue = d3.formatPrefix(",.0", 1e3);
        

        
var chord = d3.chord()
        
    .padAngle(0.024)
        
    .sortSubgroups(d3.descending);
        

        
var arc = d3.arc()
        
    .innerRadius(innerRadius)
        
    .outerRadius(outerRadius);
        

        
var ribbon = d3.ribbon();
        

        
var color = d3.scaleOrdinal()
        
    .domain(d3.range(4))
        
    .range(["#6FCDE3", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#E5E52B",
        
            "#D7DAE5",
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5"
        
           ]);
        

        
var g = svg.append("g")
        
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
        
    .datum(chord(matrix));
        

        
var group = g.append("g")
        
    .attr("class", "groups")
        
  .selectAll("g")
        
  .data(function(chords) { return chords.groups; })
        
  .enter().append("g");
        

        
group.append("path")
        
    .style("fill", function(d) { return color(d.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
        
    .attr("d", function(d,i) { 
        
		var radius = 0;
        
		if(d.index%2 != 0) radius = 50;
        
		return arc.innerRadius(innerRadius + radius)
        
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
        
		fade(.1,d);
        
	})
        
    .on("mouseout", function(d,i) {
        
		fade(1,d);
        
	});
        

        
var groupTick = group.selectAll(".group-tick")
        
  .data(function(d) { return groupTicks(d, 1e3); })
        
  .enter().append("g")
        
    .attr("class", "group-tick")
        
    .attr("transform", function(d) { 
        
	  var radius = 0;
        
	  if(d.index%2 != 0) radius = 50;
        
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
        
        ") translate(" + (outerRadius + radius) + ",2)"; 
        
    });
        

        
groupTick.append("line")
        
    .attr("x2", 6);
        

        
groupTick
        
  .filter(function(d) { return d.value % 5e3 === 0; })
        
  .append("text")
        
    .attr("x", 8)
        
    .attr("dy", ".35em")
        
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
        
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
        
    .text(function(d) { 
        
  return matrixKeys[d.index]; 
        
});
        

        
g.append("g")
        
    .attr("class", "ribbons")
        
  .selectAll("path")
        
  .data(function(chords) { 
        
	return chords; })
        
  .enter().append("path")
        
    .attr("d", function(d) {
        
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
        
		else d.source.radius = innerRadius + 50;
        
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
        
		else d.target.radius = innerRadius + 50;
        
		return ribbon(d);
        
	})
        
	.attr("class", function(d,i) { return matrixKeys[d.index]})
        
    .style("fill", function(d) { return color(d.target.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
        

        
		
        
	
        
// Returns an array of tick angles and values for a given group and step.
        
function groupTicks(d, step) {
        
  var k = (d.endAngle - d.startAngle) / d.value;
        
  return d3.range(0, d.value, step).map(function(value) {
        
    return {
        
      index:d.index,
        
      value: value, 
        
      angle: value * k + d.startAngle
        
    };
        
  });
        
}
        

        
function fade(opacity, d2) {
        
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
        
				return d.source.index != d2.index && d.target.index != d2.index;
        
			});
        
			hightLight.transition()
        
                    .style("opacity", opacity);
        
        }
        

        
</script>








        share|improve this answer












        According to the documentation, you can pass the radius as a parameter when creating the chord/ribbon.



        Documentation for ribbon



        // from documentation
        
   var ribbon = d3.ribbon();
        
     ribbon({
        
            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
        
            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
        
     }); 
        






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

        
body {
        
  font: 20px sans-serif;
        
}
        

        
.group-tick line {
        
  stroke: #000;
        
}
        

        
.ribbons {
        
  fill-opacity: 0.67;
        
}
        

        
</style>
        
<svg width="800" height="800">
        
<defs>
        
      <linearGradient id="Gradient1">
        
        <stop class="stop1" offset="0%"/>
        
        <stop class="stop2" offset="50%"/>
        
        <stop class="stop3" offset="100%"/>
        
      </linearGradient>
        
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        
        <stop offset="0%" stop-color="red"/>
        
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        
        <stop offset="100%" stop-color="blue"/>
        
      </linearGradient>
        
  </defs>
        
</svg>
        
<script src="https://d3js.org/d3.v5.min.js"></script>
        
<script>
        

        
var matrixData={
        
  "Occupants":
        
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
        
  "Flooring":
        
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
        
  "Millwork":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0],
        
  "Ceilings": 
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Wet Applied Products":
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Curtain Wall":
        
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
        
  "Environment":
        
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
        
  "Roofing":
        
  [0, 0,0,0,0,0,80,0,0,0,0,0],
        
  "Insulation":
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "MEPFP":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
        
  "Structure": 
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "Furniture":
        
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
        
}
        

        

        
matrix= Object.values(matrixData);
        
matrixKeys = Object.keys(matrixData);
        
  
        
var svg = d3.select("svg"),
        
    width = +svg.attr("width"),
        
    height = +svg.attr("height"),
        
    outerRadius = Math.min(width, height) * 0.5 - 150,
        
    innerRadius = outerRadius - 30;
        

        
	
        
	
        
var formatValue = d3.formatPrefix(",.0", 1e3);
        

        
var chord = d3.chord()
        
    .padAngle(0.024)
        
    .sortSubgroups(d3.descending);
        

        
var arc = d3.arc()
        
    .innerRadius(innerRadius)
        
    .outerRadius(outerRadius);
        

        
var ribbon = d3.ribbon();
        

        
var color = d3.scaleOrdinal()
        
    .domain(d3.range(4))
        
    .range(["#6FCDE3", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#E5E52B",
        
            "#D7DAE5",
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5"
        
           ]);
        

        
var g = svg.append("g")
        
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
        
    .datum(chord(matrix));
        

        
var group = g.append("g")
        
    .attr("class", "groups")
        
  .selectAll("g")
        
  .data(function(chords) { return chords.groups; })
        
  .enter().append("g");
        

        
group.append("path")
        
    .style("fill", function(d) { return color(d.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
        
    .attr("d", function(d,i) { 
        
		var radius = 0;
        
		if(d.index%2 != 0) radius = 50;
        
		return arc.innerRadius(innerRadius + radius)
        
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
        
		fade(.1,d);
        
	})
        
    .on("mouseout", function(d,i) {
        
		fade(1,d);
        
	});
        

        
var groupTick = group.selectAll(".group-tick")
        
  .data(function(d) { return groupTicks(d, 1e3); })
        
  .enter().append("g")
        
    .attr("class", "group-tick")
        
    .attr("transform", function(d) { 
        
	  var radius = 0;
        
	  if(d.index%2 != 0) radius = 50;
        
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
        
        ") translate(" + (outerRadius + radius) + ",2)"; 
        
    });
        

        
groupTick.append("line")
        
    .attr("x2", 6);
        

        
groupTick
        
  .filter(function(d) { return d.value % 5e3 === 0; })
        
  .append("text")
        
    .attr("x", 8)
        
    .attr("dy", ".35em")
        
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
        
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
        
    .text(function(d) { 
        
  return matrixKeys[d.index]; 
        
});
        

        
g.append("g")
        
    .attr("class", "ribbons")
        
  .selectAll("path")
        
  .data(function(chords) { 
        
	return chords; })
        
  .enter().append("path")
        
    .attr("d", function(d) {
        
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
        
		else d.source.radius = innerRadius + 50;
        
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
        
		else d.target.radius = innerRadius + 50;
        
		return ribbon(d);
        
	})
        
	.attr("class", function(d,i) { return matrixKeys[d.index]})
        
    .style("fill", function(d) { return color(d.target.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
        

        
		
        
	
        
// Returns an array of tick angles and values for a given group and step.
        
function groupTicks(d, step) {
        
  var k = (d.endAngle - d.startAngle) / d.value;
        
  return d3.range(0, d.value, step).map(function(value) {
        
    return {
        
      index:d.index,
        
      value: value, 
        
      angle: value * k + d.startAngle
        
    };
        
  });
        
}
        

        
function fade(opacity, d2) {
        
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
        
				return d.source.index != d2.index && d.target.index != d2.index;
        
			});
        
			hightLight.transition()
        
                    .style("opacity", opacity);
        
        }
        

        
</script>








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

        
body {
        
  font: 20px sans-serif;
        
}
        

        
.group-tick line {
        
  stroke: #000;
        
}
        

        
.ribbons {
        
  fill-opacity: 0.67;
        
}
        

        
</style>
        
<svg width="800" height="800">
        
<defs>
        
      <linearGradient id="Gradient1">
        
        <stop class="stop1" offset="0%"/>
        
        <stop class="stop2" offset="50%"/>
        
        <stop class="stop3" offset="100%"/>
        
      </linearGradient>
        
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        
        <stop offset="0%" stop-color="red"/>
        
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        
        <stop offset="100%" stop-color="blue"/>
        
      </linearGradient>
        
  </defs>
        
</svg>
        
<script src="https://d3js.org/d3.v5.min.js"></script>
        
<script>
        

        
var matrixData={
        
  "Occupants":
        
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
        
  "Flooring":
        
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
        
  "Millwork":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0],
        
  "Ceilings": 
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Wet Applied Products":
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Curtain Wall":
        
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
        
  "Environment":
        
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
        
  "Roofing":
        
  [0, 0,0,0,0,0,80,0,0,0,0,0],
        
  "Insulation":
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "MEPFP":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
        
  "Structure": 
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "Furniture":
        
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
        
}
        

        

        
matrix= Object.values(matrixData);
        
matrixKeys = Object.keys(matrixData);
        
  
        
var svg = d3.select("svg"),
        
    width = +svg.attr("width"),
        
    height = +svg.attr("height"),
        
    outerRadius = Math.min(width, height) * 0.5 - 150,
        
    innerRadius = outerRadius - 30;
        

        
	
        
	
        
var formatValue = d3.formatPrefix(",.0", 1e3);
        

        
var chord = d3.chord()
        
    .padAngle(0.024)
        
    .sortSubgroups(d3.descending);
        

        
var arc = d3.arc()
        
    .innerRadius(innerRadius)
        
    .outerRadius(outerRadius);
        

        
var ribbon = d3.ribbon();
        

        
var color = d3.scaleOrdinal()
        
    .domain(d3.range(4))
        
    .range(["#6FCDE3", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#E5E52B",
        
            "#D7DAE5",
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5"
        
           ]);
        

        
var g = svg.append("g")
        
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
        
    .datum(chord(matrix));
        

        
var group = g.append("g")
        
    .attr("class", "groups")
        
  .selectAll("g")
        
  .data(function(chords) { return chords.groups; })
        
  .enter().append("g");
        

        
group.append("path")
        
    .style("fill", function(d) { return color(d.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
        
    .attr("d", function(d,i) { 
        
		var radius = 0;
        
		if(d.index%2 != 0) radius = 50;
        
		return arc.innerRadius(innerRadius + radius)
        
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
        
		fade(.1,d);
        
	})
        
    .on("mouseout", function(d,i) {
        
		fade(1,d);
        
	});
        

        
var groupTick = group.selectAll(".group-tick")
        
  .data(function(d) { return groupTicks(d, 1e3); })
        
  .enter().append("g")
        
    .attr("class", "group-tick")
        
    .attr("transform", function(d) { 
        
	  var radius = 0;
        
	  if(d.index%2 != 0) radius = 50;
        
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
        
        ") translate(" + (outerRadius + radius) + ",2)"; 
        
    });
        

        
groupTick.append("line")
        
    .attr("x2", 6);
        

        
groupTick
        
  .filter(function(d) { return d.value % 5e3 === 0; })
        
  .append("text")
        
    .attr("x", 8)
        
    .attr("dy", ".35em")
        
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
        
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
        
    .text(function(d) { 
        
  return matrixKeys[d.index]; 
        
});
        

        
g.append("g")
        
    .attr("class", "ribbons")
        
  .selectAll("path")
        
  .data(function(chords) { 
        
	return chords; })
        
  .enter().append("path")
        
    .attr("d", function(d) {
        
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
        
		else d.source.radius = innerRadius + 50;
        
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
        
		else d.target.radius = innerRadius + 50;
        
		return ribbon(d);
        
	})
        
	.attr("class", function(d,i) { return matrixKeys[d.index]})
        
    .style("fill", function(d) { return color(d.target.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
        

        
		
        
	
        
// Returns an array of tick angles and values for a given group and step.
        
function groupTicks(d, step) {
        
  var k = (d.endAngle - d.startAngle) / d.value;
        
  return d3.range(0, d.value, step).map(function(value) {
        
    return {
        
      index:d.index,
        
      value: value, 
        
      angle: value * k + d.startAngle
        
    };
        
  });
        
}
        

        
function fade(opacity, d2) {
        
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
        
				return d.source.index != d2.index && d.target.index != d2.index;
        
			});
        
			hightLight.transition()
        
                    .style("opacity", opacity);
        
        }
        

        
</script>





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

        
body {
        
  font: 20px sans-serif;
        
}
        

        
.group-tick line {
        
  stroke: #000;
        
}
        

        
.ribbons {
        
  fill-opacity: 0.67;
        
}
        

        
</style>
        
<svg width="800" height="800">
        
<defs>
        
      <linearGradient id="Gradient1">
        
        <stop class="stop1" offset="0%"/>
        
        <stop class="stop2" offset="50%"/>
        
        <stop class="stop3" offset="100%"/>
        
      </linearGradient>
        
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        
        <stop offset="0%" stop-color="red"/>
        
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        
        <stop offset="100%" stop-color="blue"/>
        
      </linearGradient>
        
  </defs>
        
</svg>
        
<script src="https://d3js.org/d3.v5.min.js"></script>
        
<script>
        

        
var matrixData={
        
  "Occupants":
        
  [0, 10,10,10,10,0,0,0,10,10,10,10,10],
        
  "Flooring":
        
  [70,0,0,0,0,0,30,0,0,0,0,0,0],
        
  "Millwork":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0],
        
  "Ceilings": 
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Wet Applied Products":
        
  [60, 0,0,0,0,0,40,0,0,0,0,0,0],
        
  "Curtain Wall":
        
  [0, 0,0,0,0,0,100,0,0,0,0,0,0],
        
  "Environment":
        
  [0, 10,10,10,10,0,10,0,10,10,10,0,10],
        
  "Roofing":
        
  [0, 0,0,0,0,0,80,0,0,0,0,0],
        
  "Insulation":
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "MEPFP":
        
  [40, 0,0,0,0,0,60,0,0,0,0,0,0],
        
  "Structure": 
        
  [50, 0,0,0,0,0,50,0,0,0,0,0,0],
        
  "Furniture":
        
  [90, 0,0,0,0,0,10,0,0,0,0,0,0]
        
}
        

        

        
matrix= Object.values(matrixData);
        
matrixKeys = Object.keys(matrixData);
        
  
        
var svg = d3.select("svg"),
        
    width = +svg.attr("width"),
        
    height = +svg.attr("height"),
        
    outerRadius = Math.min(width, height) * 0.5 - 150,
        
    innerRadius = outerRadius - 30;
        

        
	
        
	
        
var formatValue = d3.formatPrefix(",.0", 1e3);
        

        
var chord = d3.chord()
        
    .padAngle(0.024)
        
    .sortSubgroups(d3.descending);
        

        
var arc = d3.arc()
        
    .innerRadius(innerRadius)
        
    .outerRadius(outerRadius);
        

        
var ribbon = d3.ribbon();
        

        
var color = d3.scaleOrdinal()
        
    .domain(d3.range(4))
        
    .range(["#6FCDE3", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#E5E52B",
        
            "#D7DAE5",
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5", 
        
            "#D7DAE5"
        
           ]);
        

        
var g = svg.append("g")
        
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
        
    .datum(chord(matrix));
        

        
var group = g.append("g")
        
    .attr("class", "groups")
        
  .selectAll("g")
        
  .data(function(chords) { return chords.groups; })
        
  .enter().append("g");
        

        
group.append("path")
        
    .style("fill", function(d) { return color(d.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
        
    .attr("d", function(d,i) { 
        
		var radius = 0;
        
		if(d.index%2 != 0) radius = 50;
        
		return arc.innerRadius(innerRadius + radius)
        
    .outerRadius(outerRadius + radius)(d);}).on("mouseover", function(d,i) {
        
		fade(.1,d);
        
	})
        
    .on("mouseout", function(d,i) {
        
		fade(1,d);
        
	});
        

        
var groupTick = group.selectAll(".group-tick")
        
  .data(function(d) { return groupTicks(d, 1e3); })
        
  .enter().append("g")
        
    .attr("class", "group-tick")
        
    .attr("transform", function(d) { 
        
	  var radius = 0;
        
	  if(d.index%2 != 0) radius = 50;
        
      return "rotate(" + (d.angle * 180 / Math.PI - 75) + 
        
        ") translate(" + (outerRadius + radius) + ",2)"; 
        
    });
        

        
groupTick.append("line")
        
    .attr("x2", 6);
        

        
groupTick
        
  .filter(function(d) { return d.value % 5e3 === 0; })
        
  .append("text")
        
    .attr("x", 8)
        
    .attr("dy", ".35em")
        
    .attr("transform", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2 ? "rotate(180) translate(-16)" : null; })
        
    .style("text-anchor", function(d) { return d.angle > Math.PI/2 && d.angle < Math.PI*3/2? "end" : null; })
        
    .text(function(d) { 
        
  return matrixKeys[d.index]; 
        
});
        

        
g.append("g")
        
    .attr("class", "ribbons")
        
  .selectAll("path")
        
  .data(function(chords) { 
        
	return chords; })
        
  .enter().append("path")
        
    .attr("d", function(d) {
        
		if(d.source.index%2 == 0) d.source.radius = innerRadius;
        
		else d.source.radius = innerRadius + 50;
        
		if(d.target.index%2 == 0) d.target.radius = innerRadius;
        
		else d.target.radius = innerRadius + 50;
        
		return ribbon(d);
        
	})
        
	.attr("class", function(d,i) { return matrixKeys[d.index]})
        
    .style("fill", function(d) { return color(d.target.index); })
        
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
        

        
		
        
	
        
// Returns an array of tick angles and values for a given group and step.
        
function groupTicks(d, step) {
        
  var k = (d.endAngle - d.startAngle) / d.value;
        
  return d3.range(0, d.value, step).map(function(value) {
        
    return {
        
      index:d.index,
        
      value: value, 
        
      angle: value * k + d.startAngle
        
    };
        
  });
        
}
        

        
function fade(opacity, d2) {
        
			var hightLight = g.selectAll(".ribbons path").filter(function(d) { 
        
				return d.source.index != d2.index && d.target.index != d2.index;
        
			});
        
			hightLight.transition()
        
                    .style("opacity", opacity);
        
        }
        

        
</script>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 17 at 2:40









        Umesh Maharshi

        1,040410




        1,040410






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247071%2fd3-js-chord-diagram-make-chords-touch-the-pulled-apart-arc%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Full-time equivalent

            Image
            Full-time equivalent From Wikipedia, the free encyclopedia Jump to navigation Jump to search Full-time equivalent ( FTE ) or whole time equivalent ( WTE ) is a unit that indicates the workload of an employed person (or student) in a way that makes workloads or class loads comparable [1] across various contexts. FTE is often used to measure a worker's or student's involvement in a project, or to track cost reductions in an organization. An FTE of 1.0 is equivalent to a full-time worker or student, while an FTE of 0.5 signals half of a full work or school load. [2] Contents 1 U.S. Federal Government 2 In education 2.1 Example 3 Notes 4 References U.S. Federal Government [ edit ] In the U.S. Federal Government, FTE is defined by the Government Accountability Office (GAO) as the number of total hours worked divided by the maximum number of compensable hours in a full-time schedule as...
            Read more

            さくらももこ

            Image
            さくら ももこ 本名 非公開 [1] 生誕 ( 1965-05-08 ) 1965年5月8日 日本・静岡県清水市 （現・静岡市清水区） 死没 ( 2018-08-15 ) 2018年8月15日（53歳没） 日本・東京都目黒区 国籍 日本 職業 漫画家 エッセイスト 作詞家 活動期間 1984年 - 2018年 ジャンル 少女漫画 青年漫画 児童漫画 代表作 『ちびまる子ちゃん』 『コジコジ』 受賞 1989年：第13回講談社漫画賞少女部門 （『ちびまる子ちゃん』） 1990年：第32回日本レコード大賞 （『おどるポンポコリン』作詞） 公式サイト さくらプロダクション テンプレートを表示 さくら ももこ （1965年5月8日 - 2018年8月15日 [2] ）は、日本の漫画家、エッセイスト、作詞家、脚本家。また、自身の少女時代をモデルとした代表作のコミック『ちびまる子ちゃん』の主人公の名前でもある。静岡県清水市（現・静岡市清水区）出身。血液型はA型。身長159cm。一男の母親。 代表作のコミック『ちびまる子ちゃん』の単行本の売上は累計3000万部を超える。また、エッセイストとしても独特の視点と語り口で人気が高く、初期エッセイ集三部作『もものかんづめ』『さるのこしかけ』『たいのおかしら』はいずれもミリオンセラーを記録。 目次 1 経歴 2 人物・交遊関係 3 主な作品 3.1 漫画 3.2 エッセイ 3.3 作詞 3.4 詩集 3.5 雑誌・ムック本 3.6 翻訳 3.7 絵本、ドラマ脚本他 3.8 ラジオ出演 3.9 その他 4 関係人物 4.1 アシスタント 4.2 さくらももこを演じた人物 5 脚注 5.1 注釈 5.2 出典 6 外部リンク 経歴 年譜形式の経歴は推奨されていません 。人物の伝記は流れのあるまとまった文章で記述し、年譜は補助的な使用にとどめてください。 （ 2018年8月 ） 清水市立（当時）入江小学校...
            Read more

            13 indicted, 8 arrested in Calif. drug cartel investigation

            Image
            Fox News U.S. World Opinion Politics Entertainment Business Lifestyle TV Radio More Expand / Collapse search Login Watch TV ☰ Hot Topics U.S. Crime Military Education Terror Immigration Economy Personal Freedoms World U.N. Conflicts Terrorism Disasters Global Economy Environment Religion Scandals Opinion Politics Executive Senate House Judiciary Foreign policy Polls Elections Entertainment Celebrity News Movies TV News Music News Style News Entertainment Video Business Markets Politics Technology Features Business Leaders Lifestyle Food + Drink Cars + Trucks Travel + Outdoors House + Home Fitness + Well-being Style + Beauty Family Science Archaeology Air & Space Planet Earth Wild Nature Natural Science Dinosaurs Tech Security Innovation Drones Computers Video Games Military Tech Health Healthy Living Medical Research Mental Health Cancer Heart Health Children'...
            Read more