WER MACHT DAS?

Geschlechterunterschiede in der Zeitverwendung in Österreich

Zeit ist eine begrenzte Ressource – und sie ist ungleich verteilt. Die Zeitverwendungserhebung der Statistik Austria zeigt: Frauen leisten nach wie vor den Großteil der unbezahlten Arbeit in Österreich, während Männer mehr Zeit in Erwerbsarbeit verbringen. Diese unsichtbare Arbeit – Kochen, Putzen, Kinderbetreuung, Pflege – hält unsere Gesellschaft am Laufen, wird aber weder entlohnt noch in wirtschaftlichen Kennzahlen erfasst.

Diese Visualisierung macht die Ungleichverteilung sichtbar. Jede Figur steht für rund von hundert Personen: rot für Frauen, grün für Männer. Auf einen Blick zeigt sich, wer welche Tätigkeiten übernimmt. Im Auswahlmenü sind jene Aktivitäten farblich hervorgehoben, bei denen besonders große Geschlechterunterschiede bestehen.

import { slider, radio, button } from '@jashkenas/inputs'
d3 = require("d3@6")

palette = ["#198737", "#FF8732", "#D62300", "#FFAA00", "#502314", "#F5EBDC"]

md5 = {
  function md5cycle(x, k) {
    var a = x[0],
      b = x[1],
      c = x[2],
      d = x[3];

    a = ff(a, b, c, d, k[0], 7, -680876936);
    d = ff(d, a, b, c, k[1], 12, -389564586);
    c = ff(c, d, a, b, k[2], 17, 606105819);
    b = ff(b, c, d, a, k[3], 22, -1044525330);
    a = ff(a, b, c, d, k[4], 7, -176418897);
    d = ff(d, a, b, c, k[5], 12, 1200080426);
    c = ff(c, d, a, b, k[6], 17, -1473231341);
    b = ff(b, c, d, a, k[7], 22, -45705983);
    a = ff(a, b, c, d, k[8], 7, 1770035416);
    d = ff(d, a, b, c, k[9], 12, -1958414417);
    c = ff(c, d, a, b, k[10], 17, -42063);
    b = ff(b, c, d, a, k[11], 22, -1990404162);
    a = ff(a, b, c, d, k[12], 7, 1804603682);
    d = ff(d, a, b, c, k[13], 12, -40341101);
    c = ff(c, d, a, b, k[14], 17, -1502002290);
    b = ff(b, c, d, a, k[15], 22, 1236535329);

    a = gg(a, b, c, d, k[1], 5, -165796510);
    d = gg(d, a, b, c, k[6], 9, -1069501632);
    c = gg(c, d, a, b, k[11], 14, 643717713);
    b = gg(b, c, d, a, k[0], 20, -373897302);
    a = gg(a, b, c, d, k[5], 5, -701558691);
    d = gg(d, a, b, c, k[10], 9, 38016083);
    c = gg(c, d, a, b, k[15], 14, -660478335);
    b = gg(b, c, d, a, k[4], 20, -405537848);
    a = gg(a, b, c, d, k[9], 5, 568446438);
    d = gg(d, a, b, c, k[14], 9, -1019803690);
    c = gg(c, d, a, b, k[3], 14, -187363961);
    b = gg(b, c, d, a, k[8], 20, 1163531501);
    a = gg(a, b, c, d, k[13], 5, -1444681467);
    d = gg(d, a, b, c, k[2], 9, -51403784);
    c = gg(c, d, a, b, k[7], 14, 1735328473);
    b = gg(b, c, d, a, k[12], 20, -1926607734);

    a = hh(a, b, c, d, k[5], 4, -378558);
    d = hh(d, a, b, c, k[8], 11, -2022574463);
    c = hh(c, d, a, b, k[11], 16, 1839030562);
    b = hh(b, c, d, a, k[14], 23, -35309556);
    a = hh(a, b, c, d, k[1], 4, -1530992060);
    d = hh(d, a, b, c, k[4], 11, 1272893353);
    c = hh(c, d, a, b, k[7], 16, -155497632);
    b = hh(b, c, d, a, k[10], 23, -1094730640);
    a = hh(a, b, c, d, k[13], 4, 681279174);
    d = hh(d, a, b, c, k[0], 11, -358537222);
    c = hh(c, d, a, b, k[3], 16, -722521979);
    b = hh(b, c, d, a, k[6], 23, 76029189);
    a = hh(a, b, c, d, k[9], 4, -640364487);
    d = hh(d, a, b, c, k[12], 11, -421815835);
    c = hh(c, d, a, b, k[15], 16, 530742520);
    b = hh(b, c, d, a, k[2], 23, -995338651);

    a = ii(a, b, c, d, k[0], 6, -198630844);
    d = ii(d, a, b, c, k[7], 10, 1126891415);
    c = ii(c, d, a, b, k[14], 15, -1416354905);
    b = ii(b, c, d, a, k[5], 21, -57434055);
    a = ii(a, b, c, d, k[12], 6, 1700485571);
    d = ii(d, a, b, c, k[3], 10, -1894986606);
    c = ii(c, d, a, b, k[10], 15, -1051523);
    b = ii(b, c, d, a, k[1], 21, -2054922799);
    a = ii(a, b, c, d, k[8], 6, 1873313359);
    d = ii(d, a, b, c, k[15], 10, -30611744);
    c = ii(c, d, a, b, k[6], 15, -1560198380);
    b = ii(b, c, d, a, k[13], 21, 1309151649);
    a = ii(a, b, c, d, k[4], 6, -145523070);
    d = ii(d, a, b, c, k[11], 10, -1120210379);
    c = ii(c, d, a, b, k[2], 15, 718787259);
    b = ii(b, c, d, a, k[9], 21, -343485551);

    x[0] = add32(a, x[0]);
    x[1] = add32(b, x[1]);
    x[2] = add32(c, x[2]);
    x[3] = add32(d, x[3]);
  }

  function cmn(q, a, b, x, s, t) {
    a = add32(add32(a, q), add32(x, t));
    return add32((a << s) | (a >>> (32 - s)), b);
  }

  function ff(a, b, c, d, x, s, t) {
    return cmn((b & c) | (~b & d), a, b, x, s, t);
  }

  function gg(a, b, c, d, x, s, t) {
    return cmn((b & d) | (c & ~d), a, b, x, s, t);
  }

  function hh(a, b, c, d, x, s, t) {
    return cmn(b ^ c ^ d, a, b, x, s, t);
  }

  function ii(a, b, c, d, x, s, t) {
    return cmn(c ^ (b | ~d), a, b, x, s, t);
  }

  function md51(s) {
    let txt = '';
    var n = s.length,
      state = [1732584193, -271733879, -1732584194, 271733878],
      i;
    for (i = 64; i <= s.length; i += 64) {
      md5cycle(state, md5blk(s.substring(i - 64, i)));
    }
    s = s.substring(i - 64);
    var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    for (i = 0; i < s.length; i++)
      tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
    tail[i >> 2] |= 0x80 << (i % 4 << 3);
    if (i > 55) {
      md5cycle(state, tail);
      for (i = 0; i < 16; i++) tail[i] = 0;
    }
    tail[14] = n * 8;
    md5cycle(state, tail);
    return state;
  }

  function md5blk(s) {
    var md5blks = [],
      i;
    for (i = 0; i < 64; i += 4) {
      md5blks[i >> 2] =
        s.charCodeAt(i) +
        (s.charCodeAt(i + 1) << 8) +
        (s.charCodeAt(i + 2) << 16) +
        (s.charCodeAt(i + 3) << 24);
    }
    return md5blks;
  }

  var hex_chr = '0123456789abcdef'.split('');

  function rhex(n) {
    var s = '',
      j = 0;
    for (; j < 4; j++)
      s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] + hex_chr[(n >> (j * 8)) & 0x0F];
    return s;
  }

  function hex(x) {
    for (var i = 0; i < x.length; i++) x[i] = rhex(x[i]);
    return x.join('');
  }

  function md5(s) {
    return hex(md51(s));
  }

  function add32(a, b) {
    return (a + b) & 0xFFFFFFFF;
  }

  if (md5('hello') != '5d41402abc4b2a76b9719d911017c592') {
    function add32(x, y) {
      var lsw = (x & 0xFFFF) + (y & 0xFFFF),
        msw = (x >> 16) + (y >> 16) + (lsw >> 16);
      return (msw << 16) | (lsw & 0xFFFF);
    }
  }

  return md5;
}

// Grouped select input function with cross-browser styling
groupedSelect = (config = {}) => {
  let {
    value: formValue,
    title,
    description,
    multiple,
    size,
    groups,
    highlightColorFemale = "#D6230080",
    highlightColorMale = "#19873780"
  } = config;

  if (Array.isArray(config)) groups = config;

  groups = groups.map(g => {
    if (!g.label) {
      throw new Error('Undefined label for groupedSelect')
    }
    return Object.assign(g, {
      options: g.options.map(
        o => (typeof o === "object" ? o : { value: o, label: o })
      )
    });
  });

  // Build select element with wrapper for wavy underline
  const selectWrapper = document.createElement('span');
  selectWrapper.className = 'select-wrapper';

  const select = document.createElement('select');
  select.setAttribute('size', '1');
  select.style.overflow = 'hidden';

  for (const group of groups) {
    const optgroup = document.createElement('optgroup');
    optgroup.label = group.label;
    if (group.disabled) optgroup.disabled = true;

    for (const opt of group.options) {
      const option = document.createElement('option');
      option.value = opt.value;
      option.textContent = opt.label;
      option.selected = Array.isArray(formValue)
        ? formValue.includes(opt.value)
        : formValue === opt.value;
      if (opt.highlight === "female") {
        option.style.backgroundColor = highlightColorFemale;
      } else if (opt.highlight === "male") {
        option.style.backgroundColor = highlightColorMale;
      } else {
        option.style.backgroundColor = "white";
      }
      optgroup.appendChild(option);
    }
    select.appendChild(optgroup);
  }

  const form = html`<form style="font-family: Jost; font-weight: 350;"></form>`;

  // Wrap select in wrapper for wavy underline styling
  selectWrapper.appendChild(select);

  // Add custom dropdown arrow
  const arrow = document.createElement('span');
  arrow.className = 'select-arrow';
  arrow.innerHTML = '&#9662;'; // Down triangle
  selectWrapper.appendChild(arrow);

  // Add title/label if provided
  if (title) {
    const label = document.createElement('label');
    label.textContent = title + ' ';
    label.style.cssText = 'margin-right: 8px; font-size: 18px;';
    label.appendChild(selectWrapper);
    form.appendChild(label);
  } else {
    form.appendChild(selectWrapper);
  }

  form.value = formValue || groups[0]?.options[0]?.value;

  select.addEventListener("input", () => {
    form.value = select.value;
    form.dispatchEvent(new CustomEvent("input"));
  });

  return form;
}

shapeLookupCategory = new Map([
  // Essen und andere persönliche Tätigkeiten
  ["Essen und andere persönliche Tätigkeiten_women", "echadfba"],
  ["Essen und andere persönliche Tätigkeiten_men", "REGATNGH"],

  // Erwerbstätigkeit
  ["Erwerbstätigkeit_women", "coilmnpq>"],
  ["Erwerbstätigkeit_men", "PTJFWY<"],

  // Aus- und Weiterbildung
  ["Aus- und Weiterbildung_women", "Bhapb"],
  ["Aus- und Weiterbildung_men", "AHDG"],

  // Sorgearbeit in Haushalt und Familie
  ["Sorgearbeit in Haushalt und Familie_women", "a27b1b14bba2a6"],
  ["Sorgearbeit in Haushalt und Familie_men", "G1J26PJ2G7P3G86"],

  // Freiwilligentätigkeiten
  ["Freiwilligentätigkeiten_women", "jiab"],
  ["Freiwilligentätigkeiten_men", "LGPGUPL"],

  // Soziale Kontakte und Freizeit
  ["Soziale Kontakte und Freizeit_women", "echadfbagB"],
  ["Soziale Kontakte und Freizeit_men", "REGZATINGH"],

  // Nicht näher bestimmte Zeitverwendung
  ["Nicht näher bestimmte Zeitverwendung_women", "abcdefghilmnopqB"],
  ["Nicht näher bestimmte Zeitverwendung_men", "SDEGHIJKLNOPRSTVWZ"],
])

// Override shapes at activity level (optional - add specific activities here)
shapeLookupActivity = new Map([
  // Example: specific activity overrides
  // ["Nahrungsmittelzubereitung_women", "abc"],
  // ["Nahrungsmittelzubereitung_men", "ABC"],
])

// Default fallback by gender
shapeLookupDefault = new Map([
  ["women", "abcdefghilmnopqB"],
  ["men", "SDEGHIJKLNOPRSTVWZ"],
])

// Helper function to get shapes - checks activity first, then category, then default
getShapes = (activity, category, gender) => {
  const activityKey = `${activity}_${gender}`;
  const categoryKey = `${category}_${gender}`;

  return shapeLookupActivity.get(activityKey)
    || shapeLookupCategory.get(categoryKey)
    || shapeLookupDefault.get(gender)
    || "abcdefghilmnopqSBDEGHIJKLNOPRSTVWXYZ";
}

choose = (arr, n = 1, replace = true) => {
  // Simple random choice
  const chooseOne = arr => {
    if (arr.length == 0) throw "Can't choose from an empty array";
    return arr[Math.floor(Math.random() * arr.length)];
  };

  if (replace == false && arr.length < n) {
    throw "Can't choose more than arr.length items";
  }

  let indicesRemaining = new Set(arr.map((_, i) => i));
  let output = [];

  for (let i = 0; i < n; i++) {
    const nextIndex = chooseOne(Array.from(indicesRemaining));
    output.push(arr[nextIndex]);

    if (replace === false) {
      indicesRemaining.delete(nextIndex);
    }
  }
  return output;
}

makeIsoline = (params = {}) => {
  const {
    data = null,              // array of row objects: { key, value (0-1), subkey?, shapes?, fillHighlight?, fillNormal? }
    vizWidth = width,         // total SVG width in px; defaults to Observable's reactive viewport width
    cellWidth = 18,           // horizontal space per figure in px — controls packing density
    cellHeight = 100,         // row height in px
    personHeight = 100,       // Isotype glyph font-size in px — effectively the figure height
    persPerLineValue = Math.floor(vizWidth / cellWidth) - 1, // figures per row; determines the "N per 100" scale
    defaultShapes = "abcdefghilmnopqSBDEGHIJKLNOPRSTVWXYZ", // fallback glyph pool from the Isotype font; per-row shapes override this
    defaultFillHighlight = palette[0],  // fallback color for highlighted (active) figures; per-row fillHighlight overrides this
    defaultFillNormal = palette[5],     // fallback color for non-highlighted figures; per-row fillNormal overrides this
    randomOrder = true,  // true: scatter highlighted figures via MD5 hash; false: pack them left-to-right
    groupByKey = false   // true: rows sharing the same key are grouped under one <h3>; false: each row gets its own <h3>
  } = params;

  // Group data by key if groupByKey is true
  const dataGroups = groupByKey
    ? Array.from(d3.group(data, d => d.key), ([key, items]) => ({ key, items }))
    : data.map(item => ({ key: item.key, items: [item] }));

  // Create rows for each group
  const rows = dataGroups.map((group, groupIndex) => {
    const groupRows = group.items.map((item, rowIndex) => {
    const highlightValue = item.value;
    const shapes = item.shapes || defaultShapes;
    const fillHighlight = item.fillHighlight || defaultFillHighlight;
    const fillNormal = item.fillNormal || defaultFillNormal;
    const subkey = item.subkey || "Personen";
    const highlightCountValue = Math.round(persPerLineValue * highlightValue);

    // Generate person with custom alphabet
    const generatePersonCustom = seed => {
      const avatarChoices = shapes;
      const id = "person_" + d3.format("0>4")(seed) + "_row" + rowIndex;
      const avatar = randomOrder
        ? avatarChoices[parseInt(md5(id).slice(0, 2), 16) % avatarChoices.length]
        : avatarChoices[seed % avatarChoices.length];
      return {
        id,
        avatar,
        highlight: seed < highlightCountValue ? true : false
      };
    };

    // Render person with custom colors
    const renderPersonCustom = (p) => {
      const fillColor = p.highlight ? fillHighlight : fillNormal;
      const strokeColor = "#fff";

      return svg`
        <g class="person">
          <text y="0"
            style="font-size: ${personHeight}px; font-family: Isotype"
            fill="${fillColor}"
            stroke="${strokeColor}"
            stroke-width="3">
            ${p.avatar}
          </text>

        <text y="0"
          style="font-size: ${personHeight}px; font-family: Isotype;"
          fill="${fillColor}">
            ${p.avatar}
        </text>
        </g>
      `;
    };

    // Create the SVG visualization for this row
    const people = d3.range(persPerLineValue).map(generatePersonCustom);
    const height = cellHeight;

    const vizSvg = html`
      <svg width="${vizWidth}" height="${height}">
        <g transform="translate(0, 80)">
          ${people.map((p, i) => ({ p, i })).reverse().map(
            ({ p, i }) => svg`
            <g transform="translate(${i * cellWidth}, 0)">
              ${renderPersonCustom(p)}
            </g>`
          )}
        </g>
      </svg>
    `;

    // Create the percentage span
    const percentageText = html`
      <span style="color: ${fillHighlight}; font-family: Jost, system-ui, -apple-system, sans-serif; font-weight: 350;">
        ${Math.round(highlightValue * 100)} / 100 ${subkey}
      </span>
    `;

    // Return row with label
    return html`
      <div style="margin-bottom: 6px;">
        ${groupByKey && rowIndex === 0 ? html`<h3 style="font-family: Jost, system-ui, -apple-system, sans-serif; font-weight: 600; margin: 0 0 12px 0;">${group.key}</h3>` : html``}
        ${!groupByKey ? html`<h3 style="font-family: Jost, system-ui, -apple-system, sans-serif; font-weight: 600; margin: 0 0 12px 0;">${item.key}</h3>` : html``}
        ${percentageText}
        ${vizSvg}
      </div>
    `;
    });

    // Return group container
    return html`
      <div style="margin-bottom: ${groupByKey ? '0px' : '0px'};">
        ${groupRows}
      </div>
    `;
  });

  // Return all rows in a container
  return html`
    <div style="margin: 0px 0 0 0">
      ${rows}
    </div>
  `;
}

timeUse = FileAttachment("data/zeitverwendung_long.csv").csv({typed: true})

// Prepare all data for visualization
// Using Otto Neurath Isotype-style colors: red for women, blue for men
vizData = timeUse.map(d => ({
  key: d.activity,
  subkey: d.gender === "women" ? "Frauen" : "Männer",  // German display label
  gender: d.gender,
  value: d.participation_pct / 100,
  shapes: getShapes(d.activity, d.category, d.gender),
  fillHighlight: d.gender === "women" ? palette[2] : palette[0],
  fillNormal: palette[5]
}))

activityGroups = {
  const grouped = d3.group(timeUse, d => d.category);
  const thresholdAbs = 5;   // percentage points (absolute difference)
  const thresholdRel = 50;  // percent (relative difference)

  return Array.from(grouped, ([category, items]) => ({
    label: category,
    options: [...new Set(items.map(d => d.activity))].map(activity => {
      // Get the first row for this activity (difference is the same for both genders)
      const row = items.find(d => d.activity === activity);
      const diffAbs = row?.diff_participation || 0;
      const diffRel = row?.diff_relative || 0;
      const absDiffAbs = Math.abs(diffAbs);
      const absDiffRel = Math.abs(diffRel);

      // Mark as highlighted if absolute difference > 5pp OR relative difference >= 50%
      let highlight = null;
      let marker = "";
      if (absDiffAbs > thresholdAbs || absDiffRel >= thresholdRel) {
        highlight = diffAbs > 0 ? "female" : "male";
        marker = diffAbs > 0 ? " (F+)" : " (M+)";
      }

      return {
        value: activity,
        label: activity + marker,
        highlight: highlight
      };
    })
  }));
}

viewof selectActivity = groupedSelect({
  value: "Erwerbstätigkeit - Gesamt",
  groups: activityGroups,
  title: "Wählen sie eine Aktivität: ​ "
})

---

isolines = makeIsoline({
  data: vizData.filter(d => d.key == selectActivity),
  persPerLineValue: width > 1200 ? 50 : width > 600 ? 25 : 10,
  cellWidth: width > 1200 ? 23 : width > 600 ? 23 : 28,
  randomOrder: false,
  groupByKey: true
})

selectedData = timeUse.filter(d => d.activity === selectActivity)
womenData = selectedData.find(d => d.gender === "women")
menData = selectedData.find(d => d.gender === "men")

// Calculate differences
diffAbs = womenData?.participation_pct - menData?.participation_pct
diffRel = womenData?.diff_relative

activityLabel = selectActivity.replace(' - Gesamt', '')

htl.html`<p style="margin: 0px;">
  <span style="color: ${palette[2]}; font-weight: bold;">${Math.round(womenData?.participation_pct)}%</span>
  aller <span style="color: ${palette[2]}; font-weight: bold;">Frauen</span>
  geben an, in einer Woche Zeit mit <strong>${activityLabel}</strong> zu verbringen.
  Frauen verbringen im Schnitt
  <span style="color: ${palette[2]}; font-weight: bold;">${womenData?.participant_hours.toFixed(1).replace('.', ',')} Stunden</span>
  damit. Für <span style="color: ${palette[0]}; font-weight: bold;">Männer</span>
  belaufen sich diese Zahlen auf
  <span style="color: ${palette[0]}; font-weight: bold;">${Math.round(menData?.participation_pct)}%</span>
  und <span style="color: ${palette[0]}; font-weight: bold;">${menData?.participant_hours.toFixed(1).replace('.', ',')} Stunden</span>.
  Der Unterschied beträgt ${Math.abs(diffAbs).toFixed(1).replace('.', ',')} Prozentpunkte
  bzw. ${Math.abs(diffRel).toFixed(0)}%.
  ${diffAbs !== 0 ? `${diffAbs > 0 ? 'Frauen' : 'Männer'} üben die Tätigkeit häufiger aus.` : ''}
</p>`

Datenquelle: Statistik Austria – Zeitverwendung

---

Danksagung

• Isotype Font von Ric Stephens
• Idee basierend auf Umsetzung von Basile Simon
• AK Wien für die Inspiration durch diese Ausschreibung