Chord diagram showing co-occurrences.

Inspiration from Mike Bostock's chord diagram examples and others. Also the API reference layout for the chord layout.

forked from SkiWether's block: Chord diagram showing co-occurrences.

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

<title>Open Chord Shared Ad Blocks</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>

#visual {
    font: 14px sans-serif;
}

.chord path {
    fill-opacity: .67;
    stroke: #000;
    stroke-width: .5px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    #visual {
        -webkit-user-select: none;
        font-size: 1.2em;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #visual { 
        -webkit-user-select: none; 
    }
}
</style>
<body>

// shared ad blocks between 7-Up, A&W, Coke, Dr Pepper, Pepsi brands
var matrix = [ 
    [ 5, 0, 1, 1, 3 ],
    [ 0, 0, 0, 1, 0 ],
    [ 1, 0, 1, 1, 0 ],
    [ 1, 1, 1, 2, 0 ],
    [ 3, 0, 0, 0, 3 ]
];

var array = [ "Makanan", "Gadget", "Rumah tangga", "Alat kantor", "Handphone" ];

var rotation = -0.7;

var chord_options = {
    "gnames": array,
    "rotation": rotation,
    "colors": ["#034e7b","#feb24c","#b10026","#238443","#fdbb84","#ffffb2","#fed976"]
};

function Chord(container, options, matrix) {

// initialize the chord configuration variables
        var config = {
            width: 640,
            height: 560,
            rotation: 0,
            textgap: 26,
            colors: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"]
        };
        
        // add options to the chord configuration object
        if (options) {
            extend(config, options);
        }
        
        // set chord visualization variables from the configuration object
        var offset = Math.PI * config.rotation,
            width = config.width,
            height = config.height,
            textgap = config.textgap,
            colors = config.colors;
        
        // set viewBox and aspect ratio to enable a resize of the visual dimensions 
        var viewBoxDimensions = "0 0 " + width + " " + height,
            aspect = width / height;
        
        if (config.gnames) {
            gnames = config.gnames;
        } else {
            // make a list of names
            gnames = [];
            for (var i=97; i<matrix.length; i++) {
                gnames.push(String.fromCharCode(i));
            }
        }

// start the d3 magic
        var chord = d3.layout.chord()
            .padding(.05)
            .sortSubgroups(d3.descending)
            .matrix(matrix);

var innerRadius = Math.min(width, height) * .31,
            outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal()
            .domain(d3.range(matrix.length-1))
            .range(colors);
    
        var svg = d3.select("body").append("svg")
            .attr("id", "visual")
            .attr("viewBox", viewBoxDimensions)
            .attr("preserveAspectRatio", "xMinYMid")    // add viewBox and preserveAspectRatio
            .attr("width", width)
            .attr("height", height)
          .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll("g.group")
            .data(chord.groups)
          .enter().append("svg:g")
            .attr("class", "group");

g.append("svg:path")
            .style("fill", function(d) { return fill(d.index); })
            .style("stroke", function(d) { return fill(d.index); })
            .attr("id", function(d, i) { return "group" + d.index; })
            .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle))
            .on("mouseover", fade(.1))
            .on("mouseout", fade(1));

g.append("svg:text")
            .each(function(d) {d.angle = ((d.startAngle + d.endAngle) / 2) + offset; })
            .attr("dy", ".35em")
            .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
            .attr("transform", function(d) {
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                    + "translate(" + (outerRadius + textgap) + ")"
                    + (d.angle > Math.PI ? "rotate(180)" : "");
              })
            .text(function(d) { return gnames[d.index]; });

svg.append("g")
            .attr("class", "chord")
          .selectAll("path")
            .data(chord.chords)
          .enter().append("path")
            .attr("d", d3.svg.chord().radius(innerRadius).startAngle(startAngle).endAngle(endAngle))
            .style("fill", function(d) { return fill(d.source.index); })
            .style("opacity", 1)
          .append("svg:title")
            .text(function(d) { 
                return  d.source.value + "  " + gnames[d.source.index] + " shared with " + gnames[d.target.index]; 
            });
    
        // helper functions start here
        
        function startAngle(d) {
            return d.startAngle + offset;
        }

function endAngle(d) {
            return d.endAngle + offset;
        }
        
        function extend(a, b) {
            for( var i in b ) {
                a[ i ] = b[ i ];
            }
        }

// Returns an event handler for fading a given chord group.
        function fade(opacity) {
            return function(g, i) {
                svg.selectAll(".chord path")
                    .filter(function(d) { return d.source.index != i && d.target.index != i; })
                    .transition()
                    .style("opacity", opacity);
            };
        }
        
        
        window.onresize = function() {
            var targetWidth = (window.innerWidth < width)? window.innerWidth : width;
            
            var svg = d3.select("#visual")
                .attr("width", targetWidth)
                .attr("height", targetWidth / aspect);
        }

}

window.onload = function() {
    Chord(visual, chord_options, matrix);
}

d3.select(self.frameElement).style("height", "600px");

</script>
<h1>Shared Ad Blocks by Brand</h1>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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