Quinn Alexa Royer's

Online Portfolio

Basics

Elements to Include

In order to insert a chart into a website, it is necessary to load the charts.js file, load the D3 library, and create an SVG element in which to draw the chart. To create the SVG element, insert the following text in the HTML document:

<svg id="chart" height="500" width="500">

The height and width do not have to be 500; they can be whatever size you wish. The ID attribute above is chart. You can replace this with any ID you wish, but you must include an ID so you can tell the program which element to insert the chart.

Include the following code to load the D3 library:

<script src="https://d3js.org/d3.v5.min.js"></script>

Insert the following code in the document to load the charts.js file:

<script src="/path/to/charts.js"></script>

Be sure to replace /path/to/ with the directory path to the charts.js file. If you place the charts.js in the same directory as your HTML file, you can simply put charts.js in the src attribute as follows:

<script src="charts.js"></script>

The last thing you need to do is create a new object in the class of the type of chart to create. For each of the chart classes, two arguments are required when creating the chart object: the first being the SVG element to insert the chart, and the second being a JavaScript object. The following is an example of the code to create the BarChart object:

var info = {x:[1,2,3,4,5,6], y:[1,4,9,16,25,36] }; var element = d3.select("#chart"); var c = new BarChart(element, info);

JavaScript Basics

Not much knowledge of JavaScript is required to create charts using this program, but it does require using some very basic syntax. The other pages of the documentation will assume at least knowledge of JavaScript explained below.

Arrays

An array is a list of values. An array is enclosed in square brackets [] and values are separated by commas. An example of an array is given below:

[4,13,2,-6]

Functions

A function is a block of code that takes zero or more arguments and optionally returns a value. A function in JavaScript starts with the keyword function, followed by comma separated arguments enclosed in parenthesis (). Next comes the body of the function, enclosed in curly braces {}. The keyword return is used before the expression to return (if the function returns a value). The following is an example of a function that returns the square of its argument:

function(i) {return i**2;}

Objects

A JavaScript object is enclosed in curly braces {} and contains a bunch of pairs of an attribute with a value, separated by commas. In each pair, the attribute and value are separated by a colon (:) with the attribute coming before the colon and the value coming after it.