Our templates will use pre-composed React Components that will take an object as props. This object will hold the raw data for your template as well as information that will help you customize your chart.

After building up this object, require in our library, create the React Component D3 template that you would like to use, then set the state.

Lastly, pass the built up object as props to your React D3 Library Template Component, and you're good to go.

###Build Your Object ###Area Charts ###Bar Charts ###Line Charts ###Pie Charts ###Scatter Plots

##data Depending on which template you have chosen, we will guide you through building an object that when passed to the template component, will automate many of D3's functionality.

Make a file for your object. We will refer to this object as data from now on.

const data = {}

####.width(value), .height(value) All objects will have a height and width property that will describe the size of the svg element you will be rendering. You don't need to take into account margins, as there is a property for that as well. Keep in mind that the values will represent pixels, but should be numbers,

500 or 750

as opposed to using a string indicating pixels.

data.width = 500;
data.height = 750;

Next we will dive in to each individual template and the properties you can use to customize them.

##Area Chart Important! Don't forget to build your data object before proceeding to customizing your Template.

####.dataset(array) We will be providing the data for our Area Chart as an array of objects. The first property of each object is the x-value and the second is the y-value. Keep in mind, the x-values should be sorted in ascending order.

data.dataset = [
  {xValue : 1, yValue: 40},
  {xValue : 2, yValue: 63}, 
  {xValue : 3, yValue: 52}, 
  {xValue : 4, yValue: 59}, 
  {xValue : 5, yValue: 79},
  ...
]

####.x_display_name(string), .y_display_name(string) For Area Chart, we can customize the axis label names using these two properties.

// Display names to run along x and y axis
data.x_display_name = 'X VALUE';
data.y_display_name = 'Y VALUE';

####.area_class(string) We can also provide class names to elements so we can reference them in our CSS file: .area_class will apply a class name to the area of the chart filled in by the data. As an example, we are giving our area a class name of 'area' and can now make stylistic changes to it within our CSS. data.area_class = 'area';

####.axisLine_class(string) We can also do the same for our axis lines. data.axisLine_class = 'axisLine'; (back to top)

##Bar Chart Important! Don't forget to build your data object before proceeding to customizing your Template.

####.dataset(array) We will be providing the data for the Bar Chart as an array of objects. Each object will have a label property whose value is the name, or category, of that specific bar. The other property will be a value property that will describe the height of the bar.

data.dataset = [
  {label: apples, value: 25},
  {label: oranges, value: 30},
  {label: surfboards, value: 150},
  ...
]

####.margins(object) For the Bar Chart, we can customize the margins of the svg elements by providing values that will be subtracted from the overall svg size.

data.margins = {top: 20, right: 10, bottom: 0, left: 10}

Properties of data.margin can only be top, right, bottom, or left. The values of these properties can only be numerical, non-negative values. Also remember that if your margins in one direction exceed your svg size, you will not see your visualization!

####.yAxisLabel(string) For Bar Chart, we can customize the y axis label name using this property.

data.yAxisLabel = 'Y VALUE';

####.fill(optional) You can also describe the colors for each bar in the graph, or designate a color for all bars. Remember, all colors must be CSS appropriate and also strings. The first element in data.fill will act as the default color for all bars.

data.fill = ['lemonChiffon']

All bars will now be filled with your excellent choice!

If you add more colors, each subsequent color will then fill the next bar, and will revert back to the default color if there are less colors than data points.

data.fill['lemonChiffon', 'aliceblue', 'sandybrown', 'darksalmon']

This would have your first bar filled with the lemonChiffon color, the next with aliceblue, the third bar filled with sandybrown, and the fourth bar with darksalmon. If there are more bars after that, they will be filled with the default color that you have established which in this example is lemonChiffon.

*If you do not use data.fill, the default color of bars will be steel blue.

####.ticks(value) This will describe the space between ticks on your y-axis. The larger the value, the larger the space between y-axis ticks. The smaller the value, the smaller the space.

data.ticks = 10;

Based on your data ranges, this number should appropriately reflect the spacing you would like.

####.barClass(string) We can also provide class names to elements so we can reference them in our CSS file: data.barClass will apply a class name to the svg element surrounding the bar chart. As an example, we are giving our chart a class name of 'barChart' and can now make stylistic changes to it within our CSS.

data.barClass = 'barChart';

(back to top)

##Line Chart Important! Don't forget to build your data object before proceeding to customizing your Template.

####.dataset(array) We will be providing the data for our Line Chart as an array of objects which will describe the line over a period of time. As the majority of line graphs describe some type of data through the course of time, this template will only be taking data in the appropriate javascript date format (%d-%b-%y). '25-Apr-16' We will be adding more available formats very very soon!

To enter the data, each object will have a time property whose value will be the appropriate data format, and it will also have a value property that will describe the height of the line for that moment in time.

data.dataset = [
  {time: '24-Apr-07', value: 93.24},
  {time: '25-Apr-07', value: 95.35 },
  {time: '26-Apr-07', value: 98.84 },
  {time: '27-Apr-07', value: 99.92 },
  {time: '30-Apr-07', value: 99.80 },
  {time: '1-May-07', value: 99.47},
  ...
]

####.margins(object) For the Line Chart, we can customize the margins of the svg elements by providing values that will be subtracted from the overall svg size.

data.margins = {top: 20, right: 10, bottom: 0, left: 10}

Properties of data.margin can only be top, right, bottom, or left. The values of these properties can only be numerical, non-negative values. Also remember that if your margins in one direction exceed your svg size, you will not see your visualization!

####.orientXTicks(string) We can describe the orientation of the x-axis ticks by specifying 'bottom' or 'top'. This will put the text of the ticks either above or below the x-axis.

data.orientXTicks = 'bottom'

####.orientYTicks(string) We can describe the orientation of the y-axis ticks by specifying 'left' or 'right'. This will put the text of the ticks either to the left or the right of the y-axis.

data.orientYTicks = 'left'

####.XAxisClasses(string) We can also provide class names to elements so we can reference them in our CSS file: data.XAxisClasses will apply a class name to the x-axis. As an example, we are giving our x-axis a class name of 'lineChartX' and can now make stylistic changes to it within our CSS.

data.XAxisClasses = 'lineChartX';

You can also add multiple classes separated by a space.

data.XAxisClasses = 'lineChartX lineChartAxis';

####.YAxisClasses We can also provide class names to elements so we can reference them in our CSS file: data.YAxisClasses will apply a class name to the y-axis. As an example, we are giving our y-axis a class name of 'lineChartY' and can now make stylistic changes to it within our CSS.

data.YAxisClasses = 'lineChartY';

You can also add multiple classes separated by a space.

data.YAxisClasses = 'lineChartY lineChartAxis';

####.lineClass We can also provide class names to elements so we can reference them in our CSS file: data.lineClass will apply a class name to the line of your Line Chart. As an example, we are giving our line a class name of 'lineChart' and can now make stylistic changes to it within our CSS.

data.lineClass = 'lineChart';

(back to top)

##Pie Chart Important! Don't forget to build your data object before proceeding to customizing your Template.

####.dataset(object) We will be providing the data for our Pie Chart as an array of objects which will describe the amount filled in per pie slice. Our template will automatically calculate the appropriate percentages based on the values of the object. Each object will have a label property, whose value should be a string, that will display the label for that slice. It will also have a quantity property whose value, should be a non-negative integer, will represent the size of the pie slice.

data.dataset = [
  {label: 'dogs', quantity: 140},
  {label: 'cats', quantity: 91},
  {label: 'hamsters', quantity: 88},
  {label: 'parrots', quantity: 74},
  {label: 'rabbits', quantity: 63},
  ...
]

####.colors(array) We can provide colors to each of the pie slices based on each element of our array. Our template will fill each pie slice based on the order of the array, so the first object in our dataset will be matched with the first color element in our colors array.

data.colors = ["blue", "orange", "purple", 'green', 'red', "yellow", 'lemonChiffon'];

Note: If there are less colors provided than there are dataset objects, D3 will start to reassign colors.

####.arcClass(string) We can also provide class names to elements so we can reference them in our CSS file: data.arcClass will apply a class name to the svg element holding your Pie Chart. As an example, we are giving our svg a class name of 'arcClass' and can now make stylistic changes to it within our CSS.

data.arcClass = 'arc';

(back to top)

##Scatter Plot Important! Don't forget to build your data object before proceeding to customizing your Template.

####.dataset(object) We will be providing the data for our Scatter Plot as an array of objects which will describe the data points within the chart. Each object will have a y-value property, whose value should be a non-negative number, will represent the y-position of the data point. It will also have a x-value property, whose value should be a non-negative number, that will represent x-position of the data point. We can also describe differentiate between data point types by providing a type property, whose value should be a string, that will act as a label in the legend for each datapoint of that type.

  {y_value: 5.1, x_value: 3.5, type: 'type 1'},
  {y_value : 4.9, x_value: 3.0, type: 'type 1'},
  {y_value: 4.7, x_value: 3.2, type: 'type 2'},
  {y_value: 4.6, x_value: 3.1, type: 'type 2'},
  {y_value: 5.0, x_value: 3.6, type: 'type 3'},
  {y_value: 5.4, x_value: 3.9, type: 'type 4'},
  ...
]

####.margins(object) For the Scatter Plot, we can customize the margins of the svg elements by providing values that will be subtracted from the overall svg size.

data.margins = {top: 20, right: 10, bottom: 0, left: 10}

Properties of data.margin can only be top, right, bottom, or left. The values of these properties can only be numerical, non-negative values. Also remember that if your margins in one direction exceed your svg size, you will not see your visualization!

####.x_axis_class(string) We can also provide class names to elements so we can reference them in our CSS file: data.x_axis_class will apply a class name to the x-axis. As an example, we are giving our x-axis a class name of 'x' and can now make stylistic changes to it within our CSS.

data.x_axis_class = 'x';

You can also add multiple classes separated by a space.

data.x_axis_class = 'x axis';

####.y_axis_class(string) We can also provide class names to elements so we can reference them in our CSS file: data.y_axis_class will apply a class name to the y-axis. As an example, we are giving our y-axis a class name of 'y' and can now make stylistic changes to it within our CSS.

data.y_axis_class = 'y';

You can also add multiple classes separated by a space.

data.y_axis_class = 'y axis';

####.legend(string) We can also provide class names to elements so we can reference them in our CSS file: data.legend will apply a class name to the legend that the template will provide. As an example, we are giving our template a class name of 'legend' and can now make stylistic changes to it within our CSS.

data.legend = 'legend';

####.dot_class(string) We can also provide class names to elements so we can reference them in our CSS file: data.dot_class will apply a class name to each dot on the Scatter Plot. As an example, we are giving our dots a class name of 'dot' and can now make stylistic changes to it within our CSS.

data.dot_class = 'dot';

####.label(string) We can also provide class names to elements so we can reference them in our CSS file: data.label will apply a class name to the labels. As an example, we are giving our labels a class name of 'label' and can now make stylistic changes to it within our CSS.

data.label = 'label';

####.x_display_name(string), .y_display_name(string) For Scatter Plot, we can customize the axis label names using these two properties.

// Display names to run along x and y axis
data.x_display_name = 'X VALUE';
data.y_display_name = 'Y VALUE';

(back to top)