How do I structure the Data array for the following d3 chart, in order to populate with real data - d3.js

Question

http://nvd3.org/ghpages/scatter.html
I want to build a chart thats very similar to the above example. I'm still in the beginning phases and am having a little difficulty trying to input my own data, either as a CSV or inline in the code.
I'm pretty sure that the code below is responsible for generating fake data to populate the chart, however, I can't seem to find the correct way to input real data. I've read over the "data" reference portions of the documentation on the d3 site and tried implementing the code but have not been able to get it to work. I believe the problem is structuring. The question is, how do I find out how I need to structure the data array and use that, as input for the data?
Here is the live example of where I'm building my version of the chart.
http://goo.gl/XHela
Here is the code that is generating the random data:
function randomData(groups, points) { //# groups,# points per group
var data = [],
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
random = d3.random.normal();
for (i = 0; i < groups; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (j = 0; j < points; j++) {
data[i].values.push({
x: random(),
y: random(),
size: Math.random(),
shape: shapes[j % 6]
});
}
}
return data;
}
Before your response I tried to output the results of the function randomData to the page, using the following code, (the same just modified).
function see(groups, points) { //# groups,# points per group
var data = [],
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
random = d3.random.normal();
for (i = 0; i < groups; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (j = 0; j < points; j++) {
data[i].values.push({
x: random(),
y: random(),
size: Math.random(),
shape: shapes[j % 6]
});
}
}
data.toString();
var x=document.getElementById("demo");
x.innerHTML=data;
}
But on the page the output is
[object Object],[object Object],[object Object],[object Object]
I guess the follow up question is how do I use my own data for this chart and not generated data?

Answer 1

You can see how the data is structured by stepping through the code using Chrome Developer tools' console in Chrome. In the page you linked above (first link) Pressing Ctrl + Shift + C in Windows or Command + Shift + c in OSX will bring up this window. Click on Sources and find the file scatter.js from the list of files on the left. Set a break point at the line: return data. Referesh the page. Code execution will pause at that line. Now go the the Console and type data. The data used for the chart will be output. You can browse the structure and get an idea of how it was created.
You should see something like this in the end: