title: converting an array of objects to a different structure of array of objects
body: <p>how do i turn this dataset </p>
  
  <pre><code>file = 
  [ 
  { 
  DeviceName: 'DeviceName1',
  counter1: '85%',
  counter2: '87%',
  counter3: '75%',
  counter4: '63%' },
  { 
  DeviceName: 'DeviceName2',
  counter1: '85%',
  counter2: '87%',
  counter3: '75%',
  counter4: '63%' 
  } 
  ]
  </code></pre>
  
  <p>into this </p>
  
  <pre><code>data = [
        {
          key: "Device1",
          color: "#51A351",
          values:
            [      
              { x : "counter1", y : '85%' },
              { x : "counter2", y : '87%' },
              { x : "counter3", y : '75%' },
              { x : "counter4", y : '63%' }
            ]
        },
        {
          key: "Device2",
          color: "#BD362F",
          values:
            [      
              { x : "counter1", y : '85%' },
              { x : "counter2", y : '87%' },
              { x : "counter3", y : '75%' },
              { x : "counter4", y : '63%' }
            ]
        }
      ];
  </code></pre>
  
  <p>this is my attempt </p>
  
  <pre><code>file.map(function(d,i){return {key:d.DeviceName,color:i}})
  </code></pre>
  
  <p>but this only gets me this far: </p>
  
  <pre><code>[ { key: 'DeviceName1', color: 0 },
    { key: 'DeviceName2', color: 1 } ]
  </code></pre>