Question

I would like to create a visualisation like http://bost.ocks.org/mike/miserables/ . In this implementation, each rectangle is filled with a color and a relevant opacity. To fill a specific rectangle the developer gives either e.g. x=”579.7402597402597″ or y=… and the dimensions of the rectangle.

Do you know or can you guess what the developer uses to dynamically compute x and y for the relevant pair of words in each case?

I apologize if the answer to my question is obvious or if it is embedded in the code and I can’t see it.

Thank you.

Answer 1

Have a look at the source code. The two relevant parts are

var row = svg.selectAll(".row")
  .data(matrix)
.enter().append("g")
  .attr("class", "row")
  .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
  .each(row);

and

var cell = d3.select(this).selectAll(".cell")
    .data(row.filter(function(d) { return d.z; }))
  .enter().append("rect")
    .attr("class", "cell")
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand())
    .attr("height", x.rangeBand())
    .style("fill-opacity", function(d) { return z(d.z); })
    .style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

The coordinates are calculated by passing the the cell index / x attribute of the data to a scale, namely

var x = d3.scale.ordinal().rangeBands([0, width]);