sketch.js
data = [];
function preload() {
table = loadTable('https://gist.githubusercontent.com/hollyjpotter/45952a6c5373b5c8b69fdd272dc0fccc/raw/142b61919367aea37ecfa79b8b370667f7d42c53/powerData.csv', 'csv', 'header');
}
function setup() {
createCanvas(850, 800);
background("");
numberOfRows = table.getRowCount();
numberOfColumns = table.getColumnCount();
}
function draw() {
fill('#3dc2ff');
Alt + Click on a hex color
Open a color picker to modify the color
for(var i = 0; i < numberOfRows; i++) {
text(table.getString(i, 0), i * 29 + 50, 790);
data[i] = table.getString(i, 1);
rect(i * 30 + 50, 770 - data[i], 20, data[i]);
}
maxValue = max(data);
for(var k = 0; k < maxValue; k = k + 50) {
(text(k, 15, 770 - k));
line(-width+890,775,+width-20,775);
line(40,height-23,40,-height+300);
drawTickYAxes(0,1,50,40,765);
drawTickXAxes(0,1,50,40,775);
}
let angle1 = radians(270);
translate(100, 200);
rotate(angle1);
text("Carbon Intensity (gCO2/kWh) 2020", -200, -90);
}
function drawTickYAxes(lineColor,thickness,spacing,xoffset,yoffset) {
this.lineColor = lineColor;
A bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed