Netflix data viz

let table;
let entries = [];
let years = [];
let yearCounts = {};
let yearSegments = [];
const lineColor = '#8944EC';
const margin = 100; // 5% of 1200 (height)
const yearBarHeight = 20;
const yearBarGap = 2;

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

function setup() {
  createCanvas(800, 1500);

  // Extract data and unique years
  for (let i = 0; i < table.getRowCount(); i++) {
    let year = int(table.getString(i, 'year'));
    let title = table.getString(i, 'main_title');
    entries.push({ year, title });
    if (!years.includes(year)) {
      years.push(year);
      yearCounts[year] = 1;
    } else {
      yearCounts[year]++;
    }
  }
  years.sort((a, b) => a - b);

  // Create year segments
  let totalCount = Object.values(yearCounts).reduce((a, b) => a + b, 0);
  let currentX = margin;
  let availableWidth = width - 2 * margin;
  for (let year of years) {
    let segmentWidth = (availableWidth - (years.length - 1) * yearBarGap) * (yearCounts[year] / totalCount);
    yearSegments.push({
      year: year,
      start: currentX,
      end: currentX + segmentWidth,
      count: yearCounts[year]
    });
    currentX += segmentWidth + yearBarGap;
  }

  // Assign random positions to entries
  for (let entry of entries) {
    let segment = yearSegments.find(seg => seg.year === entry.year);
    entry.x = random(margin, width - margin);
    entry.y = random(margin, height / 3);
    entry.startX = random(segment.start, segment.end);
  }
}

function draw() {
  background(0); // Black background
  drawVisualization();
  noLoop();
}

function drawVisualization() {
  // Draw curved lines
  stroke(lineColor);
  strokeWeight(0.1875);
  noFill();

  for (let entry of entries) {
    push();
    drawingContext.globalAlpha = 0.6;
    beginShape();
    vertex(entry.startX, height - margin + yearBarHeight / 2);
    let midY = (entry.y + height - margin) / 2;
    quadraticVertex(entry.x, midY, entry.x, entry.y);
    endShape();
    pop();
  }

  // Draw white dots for titles
  fill(255, 255, 255, 128); // White with 50% opacity
  noStroke();
  for (let entry of entries) {
    ellipse(entry.x, entry.y, 1.5, 1.5); // 50% larger than previous (was 1, now 1.5)
  }

  // Draw year bars and labels
  textAlign(CENTER, BOTTOM);
  noStroke();

  for (let segment of yearSegments) {
    // Year bar
    fill(lineColor);
    rect(segment.start, height - margin, segment.end - segment.start, yearBarHeight);

    // Year label
    fill(255);
    textStyle(BOLD);
    textSize(12);
    text(segment.year, (segment.start + segment.end) / 2, height - margin + yearBarHeight + 20);

    // Total titles viewed
    textStyle(NORMAL);
    textSize(10);
    text(segment.count, (segment.start + segment.end) / 2, height - margin - 5);
  }
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('netflix_visualization', 'pdf');
  }
}