https://editor.p5js.org/illus0r/sketches/ny8dRZvgQ

club.csv

club.csv

let data, dataTable;
let w = 1

function preload() {
  dataTable = loadTable('club.csv', 'ssv', 'header')
}

function setup() {
  createCanvas(400, 400)
  fill('teal')
  noStroke()
  background(220)
  data = dataTable.getArray()
  // let prev = 0
  // beginShape()
  for (d of data) {
    // console.log(d[0])
    
    let dt   = parseInt(d[0].substring(0,2))
    let mon  = parseInt(d[0].substring(3,5))
    let yr   = parseInt(d[0].substring(6,10))
    let hour   = parseInt(d[0].substring(11,13))
    let min   = parseInt(d[0].substring(14,16))
    let date = new Date(yr, mon-1, dt, hour, min)
    
    let x = (date / (3600000/2) -889720) * w
    let y = height / 2
    let T = Number(d[1])
    let h = T * 5
    // console.log(x, h, d[1])
    if(T > 0) fill('orange')
    else fill('white')
    translate(width/2, height/2)
    rotate(.003*x)
    translate(0, 100)
    rect(0, 0, w+1, h)
    resetMatrix()
  }
  // endShape()
}

function draw() {}

let table;

function preload() {
  //my table is comma separated value "csv"
  //and has a header specifying the columns labels
  table = loadTable('club.csv', 'ssv', 'header');
}

function setup() {
  createCanvas(400, 400)
  background(220)
  strokeWeight(2)
  let data = table.getArray()
  translate(0,height/2)
  for (let i = 0; i < data.length; i++) {
    // console.log(data[i][1])
    let x = i
    let y = +data[i][1]
    point(x, y)
    // console.log(x, y)
  }
}

function draw() {
}

let table
let data

function preload() {
  //my table is comma separated value "csv"
  //and has a header specifying the columns labels
  table = loadTable('club.csv', 'ssv', 'header');
}

function setup() {
  data = table.getArray()
  createCanvas(data.length, 160)
}

function draw() {
  background('white')
  strokeWeight(.2)
  stroke(0)

  line(mouseX,0,mouseX,height)
  
  translate(0,height/2)
  line(0,0,width,0)
  strokeWeight(2)
  for (let i = 0; i < data.length; i++) {
    // console.log(data[i][1])
    let x = i
    let T = +data[i][1]
    let y = -T
    stroke(T>0? 'red' : 'teal')
    point(x, y)
    // console.log(x, y)
  }
}

let table
let data

function preload() {
  //my table is comma separated value "csv"
  //and has a header specifying the columns labels
  table = loadTable('club.csv', 'ssv', 'header');
}

function setup() {
  data = table.getArray()
  createCanvas(data.length, 160)
}

function draw() {
  translate(0, height / 2)

  background('white')

  strokeWeight(.2)
  stroke('black')
  fill(0)

  line(mouseX, -height/2, mouseX, height/2)
  text(data[mouseX][1], mouseX+3, -30)

  line(0, 0, width, 0)
  strokeWeight(2)
  
  for (let i = 0; i < data.length; i++) {
    // console.log(data[i][1])
    let x = i
    let T = +data[i][1]
    let y = -T
    strokeWeight(i == mouseX ? 6 : 2)
    stroke(T > 0 ? 'red' : 'teal')
    point(x, y)
    // console.log(x, y)
  }
}

let table
let data

function preload() {
  table = loadTable('club_big.csv', 'ssv', 'header');
}

function scaleX(i){
  return i / 6
}

function setup() {
  data = table.getArray()
  createCanvas(scaleX(data.length), 160)
}

function draw() {
  translate(0, height / 2)

  background('white')

  strokeWeight(.2)
  stroke('black')
  fill(0)

  // line(mouseX, -height/2, mouseX, height/2)
  // text(data[mouseX][1], mouseX+3, -30)

  line(0, 0, width, 0)
  
  for (let i = 0; i < data.length; i++) {
    let x = scaleX(i)
    let T = +data[i][1]
    let y = -T
    // strokeWeight(i == mouseX ? 6 : 1)
    stroke(T > 0 ? 'red' : 'teal')
    point(x, y)
  }
}

let table
let data

function preload() {
  table = loadTable('club_big.csv', 'ssv', 'header');
}

function scaleData2Screen(i){
  return i / 6
}

function scaleScreen2Data(i){
  return floor(i * 6)
}

function setup() {
  data = table.getArray()
  createCanvas(scaleData2Screen(data.length), 160)
}

function draw() {
  translate(0, height / 2)

  background('white')

  strokeWeight(.2)
  stroke('black')
  fill(0)

  line(mouseX, -height/2, mouseX, height/2)
  // console.log(scaleScreen2Data(mouseX))
  text(data[scaleScreen2Data(mouseX)][1], mouseX+3, -30)

  line(0, 0, width, 0)
  
  for (let i = 0; i < data.length; i++) {
    let x = scaleData2Screen(i)
    let T = +data[i][1]
    let y = -T
    strokeWeight(i == scaleScreen2Data(mouseX) ? 6 : 1)
    stroke(T > 0 ? 'red' : 'teal')
    point(x, y)
  }
}

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(0,20)
  noiseSeed(1)
  translate(width/2, height/2)
  noStroke()
  for (let x = -width/2; x < width/2; x += 5)
    for (let y = -width/2; y < width/2; y += 5) {
      fill(255, 255 * (.3+noise(x / 100, y / 100, frameCount/20))**10)
      rect(x, y, 5)
    }
}