title: D3.js binding an object to data and appending for each key
body: <p>I'm a D3.js newbie and I'm learning how to play around with data.</p>
  
  <p>Let's say I have an object with names as keys, and each key has an array of numbers like this:</p>
  
  <pre><code>var userdata = {
      'John' : [0, 1, 3, 9, 8, 7],
      'Harry': [0, 10, 7, 1, 1, 11],
      'Steve': [3, 1, 4, 4, 4, 17],
      'Adam' : [4, 77, 2, 13, 11, 13]
  };
  </code></pre>
  
  <p>For each user, I would like to append an SVG object and then plot the line with the array of values for that user.</p>
  
  <p>So here is my assumption of how that would look based on tutorials, but I know it is incorrect. This is to show my limited knowledge and give better understanding of what I'm doing:</p>
  
  <p>First I should create the line</p>
  
  <pre><code>var line = d3.svg.line().interpolate('basis');
  </code></pre>
  
  <p>Then I want to bind the data to my body and append an svg element for each key:</p>
  
  <pre><code>d3.select('body')
      .selectAll('svg')
      .data(userdata)
      .enter()
      .append('svg')
      .append(line)
      .x(function(d, i) { return i; })
      .y(function(d) { return d[i]; });
  </code></pre>
  
  <p>So am I close??</p>