Here’s the plot we’re going to be working towards producing in this part of the tutorial:
It’s a plot with two curves (one a straight line, one a parabola) defined by functions y = f(x). There is some simple styling (line width and colour) and a little bit of interactivity (you can click on the coloured blobs in the legend to toggle the visibility of the two curves).
Before we get started for real, you will need to set up the tutorial materials. These are available on GitHub. The easiest way to get the tutorial materials is to clone the GitHub repository. To do this, in a terminal window, do:
git clone git@github.com:openbrainsrc/Radian-tutorial.gitTo serve the tutorial pages, you can either use a pre-existing web server, setting it up to serve the pages in the Radian-tutorial directory, or you can use the web-server.js script provided in the Radian-tutorial directory. This script uses Node.js, and is identical to the web server script provided with the Angular seed application.
Once you have a suitable web server running, check that everything is working by pointing your browser at the index.html page in the Radian-tutorial directory. You should see some text saying “Content goes here!” and a rudimentary plot.
Once page serving appears to be working, check out the first section of the tutorial by going to the Radian-tutorial directory in a terminal and doing:
git checkout -f part-1We’ll do something similar at the beginning of each part of the tutorial to get out the files needed for that part. This command will delete any local changes you have made in the Radian-tutorial directory.
As well as the content for each tutorial section, the Radian-tutorial directory contains a template.html file that you can copy to create new pages – this contains all the JavaScript setup required to be able to embed Radian plots in a page.