2b:null 2c:["$","title",null,{"children":"Isotype sketch: a “wee people” bar chart | Basile Simon | Observable"}] 31:T188c,//https://stackoverflow.com/questions/1655769/fastest-md5-implementation-in-javascript 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; } /* there needs to be support for Unicode here, * unless we pretend that we can redefine the MD-5 * algorithm for multi-byte characters (perhaps * by adding every four 16-bit characters and * shortening the sum to 32 bits). Otherwise * I suggest performing MD-5 as if every character * was two bytes--e.g., 0040 0025 = @%--but then * how will an ordinary MD-5 sum be matched? * There is no way to standardize text to something * like UTF-8 before transformation; speed cost is * utterly prohibitive. The JavaScript standard * itself needs to look at this: it should start * providing access to strings as preformed UTF-8 * 8-bit unsigned value arrays. */ function md5blk(s) { /* I figured global was faster. */ var md5blks = [], i; /* Andy King said do it this way. */ 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)); } /* this function is much faster, so if possible we use it. Some IEs are the only ones I know of that need the idiotic second function, generated by an if clause. */ 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; }32:[{"id":"6f7ec285d44798e681a59c01547582dfd62af6572564a6e916cffb1c5dcd68bfd81fb75fc4d6a8a5e656cfc700fcb362490a76f52cccacb5dbeea48ab85c69b7","href":"https://static.observableusercontent.com/files/6f7ec285d44798e681a59c01547582dfd62af6572564a6e916cffb1c5dcd68bfd81fb75fc4d6a8a5e656cfc700fcb362490a76f52cccacb5dbeea48ab85c69b7","name":"Screenshot 2020-12-22 at 15.25.50.png","type":"image/png","lastModified":1608648665729.548,"size":658236},{"id":"3a8238e5575c36b2102343cd30f8f16327c77d732f3d4fb46902d95d790078186ec8c25620097b546294ad68b88f753ab53d52cd2966770123ae78fdb5d10c68","href":"https://static.observableusercontent.com/files/3a8238e5575c36b2102343cd30f8f16327c77d732f3d4fb46902d95d790078186ec8c25620097b546294ad68b88f753ab53d52cd2966770123ae78fdb5d10c68","name":"weepeople.css","type":"text/css","lastModified":1608648665729.548,"size":77947}] 2f:{"id":"3b21d6ef95e6b55c","slug":"isotype-sketch-a-wee-people-bar-chart","title":"Isotype sketch: a “wee people” bar chart","thumbnail":"cf472603965709950849b8d8228f0f918a48925159e0cb23d79c10cf8291ff13","access_level":"public","create_time":"$D2020-12-22T14:51:05.729Z","update_time":"$D2021-02-05T10:37:49.614Z","view_time":null,"first_public_time":"$D2021-01-10T15:11:45.635Z","fork":true,"stars":16,"starred":false,"owner":{"type":"team","id":"168555ed91a5406b","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":"starter_2024"},"version":369,"publish_version":369,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b5ae19fcef6b0e4","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":null}],"members":[{"type":"individual","id":"9b5ae19fcef6b0e4","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"6987df46198128bd","slug":"showcase","title":"showcase","owner":{"id":"168555ed91a5406b","login":"basilesimon","name":"Basile Simon"}},"type":"notebook","body":{"title":"Isotype sketch: a “wee people” bar chart","cells":[{"id":0,"value":"md`# Isotype sketch: a “wee people” bar chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"md`I'm working on a project that's going to look at survey data, and I've been thinking about how to represent **people-specific data points** we're going to collect.\n\n_“30% of users describe as female”_ is factually correct, but I find this wording falls short of the bigger picture: \n\n**“Among _your_ colleagues, 3 out of 10 describe as female”** reads better. It's about people, and these people are the reader's peers, in the surveyed community.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"viz = {\n const people = d3.range(persPerLine).map(generatePerson);\n const cellWidth = config.cell.width;\n const height = 150;\n\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"minibar = {\n const div = d3\n .create('div')\n .attr('id', 'bar')\n .style('transform', `translate(0,-20px)`);\n\n while (true) {\n const children = div\n .selectAll('.children')\n .data([highlight * 100, 100 - highlight * 100]);\n\n const enter = children\n .enter()\n .append('div')\n .attr('class', 'children')\n .style('width', d => `${d}%`)\n .style('transition', 'width 0.5s')\n .style('background-color', (d, i) => (i === 0 ? \"steelblue\" : \"#ddd\"))\n .append('span')\n .style('transform', `translate(0,30px)`)\n .style('color', (d, i) => (i === 0 ? \"steelblue\" : \"#ddd\"))\n .html(d => `${Math.round(d)}%`);\n\n const exit = children.exit().remove();\n\n children.merge(children).style('width', d => `${d}%`);\n\n yield div.node();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"viewof highlight = slider({\n title: \"Highlight (%)\",\n min: 0,\n max: 1,\n step: 0.01,\n format: \".0%\",\n value: 0.3,\n description: \"How many percent of the bar should we highlight?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"highlightCount = Math.round(persPerLine * highlight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"md`\n

John G Wade, [The Isotype Revolution](https://www.johngrimwade.com/blog/2017/02/13/the-isotype-revolution/)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"persPerLine = Math.floor(width / config.cell.width) - 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"config = ({\n cell: { width: 10, height: 70 },\n person: { width: 10, height: 80 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"/**\n * Render a person as a weepeople character\n * Uses a different color if p.infected == true\n * https://observablehq.com/@elibryan/covid-19-test-accuracy-simulator\n */\nrenderPerson = (p, params = {}) => {\n const { personDims = config.person } = params;\n const fillColor = p.highlight ? \"steelblue\" : \"#ddd\";\n const strokeColor = \"#fff\";\n\n // Render the stroke and body separately for cleaner outline\n return svg`\n\n \n ${p.avatar}\n \n\n\n ${p.avatar}\n\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"/**\n * Generate a random-ish person based on the seed\n * https://observablehq.com/@elibryan/covid-19-test-accuracy-simulator\n */\ngeneratePerson = seed => {\n const avatarChoices = \"abcdefghijklmnopqrstuABCDEEFGHIJKLMNOPQRSTUVWXYZ\";\n const id = \"person_\" + d3.format(\"0>4\")(seed);\n // Choose a letter for the avatar based on a hash of the ID\n const avatar =\n avatarChoices[parseInt(md5(id).slice(0, 2), 16) % avatarChoices.length];\n return {\n id,\n avatar,\n highlight: seed < highlightCount ? true : false\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"md`## Acknowledgements\n- [@elibryan/covid-19-test-accuracy-simulator](https://observablehq.com/@elibryan/covid-19-test-accuracy-simulator) for the machinery behind rendering the glyphs, thank you!\n- [@propublicz/weepeople](https://github.com/propublica/weepeople) for the glyphs, icons, and overall great idea. Released under Creative Commons.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md` ### Links and utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"barStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"/**\n * Choose with/without replacement\n **/\nchoose = (arr, n = 1, replace = true) => {\n // Simple random choice\n const chooseOne = arr => {\n if (arr.length == 0) throw \"Can't choose from an empty array\";\n return arr[Math.floor(Math.random() * arr.length)];\n };\n\n if (replace == false && arr.length < n) {\n throw \"Can't choose more than arr.length items\";\n }\n\n //Get a set of indices to choose from [0, ..., array.length -1]\n let indicesRemaining = new Set(arr.map((_, i) => i));\n\n let output = [];\n\n // For each selection we need to make...\n for (let i = 0; i < n; i++) {\n // Choose the next index / item from the array\n const nextIndex = chooseOne(Array.from(indicesRemaining));\n output.push(arr[nextIndex]);\n\n // If we're not replacing, remove the index so we don't choose it again\n if (replace === false) {\n indicesRemaining.delete(nextIndex);\n }\n }\n return output;\n}\n//choose([1, 2, 3, 4, 5], 3, false)\n//choose([1, 2, 3, 4, 5], 10, true)\n//choose([], 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"import { slider, radio, button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"myStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"