A Pen by Damien Nozay.

index.html

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

<div class="chart"/>

JLwsp.markdown

JLwsp

A Pen by Damien Nozay on CodePen.

License.

script.js

function compare_name(a, b) {
  if (a.name > b.name)
    return 1;
  if (a.name < b.name)
    return -1;
  // a must be equal to b
  return 0;
}

var width=500, height=250, margin={left: 80, top:80, right:0, bottom: 0};
var x = d3.scale.ordinal().rangeBands([0, width]),
    y = d3.scale.ordinal().rangeBands([0, height]);

var data = [
  { testcase:"testcase.9", build:"build #9", result:"INVALID" },
  { testcase:"testcase.9", build:"build #9", result:"INVALID" },
  { testcase:"testcase.1", build:"build #1", result:"PASS" },
  { testcase:"testcase.1", build:"build #2", result:"PASS" },
  { testcase:"testcase.1", build:"build #3", result:"PASS" },
  { testcase:"testcase.2", build:"build #4", result:"PASS" },
  { testcase:"testcase.2", build:"build #5", result:"PASS" },
  { testcase:"testcase.2", build:"build #6", result:"PASS" },
  { testcase:"testcase.3", build:"build #7", result:"PASS" },
  { testcase:"testcase.3", build:"build #8", result:"PASS" },
  { testcase:"testcase.4", build:"build #1", result:"FAIL" },
  { testcase:"testcase.4", build:"build #2", result:"FAIL" },
  { testcase:"testcase.4", build:"build #3", result:"FAIL" },
  { testcase:"testcase.4", build:"build #4", result:"FAIL" },
  { testcase:"testcase.4", build:"build #5", result:"FAIL" },
  { testcase:"testcase.4", build:"build #6", result:"FAIL" },
  { testcase:"testcase.4", build:"build #7", result:"FAIL" },
  { testcase:"testcase.4", build:"build #8", result:"FAIL" }
];

var testcases = d3.map();
var builds = d3.map();

// set item to value if it does not exist
// return value stored (see python's setdefault())
function setdefault(map, key, value) {
  if (! map.has(key)) {
    map.set(key, value);
  }
  return map.get(key);
}

// populate testcases and builds
// testcases[tescase][build] == builds[build][testcase]
data.forEach(function(elem, index, arr) {
  var t = setdefault(testcases, elem.testcase, 
                     { name: elem.testcase, results: d3.map() });
  var b = setdefault(builds, elem.build,
                     { name: elem.build, results: d3.map() });
  var r = setdefault(t.results, elem.build, []);
  setdefault(b.results, elem.testcase, r);
  r.push(elem);
});

testcases.values().sort(compare_name).forEach(function(value, i) {
  value.index = i;
});

builds.values().sort(compare_name).forEach(function(value, i) {
  value.index = i;
});

x.domain(d3.range(builds.size()));
y.domain(d3.range(testcases.size()));

var svg = d3.select(".chart").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 + ")");

  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);

  var row = svg.selectAll(".row")
    .data(testcases.entries(), function(d) { return d.key; })
    .enter().append("g")
      .attr("class", "row")
      .attr("transform", function(d, i) { 
        return "translate(0," + y(d.value.index) + ")"; })
      .each(row);

  row.append("line")
      .attr("x2", width);

  row.append("text")
      .attr("x", -6)
      .attr("y", x.rangeBand() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "end")
      .text(function(d, i) { return d.key; });

  var column = svg.selectAll(".column")
    .data(builds.entries(), function(d) { return d.key; })
    .enter().append("g")
      .attr("class", "column")
      .attr("transform", function(d, i) {
        return "translate(" + x(d.value.index) + ")rotate(-90)"; });

  column.append("line")
      .attr("x1", -height);

  column.append("text")
      .attr("x", 6)
      .attr("y", x.rangeBand() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "start")
      .text(function(d, i) { return d.key; });

  function row(row) {
    var results = row.value.results;
    var cell = d3.select(this).selectAll(".cell")
        .data(results.entries(), function(d) { return d.key; })
        .enter().append("rect")
        .attr("class", "cell")
        .attr("x", function(d) {
          return x(builds.get(d.key).index); })
        .attr("class", function(d) {
          if (d.value.length == 0) {
            return 'INVALID';
          }
          var result = d.value[0].result;
          d.value.forEach(function(elem, i) {
              if (elem.result == 'FAIL') { result = 'FAIL'; }
          });
          return result;
        })
        .attr("width", x.rangeBand())
        .attr("height", y.rangeBand())
  }

style.css

svg {
  font: 10px sans-serif;
}

.text {
  color: #000;
  fill: #55f;
  display: block;
  font: 10px sans-serif;
}

.background {
  fill: #eee;
}

line {
  stroke: #fff;
}

.PASS {
  fill: green;
}

.FAIL {
  fill: red;
}