Übung 26

const dataset = [
  {
    survived: false,
    age: 'Adult',
    gender: 'Male',
    class: 1,
    people: 118,
  },
  {
    survived: false,
    age: 'Adult',
    gender: 'Male',
    class: 2,
    people: 154,
  },
  // ...
  {
    survived: true,
    age: 'Child',
    gender: 'Female',
    class: 3,
    people: 14,
  },
  {
    survived: true,
    age: 'Child',
    gender: 'Female',
    class: 'Crew',
    people: 0,
  },
]

const getPercentageSurvived = condition => {
  let output = dataset.reduce(
    (sum, set) => sum + (set.survived && condition(set) && set.people),
    0
  )
  output /= dataset.reduce(
    (sum, set) => sum + (condition(set) && set.people),
    0
  )
  return output
}

const female = getPercentageSurvived(set => set.gender === 'Female')
const male = getPercentageSurvived(set => set.gender === 'Male')

const child = getPercentageSurvived(set => set.age === 'Child')
const adult = getPercentageSurvived(set => set.age === 'Adult')

const first = getPercentageSurvived(set => set.class === 1)
const second = getPercentageSurvived(set => set.class === 2)
const third = getPercentageSurvived(set => set.class === 3)
const crew = getPercentageSurvived(set => set.class === 'Crew')

const max = Math.max(female, male, child, adult, first, second, third, crew)

const getFormattedPercentage = percentage => {
  return Math.round(percentage * 100) + '%'
}

const getPixelOfPercentage = percentage => {
  return (percentage / max) * 500
}

const drawBar = (r, g, b, x, percentage, description) => {
  strokeWeight(4)
  stroke(r, g, b)
  rect(x, 550, 46, -getPixelOfPercentage(percentage))
  strokeWeight(0)
  text(
    getFormattedPercentage(percentage),
    x + 23,
    550 - getPixelOfPercentage(percentage) - 10
  )
  push()
  translate(x + 30, 550 - getPixelOfPercentage(percentage) / 2)
  rotate(radians(-90))
  text(description, 0, 0)
  pop()
}

function setup() {
  createCanvas(600, 650)
  textAlign(CENTER)
  textSize(16)
}

function draw() {
  background(color(255))

  strokeWeight(4)
  stroke(0)
  line(25, 554, 575, 554)

  const labelY = 585

  strokeWeight(0)
  text('Gender', 100, labelY)
  drawBar(255, 0, 0, 50, female, 'Female')
  drawBar(0, 0, 255, 100, male, 'Male')

  strokeWeight(0)
  text('Age', 250, labelY)
  drawBar(255, 127, 0, 200, child, 'Child')
  drawBar(0, 127, 0, 250, adult, 'Adult')

  strokeWeight(0)
  text('Class', 450, labelY)
  drawBar(127, 0, 255, 350, first, 'First Class')
  drawBar(0, 190, 255, 400, second, 'Second Class')
  drawBar(100, 255, 100, 450, third, 'Third Class')
  drawBar(150, 150, 150, 500, crew, 'Crew')
}