O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing the visualization

We draw the visualization in the show function:

show(toShow);  function show(toShow) {   ... }

Drawing this matrix is done in a couple of steps:

  1. First, we create the matrix rows as g elements.
  2. For each element in a matrix row, we create a rectangle.
  3. Once the rectangles are drawn, we add the text elements at the top.
  4. And finally, we add the text elements at the bottom.

The first thing we do is drawing the individual rows:

   // we first select all the rows and map the data based on id    var row = svg.selectAll(".row")        .data(toShow, function (d) { return d.id });     // for the newly added rows, we add a group to contain the name and the rectangles    var newRows = row.enter()        .append("g")        .attr("class", "row")  .on("click", ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required