D3 Examples - d3 Correlogram

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <style>
    svg {
      font: 12px sans-serif;
      text-anchor: middle;
    }
    
    rect {
      stroke: lightgray;
      stoke-width: 1px;
      fill: none;
    }
    
    .y.axis path{
      fill: none;
      stroke: none;
    }
    
  </style>
</head>
​
<body>
  <script>
    d3.csv("data.csv", function(error, rows) {
      var data = [];
​
      rows.forEach(function(d) {
        var x = d[""];
        delete d[""];
        for (prop in d) {
          var y = prop,
            value = d[prop];
          data.push({
            x: x,
            y: y,
            value: +value
          });
        }
      });
​
      var margin = {
          top: 25,
          right: 80,
          bottom: 25,
          left: 25
        },
        width = 500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        domain = d3.set(data.map(function(d) {
          return d.x
        })).values(),
        num = Math.sqrt(data.length),
        color = d3.scale.linear()
          .domain([-1, 0, 1])
          .range(["#B22222", "#fff", "#000080"]);
​
      var x = d3.scale
        .ordinal()
        .rangePoints([0, width])
        .domain(domain),
      y = d3.scale
        .ordinal()
        .rangePoints([0, height])
        .domain(domain),
      xSpace = x.range()[1] - x.range()[0],
      ySpace = y.range()[1] - y.range()[0];
​
      var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
      var cor = svg.selectAll(".cor")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "cor")
        .attr("transform", function(d) {
          return "translate(" + x(d.x) + "," + y(d.y) + ")";
        });
        
      cor.append("rect")
        .attr("width", xSpace)
        .attr("height", ySpace)
        .attr("x", -xSpace / 2)
        .attr("y", -ySpace / 2)
​
      cor.filter(function(d){
          var ypos = domain.indexOf(d.y);
          var xpos = domain.indexOf(d.x);
          for (var i = (ypos + 1); i < num; i++){
            if (i === xpos) return false;
          }
          return true;
        })
        .append("text")
        .attr("y", 5)
        .text(function(d) {
          if (d.x === d.y) {
            return d.x;
          } else {
            return d.value.toFixed(2);
          }
        })
        .style("fill", function(d){
          if (d.value === 1) {
            return "#000";
          } else {
            return color(d.value);
          }
        });
​
        cor.filter(function(d){
          var ypos = domain.indexOf(d.y);
          var xpos = domain.indexOf(d.x);
          for (var i = (ypos + 1); i < num; i++){
            if (i === xpos) return true;
          }
          return false;
        })
        .append("circle")
        .attr("r", (width / (num * 2) - 5))
        .style("fill", function(d){
          if (d.value === 1) {
            return "#000";
          } else {
            return color(d.value);
          }
        });
        
    var aS = d3.scale
      .linear()
      .range([-margin.top + 5, height + margin.bottom - 5])
      .domain([1, -1]);
​
    var yA = d3.svg.axis()
      .orient("right")
      .scale(aS)
      .tickPadding(7);
​
    var aG = svg.append("g")
      .attr("class", "y axis")
      .call(yA)
      .attr("transform", "translate(" + (width + margin.right / 2) + " ,0)")
​
    var iR = d3.range(-1, 1.01, 0.01);
    var h = height / iR.length + 3;
    iR.forEach(function(d){
        aG.append('rect')
          .style('fill',color(d))
          .style('stroke-width', 0)
          .style('stoke', 'none')
          .attr('height', h)
          .attr('width', 10)
          .attr('x', 0)
          .attr('y', aS(d))
      });
    });
    
  </script>
</body>
​
</html>
    