D3.js binding an object to data and appending for each key

Posted by frshca on Stack Overflow See other posts from Stack Overflow or by frshca
Published on 2012-10-16T21:45:39Z Indexed on 2012/10/16 23:00 UTC
Read the original article Hit count: 396

Filed under:
|

I'm a D3.js newbie and I'm learning how to play around with data.

Let's say I have an object with names as keys, and each key has an array of numbers like this:

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]
};

For each user, I would like to append an SVG object and then plot the line with the array of values for that user.

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:

First I should create the line

var line = d3.svg.line().interpolate('basis');

Then I want to bind the data to my body and append an svg element for each key:

d3.select('body')
    .selectAll('svg')
    .data(userdata)
    .enter()
    .append('svg')
    .append(line)
    .x(function(d, i) { return i; })
    .y(function(d) { return d[i]; });

So am I close??

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about d3.js