The data and options are included within a JavaScript object. The data for your independent variable, which is displayed on the horizontal axis, is the value for the x attribute, and the data for the dependent variable, which is displayed on the vertical axis, is the value for the y attribute.
The x and y attributes can be an array of values or an array of arrays. Making them an array of arrays would create multiple lines on the same graph. Figure 1 shows a graph where x and y are a single array that has one line plotted on it. Figure 2 shows a graph where x and y are each an array of arrays with three lines plotted on it. The code for figure 1 is as follows:
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36] }; var element = d3.select("#chart"); var c = new LineChart(element, info);
The code for figure 2 is:
var info = {x:[[1,3,4,7],[1,2,3,4,5],[3,6,7]], y:[[14,21,20,10],[7,11,9,15,20],[18,2,11]], colors:["red","green","blue"] }; var element = d3.select("#chart"); var c = new LineChart(element, info);
In the above code, x and y are each arrays with three arrays as elements. The nth array in x corresponds to the nth array of y. If the same values of x are to be used for each array of data in y, then x can simply be an array of numeric values. An example of this is shown in the code below with the result in figure 3:
var info = {x:[1,2,3,4,5,6], y:[[14,21,20,10,16,3],[7,11,9,15,20,1],[18,2,11,0,10,19]], colors:["red","green","blue"] }; var element = d3.select("#chart"); var c = new LineChart(element, info);