let startups = [];

let fundingRounds = [

  "Seed",

  "Series A",

  "Series B",

  "Series C",

  "Series D",

  "Series E",

];

let fundingColors,

  selectedStartup = null;

let fundingEmojis = {

  Seed: "🌱",

  "Series A": "🚀",

  "Series B": "💼",

  "Series C": "🏢",

  "Series D": "🏦",

  "Series E": "🌍",

};

​

function preload() {

  table = loadTable("startups.csv", "csv", "header");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textSize(14);

  textAlign(CENTER, CENTER);

​

  fundingColors = {

    Seed: color(102, 187, 106),

    "Series A": color(255, 193, 7),

    "Series B": color(3, 169, 244),

    "Series C": color(156, 39, 176),

    "Series D": color(233, 30, 99),

    "Series E": color(255, 87, 34),

  };

​

  let colWidth = width / fundingRounds.length;

  let rowHeights = new Array(fundingRounds.length).fill(100);

​

  for (let i = 0; i < table.getRowCount(); i++) {

    let name = table.getString(i, "Name");

    let amountRaised = table.getNum(i, "AmountRaised");

    let valuation = table.getNum(i, "Valuation");

    let fundingRound = table.getString(i, "FundingRound");

​

    let col =

      fundingColors[fundingRound] ||

      color(random(255), random(255), random(255));

    let emoji = fundingEmojis[fundingRound] || "❓";

​

    let colIndex = fundingRounds.indexOf(fundingRound);

    let x = colIndex * colWidth + colWidth / 2;

    let y = rowHeights[colIndex];

​

    startups.push(

      new Startup(name, amountRaised, valuation, col, fundingRound, emoji, x, y)

    );

​

    rowHeights[colIndex] += 50;

  }

}

​

function draw() {

  background(15);

​

  let boxWidth = width / fundingRounds.length;

  for (let i = 0; i < fundingRounds.length; i++) {

    fill(fundingColors[fundingRounds[i]]);

    rect(i * boxWidth, 0, boxWidth, 60);

​

    fill(255);

    textSize(16);

    text(

      `${fundingEmojis[fundingRounds[i]]} ${fundingRounds[i]}`,

      i * boxWidth + boxWidth / 2,

      30

    );

  }

​

  for (let startup of startups) {

    startup.display();

  }

​

  if (selectedStartup) {

    selectedStartup.showDetails();

  }

}

​

class Startup {

  constructor(name, amountRaised, valuation, col, fundingRound, emoji, x, y) {

    this.name = name;

    this.amountRaised = amountRaised;

    this.valuation = valuation;

    this.col = col;

    this.fundingRound = fundingRound;

    this.emoji = emoji;

    this.x = x;

    this.y = y;

    this.size = 10;

  }

​

  display() {

    let hovered = dist(mouseX, mouseY, this.x, this.y) < 15;

​

    fill(hovered ? color(255, 255, 255, 150) : this.col);

    ellipse(this.x, this.y, this.size * (hovered ? 2 : 1.5));

​

    fill(255);

    textSize(hovered ? 16 : 12);

    text(`${this.emoji} ${this.name}`, this.x, this.y - 15);

​

    if (hovered) {

      fill(255, 200);

      rect(mouseX, mouseY, 160, 50, 10);

      fill(0);

      textSize(12);

      text(`💰 $${this.amountRaised}M`, mouseX + 80, mouseY + 20);

      text(`📈 $${this.valuation}M`, mouseX + 80, mouseY + 40);

    }

  }

​

  showDetails() {

    fill(0, 220);

    rect(width / 2 - 150, height / 2 - 50, 300, 100, 10);

​

    fill(255);

    textSize(18);

    text(`${this.emoji} ${this.name}`, width / 2, height / 2 - 20);

​

    textSize(14);

    text(`💰 Raised: $${this.amountRaised}M`, width / 2, height / 2 + 5);

    text(`📈 Valuation: $${this.valuation}M`, width / 2, height / 2 + 25);

  }

}

​

function mousePressed() {

  for (let startup of startups) {

    if (dist(mouseX, mouseY, startup.x, startup.y) < 15) {

      selectedStartup = startup;

      break;

    }

  }

}

​