Bubble Matrix Chart V4

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

body {
	background-color: #F1F3F3;
}
  
text {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 900;
    pointer-events: none;
}

circle {
    cursor: pointer;
    fill-opacity: 0.9;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis path,
.x.axis line {
    display: none;
}

.y.axis path,
.y.axis line {
    display: none;
}
</style>
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
  var margin = { top: 10, right: 20, bottom: 20, left: 40 };
        var width = 400 - margin.left - margin.right;
        var height = 600 - margin.top - margin.bottom;
        var clickToggle = false;
        var color = d3.scaleOrdinal(["#FA8334", "#AFFC41", "#19647E", "#7FDDDD", "#949396", "#DCF763", "#00C6D0", "#C1C1C1", "#666666", "#FDCDAE"]);
        var radius = d3.scaleLinear()
            .domain([0, 280])
            .range([15, 23]);

var svg = d3.select(".chart")
          .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .call(responsivefy)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand().rangeRound([0, width]);
        var y = d3.scaleBand().rangeRound([height, 0]);

d3.tsv("data.tsv", function (error, data) {

var grpNames = d3.keys(data[0]).filter(function (key) { return key !== "Deal Type"; });

data.forEach(function (d) {
                d.groups = grpNames.map(function (name) { return { name: name, value: +d[name] }; });
                d.groups.sort(function (x, y) { return d3.ascending(y.value, x.value); });
            });

y.domain(data.map(function (d) { return d["Deal Type"]; }));
            x.domain(grpNames);

color.domain(grpNames);

var rows = svg.selectAll(".row")
                .data(data)
                .enter()
              .append("g")
                .attr("class", "row")
                .attr("transform", function (d) { return "translate(0," + y(d["Deal Type"]) + ")"; });

var cells = rows.selectAll(".cell")
                .data(function (d) { return d.groups; })
                .enter()
              .append("g")
                .attr("transform", function (d, i) { return "translate(" + i * x.bandwidth() + ",0)"; })
                .attr("class", "cell");

var text = cells.append("text")
                .attr("class", function (d) { return d.className = d.name.replace(/[\ ,/-]+/g, "-").toLowerCase(); })
                .attr("text-anchor", "middle")
                .style("fill", "#ffffff")
                .attr("dx", x.bandwidth() / 2)
                .attr("dy", y.bandwidth() / 2 + 4)
                .text(function (d) { return d.value !== 0 ? d.value : ''; });

svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x))
                .selectAll("text")
                .remove();

svg.append("g")
                .attr("class", "y axis")
                .call(d3.axisLeft(y));

var legend = d3.select(".legend")
              .append("svg")
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(0," + margin.top + ")");

var legendG = legend.selectAll(".legendRow")
                .data(data[0].groups)
                .enter()
              .append("g")
                .attr("class", "legendRow")
                .attr("transform", function (d, i) { return "translate(0," + i * y.bandwidth() + ")"; });

legendG.append("circle")
                .style('fill', function (d) { return color(d.name); })
                .attr("cx", 20)
                .attr("cy", 20)
                .attr("r", 15)
                .on("click", highlightCircles);

legendG.append("text")
                .attr("dx", x.bandwidth() + 10)
                .attr("dy", y.bandwidth() / 2)
                .attr("text-anchor", "start")
                .text(function (d) { return d.name });

});

function responsivefy(svg) {
            var container = d3.select(svg.node().parentNode);
            var width = parseInt(svg.style("width"));
            var height = parseInt(svg.style("height"));
            var aspect = width / height;
            svg.attr("viewBox", "0 0 " + width + " " + height)
                .attr("perserveAspectRatio", "xMinYMid")
                .call(resize);
            function resize() {
                var targetWidth = parseInt(container.style("width"));
                svg.attr("width", targetWidth);
                svg.attr("height", Math.round(targetWidth / aspect));
            }
            d3.select(window).on("resize." + container.attr("id"), resize);
        }
</script>

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

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