This website has been developed as part of a collaboration between Univesity of Edinburgh, Knoydart Foundation, Community Energy Scotland and Local Energy Scotland.
The visualisation can be found currently at http://powerofknoydart.org
Login to Github with the community username and password.
The process of editing the website has three stages (explained in greater detail below):
- Find the file you want to edit, open it and click Edit.
- Add your changes to the file.
- Commit your changes by using the 'Commit' space at the bottom of the page.
The power of Knoydart website consists of three main files
index.html file holds the structure of the page, like the Knoydart foundation logo, visualisation on the left and info on the right side of the page.
style.css consists of design elements, like color of information block, background color, font style and so on.
vis_d3.j takes care of things like fetching the data from the datataker, drawing the graph, responding to user mouse clicks on different buttons, and presenting different messages in the info window, for example when it says "feel free to use as much energy as you like".
Before editing any of these three files, first it is important to separate your tasks and make sure which file you need to edit.
For example, if you want to delete a section of text on the page and change the background color to light green. The deleting section change needs to take place in the index.html file and the color change needs to take place in the style.css files.
The index.html and style.css are both in the root of this repository. and the vis_d3.js is inside the js folder.
To change the text in the green box (the text in this box stays the same regardless of what the hydro is doing):
-Click on index.html Scroll through the text and find the bit you want to edit and edit it. (remember the stuff inside the arrows is Hadi's code, you mess with the code, you mess with Hadi.) You can explain what you have done in the Commit changes box" -Click commit
To edit the text in the box on the bottom left (this text changes according power demand info from the datataker)
-Click on js/vis_d3.js
-scroll through the text and find the text you want to edit and edit it.
-the stuff inside "double Quotes" is human laguage, this is what you want to edit, the rest is code - dont mess with the code
Changing background color:
For example to change the background color of the page and the text color this is what you need to do:
- Click on style.css
- click on edit so you can start adding your changes
- Commit your changes
This is the section in the style.css you want to change for the background color, font or font-size:
body{
font-size: 87.5%;
color: #252e35;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5em;
background: #f00;
}If you would like to develop you own app, please go to our githubu page for more details on the data api and our privacy and licence agreements.