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.
| Year | Population |
| 1900 | 3500 |
| 1925 | 22000 |
| 1950 | 38500 |
| 1975 | 186000 |
| 2000 | 324000 |
| 2025 | 446250 |
Suppose you want a bar chart showing the data in figure 1 (on the right). Then the value for x will be [1900, 1925, 1950, 1975, 2000, 2025] and the value for y would be [3500, 22000, 38500, 186000, 324000, 446250]. Thus, the code to produce a chart with that data would be the following:
var info = {x:[1900, 1925, 1950, 1975, 2000, 2025], y:[3500, 22000, 38500, 186000, 324000, 446250] }; var element = d3.select("#chart"); var c = new BarChart(element, info);
In the above examples, the x and y values are ented as arrays. Data can also be entered using a function. The chart in figure 2 could have also been rendered with the following code:
var info = {x:function(i) {return i;}, y:function(x) {return x**2;}, range:[1,6,1] }; var element = d3.select("#chart"); var c = new BarChart(element, info);
Note that in the above code, the info object contains the attribute range. This is required when the value for x is a function. The range attribute indicates on which values of i the function for x will be called. Here, range is set to [1,6,1], so the funtion will be called for the values 1, 2, 3, 4, 5, and 6. The first number in the range attribute indicates the value with which to begin. The second number indicates the value with which to end. The third number is how many numbers to skip. Instead of [1900, 1925, 1950, 1975, 2000, 2025], the x value for the data in figure 2 could have been entered as a function as function(i) {return i;} with the range attribute set to [1900,2025,25]. This means to start at 1900, and skip by 25 until it gets to 2025.
The values for x and y do not have to be entered the same way. One could be entered as an array and the other a function.
Although supplying the info object only the x and y values is enough to produce a graph, the result is not great. Various options can be used to make the chart look better.
The options xAxisPadding and yAxisPadding indicate how much space to give to draw the increments at the axes. In figure 1, no space is given, so the axis increments are drawn on the same space to draw the bars of the chart. The x increments at the bottom of the chart cannot even be seen (unless you select the text with the mouse) because the black text is drawn on top of the black bars. The following code produces the chart in figure 3:
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25 }; var element = d3.select("#chart"); var c = new BarChart(element, info);
Here you can see the values 1 to 6 at the bottom of the chart because there is space to display the axis increments. There are also options xEdgePadding and yEdgePadding which indicate how much space to leave at the top and right of the chart, respectively. The code below includes values for xEdgePadding and yEdgePadding and the result is shown on figure 4.
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15 }; var element = d3.select("#chart"); var c = new BarChart(element, info);
On figure 3, the last value (36) gets cut off because there is no space to print it, but the xEdgePadding option in figure 4 provides space for it.
The attribute yIncrement indicates how much to skip for each increment on the y-axis. Note that there is no equivalent for the x-axis since it prints the value for each bar on the x-axis. The option numberOfIncrements indicates how many increments should be on the y-axis. Only one of these two options should be set for each chart. If both options are set, yIncrement will override numberOfIncrements. If neither option is set, the default is to draw ten increments.
The code below draws the chart in figure 5:
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15, numberOfIncrements:6 }; var element = d3.select("#chart"); var c = new BarChart(element, info);
The code below draws the chart in figure 6:
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15, yIncrement:4 }; var element = d3.select("#chart"); var c = new BarChart(element, info);
By default, the program scales the chart so that the highest bar extends to the top of the chart, but this can be manually overridden with the yScale attribute. The scale is measured in units per pixel. So if you want the chart to go up to a value of 1000 and there are 250 pixels from the x-axis to the top of the chart, set yScale to 4. The following code uses a yScale of 2 and the result is shown in figure 7:
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15, yIncrement:10, yScale:2 };
Figure 7 has a height of 200 pixels. Since it leaves 25 pixels for the x-axis and 15 pixels at the edge at the top, the chart consists of 160 pixels. Since yScale is 2, this chart goes up to 80.
The attribute barWidth determines how many pixels wide a bar is, and barSpace determines how many pixels are spaced between bars. If these options are not given, then by default the bars are 15 pixels wide and five pixels apart. The output of the code below is shown in figure 8.
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15, barWidth:30, barSpace:1 };
The attribute colors takes an array as its value and each element in the array is a string (a sequence of characters/symbols enclosed in quotation marks). Colors are usually represented by a hexadecimal number. The hexadecimal system is based on the number 16, instead of the base ten number system we are used to. Since hexadecimal requires 16 digits, the letters A to F are used to represent the remaining six digits not present in the base ten number system. The the color's code starts with a pound symbol # and is followed by six hexadecimal digits. Colors on a computer are generated by combining various quantities of red, green, and blue light. The six digits of the color code represent the red, green, and blue values, with the first two representing red, the middle two representing green, and the last two representing blue. For example, the code "#C060FF" represents a lavender color. The digits C0 represent red, 60 represent green, and FF represent blue.
Fortunately, JavaScript recognizes the names of a number of colors, so it is not necessary to know the code of a particular color. The result of the code below is shown in figure 9.
var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36], xAxisPadding:25, yAxisPadding:25, xEdgePadding:15, yEdgePadding:15, colors:["red", "orange", "green", "blue"] };
If there are fewer colors in the colors attribute than there are bars in the chart, it cycles back to the beginning of the list of colors. You can put only one color in the list if you want all the bars to be the same color, but the value must still be an array, even if the array only has one value. So for example if you want all bars in the chart to be brown, you would include this declaration in the info object:
colors:["brown"]
The square brackets [] above are required to make it an array. A chart like figure 9 except it includes the color declaration above is shown in figure 10.