📂 Loading Data

What Is a CSV? · ¿Qué es un CSV?

CSV stands for Comma-Separated Values. It's just a text file where each line is a row and commas separate columns. Open it in any text editor or spreadsheet app.

# This is what our data looks like in the CSV file:
Label,Population,Percent,Fiscal Year
Spanish Total,87798,21.5,2016-2017
Spanish Limited English,62341,15.2,2016-2017
Chinese Total,28543,6.9,2016-2017

Real Oakland data! 87,798 people speak Spanish — that's 21.5% of Oakland.

How Data Becomes a Bar · ¿Cómo los Datos Se Convierten en una Barra?

Here's the journey data takes from the CSV file to a 3D pedestal:

The Parser Code · El Código del Analizador

Open docs/js/csvParser.js. The key function is parseCSV(). Here's a simplified version:

// 1. Tell the browser which year we want
const YEAR_FILTER = '2016-2017';

// 2. Download the CSV file
async function parseCSV(path) {
  const response = await fetch(path);
  const text = await response.text();

  // 3. Split into lines, then split each line by comma
  const lines = text.split('\n');
  const rows  = lines.map(line => line.split(','));

  // 4. Filter: only keep rows from our year
  return rows.filter(row => row[3] === YEAR_FILTER);
}

Sorting Into Categories · Clasificando por Categorías

After loading, each row gets a category based on keywords in its Label column. This determines which color and position it gets in the 3D scene:

let category;
const label = row.label.toLowerCase();

if (label.includes('bilingual pcp')) {
  category = 'bilingual_pcp';
} else if (label.includes('limited english')) {
  category = 'limited_english';
} else if (label.includes('total')) {
  category = 'total';
} else {
  category = 'other';
}

Population → Bar Height · Población → Altura de la Barra

The most important step: turn a raw population number into a height that makes visual sense in 3D space.

// The tallest bar (Spanish Total: 87,798 people) gets MAX height
const MAX_POPULATION     = 87798;
const MAX_PEDESTAL_HEIGHT = 5.0;   // units in 3D space
const MIN_PEDESTAL_HEIGHT = 0.35;  // so tiny bars still show

// Scale: 87,798 people = 5.0 height units
//         1,000 people = 5.0 * (1000/87798) = 0.057 units
const height = MIN_PEDESTAL_HEIGHT +
  (population / MAX_POPULATION) *
  (MAX_PEDESTAL_HEIGHT - MIN_PEDESTAL_HEIGHT);

This is called linear scaling — the same math used in every chart you've ever seen, just applied to 3D height!