title: How to pivot a table with d3.js?
body: <p>Consider the following tabular data (just an example):</p>
  
  <pre><code>A,B,C,D,x,y,z
  a0,b0,c0,d0,0.007,0.710,0.990
  a0,b0,c0,d1,0.283,0.040,1.027
  a0,b0,c1,d0,0.017,0.688,2.840
  a0,b0,c1,d1,0.167,0.132,2.471
  a0,b1,c0,d0,0.041,0.851,1.078
  a0,b1,c0,d1,0.235,1.027,1.027
  a0,b1,c1,d0,0.037,0.934,2.282
  a0,b1,c1,d1,0.023,1.049,2.826
  a1,b0,c0,d0,0.912,0.425,1.055
  a1,b0,c0,d1,0.329,0.932,0.836
  a1,b0,c1,d0,0.481,0.681,0.997
  a1,b0,c1,d1,0.782,0.595,2.294
  a1,b1,c0,d0,0.264,0.918,0.857
  a1,b1,c0,d1,0.053,1.001,0.920
  a1,b1,c1,d0,1.161,1.090,1.470
  a1,b1,c1,d1,0.130,0.992,2.121
  </code></pre>
  
  <p>Note that each combination of distinct values for columns <code>A</code>, <code>B</code>, <code>C</code>, and <code>D</code> occurs exactly once in this table.  Hence, one can think of this subset of columns as the "key columns", and the remaining columns as the "value columns".</p>
  
  <p>Let's say this data is in some file <code>data.csv</code>, and that we read this file in with <code>d3.csv</code>, into the callback argument <code>data</code>, like so:</p>
  
  <pre><code>d3.csv('data.csv', function (error, data) {
      ...
  });
  </code></pre>
  
  <p>I'm looking for a convenient <code>d3.js</code> manipulation to transform <code>data</code> so that the <code>C</code> column is "pivoted".  By this I mean that the "value" columns of the transformed table are those obtained by "crossing" the values of the <code>C</code> column with the original "value" columns, <code>x</code>, <code>y</code>, and <code>z</code>.  In other words, in csv format, the transformed table would look like this:</p>
  
  <pre><code>A,B,D,x_c0,x_c1,y_c0,y_c1,z_c0,z_c1
  a0,b0,d0,0.007,0.017,0.710,0.688,0.990,2.840
  a0,b0,d1,0.283,0.167,0.040,0.132,1.027,2.471
  a0,b1,d0,0.041,0.037,0.851,0.934,1.078,2.282
  a0,b1,d1,0.235,0.023,1.027,1.049,1.027,2.826
  a1,b0,d0,0.912,0.481,0.425,0.681,1.055,0.997
  a1,b0,d1,0.329,0.782,0.932,0.595,0.836,2.294
  a1,b1,d0,0.264,1.161,0.918,1.090,0.857,1.470
  a1,b1,d1,0.053,0.130,1.001,0.992,0.920,2.121
  </code></pre>
  
  <p>In case there's no easy way to do this, a simpler (but still useful) variant would be to do a similar transformation after first discarding all but one of the "value" columns.  For example, after discarding the <code>x</code> and <code>y</code> columns, pivoting the <code>C</code> column would produce (in csv format):</p>
  
  <pre><code>A,B,D,c0,c1
  a0,b0,d0,0.990,2.840
  a0,b0,d1,1.027,2.471
  a0,b1,d0,1.078,2.282
  a0,b1,d1,1.027,2.826
  a1,b0,d0,1.055,0.997
  a1,b0,d1,0.836,2.294
  a1,b1,d0,0.857,1.470
  a1,b1,d1,0.920,2.121
  </code></pre>
  
  <p>The simplification lies in that now the original value column (<code>z</code>) can be simply replaced by a set of columns named after the values (<code>c0</code> and <code>c1</code> in this case) in the column that was pivoted (<code>C</code>).</p>