31:T487,# Isotypify Your Data In the 1920s, Otto Neurath had a radical idea: what if statistics looked like *people* instead of bars or lines? Their [ISOTYPE system](https://en.wikipedia.org/wiki/Isotype_%28picture_language%29) turned dry numbers into rows of little figures — intuitive, democratic, human. This notebook revives that idea to visualize something stubbornly invisible: **who does what, and for how long**. Using Austria's national time-use survey ([Statistik Austria, 2021–22](https://www.statistik.at/statistiken/bevoelkerung-und-soziales/zeitverwendung)), each figure below represents roughly 2–10 out of every 100 people (depending on screen size 2, 5 or 10). Red for women, green for men. Activities marked **(F+)** or **(M+)** in the dropdown show the largest gender gaps. The picture that emerges is familiar — and still worth seeing. *Inspired by [Basile Simon's ISOTYPE sketch](https://observablehq.com/@basilesimon/isotype-sketch-a-wee-people-bar-chart). Isotype font by [Ric Stephens](https://www.dafont.com/isotype.font).*32:T5b6,{ const selectedData = timeUse.filter(d => d.activity === selectActivity); const womenData = selectedData.find(d => d.gender === "women"); const menData = selectedData.find(d => d.gender === "men"); const diffAbs = womenData?.participation_pct - menData?.participation_pct; const diffRel = womenData?.diff_relative; const activityLabel = selectActivity.replace(' - Gesamt', ''); return htl.html`

${Math.round(womenData?.participation_pct)}% aller Frauen geben an, in einer Woche Zeit mit ${activityLabel} zu verbringen. Frauen verbringen im Schnitt ${womenData?.participant_hours.toFixed(1).replace('.', ',')} Stunden damit. Für Männer belaufen sich diese Zahlen auf ${Math.round(menData?.participation_pct)}% und ${menData?.participant_hours.toFixed(1).replace('.', ',')} Stunden. 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.` : ''}

`; }33:T758,## How to use `makeIsoline()` **Minimal example:** ``` import {makeIsoline} from "@schmoigl/isotypify-your-data" makeIsoline({ persPerLineValue: 20, data: [ { key: "Women", value: 0.75, shapes: "abcdefg", fillHighlight: "#D62300", fillNormal: "#e8d5d5" } ] }) ``` **Parameters:** | Parameter | Default | Description | |---|---|---| | `data` | — | Array of row objects (see below) | | `vizWidth` | `width` | Total SVG width in px — use Observable's reactive `width` to make it responsive | | `cellWidth` | `18` | Horizontal space per figure in px — smaller = more figures per row, denser packing | | `cellHeight` | `100` | Row height in px | | `personHeight` | `100` | Isotype glyph font-size in px — effectively the figure height | | `persPerLineValue` | `floor(vizWidth / cellWidth) - 1` | Figures per row — this is your "N per 100" denominator | | `defaultShapes` | `"abcdefg…"` | Fallback glyph pool from the Isotype font; overridden per row by `shapes` | | `defaultFillHighlight` | `"steelblue"` | Fallback highlight color; overridden per row by `fillHighlight` | | `defaultFillNormal` | `"#ddd"` | Fallback background color; overridden per row by `fillNormal` | | `randomOrder` | `true` | `true`: scatter highlighted figures via MD5 hash; `false`: pack left-to-right | | `groupByKey` | `false` | `true`: rows sharing the same `key` are grouped under one heading | **Each `data` row object:** | Field | Required | Description | |---|---|---| | `key` | ✓ | Row label / group heading | | `value` | ✓ | Share to highlight, between `0` and `1` | | `subkey` | — | Label shown in "X von 100 **subkey**"; defaults to `"Personen"` | | `shapes` | — | String of Isotype font glyphs to use for this row | | `fillHighlight` | — | Color for highlighted figures | | `fillNormal` | — | Color for background figures |34:T11da,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 = "steelblue", // fallback color for highlighted (active) figures; per-row fillHighlight overrides this defaultFillNormal = "#ddd", // 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

; false: each row gets its own

} = params; const dataGroups = groupByKey ? Array.from(d3.group(data, d => d.key), ([key, items]) => ({ key, items })) : data.map(item => ({ key: item.key, items: [item] })); 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); 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 }; }; const renderPersonCustom = (p) => { const fillColor = p.highlight ? fillHighlight : fillNormal; return svg` ${p.avatar} ${p.avatar} `; }; const people = d3.range(persPerLineValue).map(generatePersonCustom); const vizSvg = html` `; const percentageText = html` ${Math.round(highlightValue * 100)} von 100 ${subkey} `; return html`
${groupByKey && rowIndex === 0 ? html`
${group.key}
` : html``} ${!groupByKey ? html`
${item.key}
` : html``} ${percentageText} ${vizSvg}
`; }); return html`
${groupRows}
`; }); if (!document.getElementById("isotype-font-face")) { const style = document.createElement("style"); style.id = "isotype-font-face"; style.textContent = `@font-face { font-family: 'Isotype'; src: url('https://cdn.jsdelivr.net/gh/schmoigl/isotypify@main/style/Retro%20Isotype.ttf') format('truetype'); font-weight: normal; font-style: normal; }`; document.head.appendChild(style); } return html`
${rows}
`; }35:T90d,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 })) }); }); 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`
`; selectWrapper.appendChild(select); const arrow = document.createElement('span'); arrow.className = 'select-arrow'; arrow.innerHTML = '▾'; selectWrapper.appendChild(arrow); 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; }36:T13a4,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) { 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 >> (j8+4)) & 0x0F] + hex_chr[(n >> (j8)) & 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; }37:T976,html``38:[] 2f:{"title":"Isotypify Your Data","cells":[{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viewof selectActivity = groupedSelect({\n value: \"Erwerbstätigkeit - Gesamt\",\n groups: activityGroups,\n title: \"Aktivität: \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"isolines = makeIsoline({\n data: vizData.filter(d => d.key == selectActivity),\n persPerLineValue: width > 1200 ? 50 : width > 600 ? 25 : 10,\n cellWidth: width > 1200 ? 23 : width > 600 ? 23 : 28,\n randomOrder: false,\n groupByKey: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"### Another Example: Beer and Wine Consumption","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"makeIsoline({\n persPerLineValue: 20,\n cellWidth: 40,\n data: [\n {\n key: \"Wein\",\n value: 0.22,\n shapes: \"Å\",\n fillHighlight: \"#1e3a5f\",\n fillNormal: \"#eee\",\n subkey: \"Getränken\"\n },\n {\n key: \"Bier\",\n value: 0.41,\n shapes: \"Ä\",\n fillHighlight: \"gray\",\n fillNormal: \"#eee\",\n subkey: \"Getränken\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"activityGroups = {\n const grouped = d3.group(timeUse, d => d.category);\n const thresholdAbs = 5;\n const thresholdRel = 50;\n\n return Array.from(grouped, ([category, items]) => ({\n label: category,\n options: [...new Set(items.map(d => d.activity))].map(activity => {\n const row = items.find(d => d.activity === activity);\n const diffAbs = row?.diff_participation || 0;\n const diffRel = row?.diff_relative || 0;\n const absDiffAbs = Math.abs(diffAbs);\n const absDiffRel = Math.abs(diffRel);\n let highlight = null;\n let marker = \"\";\n if (absDiffAbs > thresholdAbs || absDiffRel >= thresholdRel) {\n highlight = diffAbs > 0 ? \"female\" : \"male\";\n marker = diffAbs > 0 ? \" (F+)\" : \" (M+)\";\n }\n return { value: activity, label: activity + marker, highlight };\n })\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"vizData = timeUse.map(d => ({\n key: d.activity,\n subkey: d.gender === \"women\" ? \"Frauen\" : \"Männer\",\n gender: d.gender,\n value: d.participation_pct / 100,\n shapes: getShapes(d.activity, d.category, d.gender),\n fillHighlight: d.gender === \"women\" ? \"#D62300\" : \"#198737\",\n fillNormal: d.gender === \"women\" ? \"#F5EBDC\" : \"#F5EBDC\"\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"timeUse = d3.csv(\n \"https://raw.githubusercontent.com/schmoigl/isoline/main/data/zeitverwendung_long.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"getShapes = (activity, category, gender) => {\n const activityKey = `${activity}_${gender}`;\n const categoryKey = `${category}_${gender}`;\n return shapeLookupActivity.get(activityKey)\n || shapeLookupCategory.get(categoryKey)\n || shapeLookupDefault.get(gender)\n || \"abcdefghilmnopqSBDEGHIJKLNOPRSTVWXYZ\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"shapeLookupDefault = new Map([\n [\"women\", \"abcdefghilmnopqB\"],\n [\"men\", \"SDEGHIJKLNOPRSTVWZ\"],\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"shapeLookupActivity = new Map([\n // Add activity-level overrides here if needed\n // [\"Nahrungsmittelzubereitung_women\", \"abc\"],\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"shapeLookupCategory = new Map([\n [\"Essen und andere persönliche Tätigkeiten_women\", \"echadfba\"],\n [\"Essen und andere persönliche Tätigkeiten_men\", \"REGATNGH\"],\n [\"Erwerbstätigkeit_women\", \"coilmnpq>\"],\n [\"Erwerbstätigkeit_men\", \"PTJFWY<\"],\n [\"Aus- und Weiterbildung_women\", \"Bhapb\"],\n [\"Aus- und Weiterbildung_men\", \"AHDG\"],\n [\"Sorgearbeit in Haushalt und Familie_women\", \"a27b1b14bba2a6\"],\n [\"Sorgearbeit in Haushalt und Familie_men\", \"G1J26PJ2G7P3G86\"],\n [\"Freiwilligentätigkeiten_women\", \"jiab\"],\n [\"Freiwilligentätigkeiten_men\", \"LGPGUPL\"],\n [\"Soziale Kontakte und Freizeit_women\", \"echadfbagB\"],\n [\"Soziale Kontakte und Freizeit_men\", \"REGZATINGH\"],\n [\"Nicht näher bestimmte Zeitverwendung_women\", \"abcdefghilmnopqB\"],\n [\"Nicht näher bestimmte Zeitverwendung_men\", \"SDEGHIJKLNOPRSTVWZ\"],\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}