Tips for the developer

Re-use existing code

Before writing anything, make sure you’re familiar with the content that already exists on the Imperial Visualisations website. If a pre-existing visualisation in a suite looks somewhat like what you want one of your visualisations to be, then having a look at the code for the pre-existing one will give you good help. Don’t be afraid to start by copying the content of pre-existing files into your currently empty files and playing around with how the old code works. This is actually how a lot of visualisations start off!

Once you’ve had a look at someone else’s code, copy over some interaction structure. It’s useful to understand how the JS and HTML files talk to one another, but if you’re stuck, taking other people’s files and just understanding how their files work is a big help. If you’ve done this, make sure that the names of the files referenced in the “brains” of the HTML (down the bottom) are the ones you want them to be (they need to be referencing the files locally to your computer), so copying and pasting the content of their files won’t usually work, as the HTML will be unable to find the files that have (incorrectly) been asked for. Now that the interactions between files have correctly been set up, you should be able to get going.

Maths: dividing by zero

When working out the maths, be careful with special cases that arise when dividing any two things. For example, suppose you wanted arctan(y1/x1) to find an angle. In that case, you’d need to create the special case for if x1=0, as JavaScript would have a problem with dividing by zero, even though you might not always consider this a problem. Algebraically we’d expect pi/2, so for this, you’d have to create the special case to return pi/2 for when x1 = 0.

YouTube videos for the developer

Check out the channel https://www.youtube.com/channel/UCCWiTDeqBPSsUks0jFrhEKQ and its description at YouTube channel.

NPM node modules

Do not edit the vue-components files in node modules. Instead if something isn't working you need to clone the vue-components repository, and then edit that to make your visualization work, then pull request the changes you’ve made to the vue components repository.

Git Ignore node_modules

To share your projects more easily, you should exclude the node_modules folder from your github repo. Otherwise people will get an error when they run npm run serve which can be solved by deleting the node_modules folder and running npm i.

To exclude the node_modules folder you must create a .gitignore file in the project directory.

1. In your main project directory (the folder containing the node_modules folder) create a file and name it “gitignore.txt”.
2. Open this in a text editor and add the following text “node_modules/” then save and close the file.
3. Hold shift and right click in the project folder and click “open terminal here” or “open powershell here”.
4. Run this command ren gitignore.txt .gitignore
5. Then run this command git rm -r --cached node_modules/
6. Then using gitkraken or command line git, commit and push your changes.

You should now retain your version of the “node_modules” folder, but your git should not have any “node_modules” folder. Now other people can clone the repo and just run the command npm i then npm run serve.