31:Ta7d,{ let svgWidth = width; const spacing = 0.0; const margin = { left: 0.2, right: 0.2, top: 0.3, bottom: -0.1, } const w = 1.25; const h = 1.6; //const maxHeight = window.outerHeight - 250; const maxLength = Math.max(...sentences.map((d) => d.length)) const ar = (w * maxLength + margin.left + margin.right) / (h * sentences.length + margin.top + margin.bottom) let svgHeight = svgWidth / ar; if (svgHeight > maxHeight) { svgHeight = maxHeight; svgWidth = svgHeight * ar; } return svg` `; } 32:T68a,
--- ## Notes Buy the book here or check for a used one. Some cool words: Aegilops, cremnophobia, bierstube, gymnoplast, galactic, eunoia ### Things to try maybe one day - [x] could do lines from poetry in this style (it works by just pasting in the text in the text box) - https://www.poetryfoundation.org/poems/43311/sadie-and-maud - https://www.poetryfoundation.org/poems/42892/fireflies-in-the-garden - [ ] repeating the same phrases with different ordering of letters around the circle? - [ ] have ordering be based on regular shape for each word? - [ ] use parallel lines instead of circle? - [ ] spring layout of resulting “word networks”? - [ ] what would the equivalent be for sentences? - [ ] use types of letters? e.g. vowels/consonants - [ ] or phonemes? see rhymes visually? ### Some links - https://www.reddit.com/r/gifs/comments/huingi/the_visual_history_of_the_evolution_of_the/ - https://www.youtube.com/watch?v=3kGuN8WIGNc - https://en.wikipedia.org/wiki/History_of_the_alphabet - https://www.reddit.com/r/grammar/comments/xh9ukp/what_is_the_longest_word_containing_consecutive/ - https://xkcd.com/2794/ Could search for words that have interesting geometric/visual properties: - longest without any crossings - longest line / longest line per letter - most imbalanced on right / left - largest area - symmetrical - rings / no dangling lines - purely clockwise / counter-clockwise - group words that have the same shape ---
33:T4f7,// style { return html`

check here for stylez

` }34:[] 2f:{"title":"The Image of Language","cells":[{"id":918,"value":"# The Image of Language\n\nPlaying with the concept described in Michael Winkler's [book](https://michaelwinklerart.com/publications/).","pinned":false,"hidden":false,"mode":"md"},{"id":959,"value":"viewof passage = Inputs.textarea({\n label: \"Text\",\n value: \"The detail of the pattern is movement\",\n rows: 5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"viewof big = Inputs.range([5, 35], { value: 18, label: \"top letter spacing (degrees)\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"viewof maxHeight = Inputs.range([400, 2000], {label: \"max height\", value: window.outerHeight - 250, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"alphabet = \"abcdefghijklmnopqrstuvwxyz\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"coordinates = makeWinklerCoordinates(alphabet, big)","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"function makeWinklerCoordinates(alphabet, big) {\n const small = (360 - 8 * big) / 18;\n const angle = new Map();\n for (let i = 0; i < alphabet.length; i++) {\n if (i <= 8) {\n angle.set(alphabet[i], -90 + (i - 4) * big);\n } else {\n angle.set(alphabet[i], angle.get(\"i\") + (i - 8) * small);\n }\n }\n const coords = new Map();\n for (let i = 0; i < alphabet.length; i++) {\n const x = (angle.get(alphabet[i]) * Math.PI) / 180;\n coords.set(alphabet[i], [Math.cos(x), Math.sin(x), x]);\n }\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"function makeShuffledCoordinates(alphabet) {\n const shuffled = _.shuffle(alphabet);\n const angle = new Map();\n for (let i = 0; i < alphabet.length; i++) {\n angle.set(shuffled[i], 360 * i / alphabet.length);\n }\n const coords = new Map();\n for (let i = 0; i < alphabet.length; i++) {\n const x = (angle.get(alphabet[i]) * Math.PI) / 180;\n coords.set(alphabet[i], [Math.cos(x), Math.sin(x), x]);\n }\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"sentences = passage\n .replace(/[\\p{P}$+<=>^`|~0-9]/gu, \"\")\n .toLowerCase()\n .split(\"\\n\")\n .map((d) => d.split(\" \").filter((d) => d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"function makeWordPath(cx, cy, word) {\n const result = [];\n for (let character of word) {\n let [x, y] = coordinates.get(character);\n result.push([cx + 0.5 * x, cy + 0.5 * y]);\n }\n return d3.line()(result);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"## Messing around with phonemes, too","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"cmudict = {\n const module = await import(\n \"https://cdn.jsdelivr.net/gh/stdlib-js/datasets-cmudict@esm/index.mjs\"\n );\n const cmudict = module.default;\n const all = cmudict({ data: \"dict\" });\n const firstLast = d3.group(Object.keys(all), (d) => d.at(0) + d.at(-1));\n function lookup(word) {\n let result = all[word];\n if (result) {\n return result;\n } else {\n let key = word.at(0) + word.at(-1);\n let candidates = firstLast.get(key);\n let minDistance = Infinity;\n let minWord = \"HUH\";\n candidates.forEach(function (c) {\n let d = distance(c, word);\n if (d <= minDistance) {\n minDistance = d;\n minWord = c;\n }\n });\n return all[minWord];\n }\n }\n return {\n dict: all,\n firstLast: firstLast,\n phones: cmudict({ data: \"phones\" }),\n symbols: cmudict({ data: \"symbols\" }),\n punctuation: cmudict({ data: \"vp\" }),\n lookup: lookup\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"cmudict.lookup(\"CRUELLEST\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"cmudict.lookup(\"GENE\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"getPhones(\"GENE\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"cmudict.phones","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"function getPhones(text) {\n const words = text.toUpperCase().split(/[ -]+/);\n const result = [];\n words.forEach(function (word) {\n console.log(word);\n const noVariants = cmudict.lookup(word).replace(/\\d+/g, \"\");\n result.push(...noVariants.split(\" \").map((d) => cmudict.phones[d]));\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"getPhones(\"hello world I am batman\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"new Set(Object.values(cmudict.phones))","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"allPhones = sentences.map((s) => s.map(getPhones)).map(_.flatten)","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"distance = {\n const module = await import(\n \"https://cdn.skypack.dev/js-levenshtein@1.1.6?min\"\n );\n return module.default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"maxPhoneLength = Math.max(...allPhones.map((d) => d.length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1330,"value":"spacing = 0.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":507,"value":"phoneSize = {\n let maxHeight = window.outerHeight - 250;\n let w = width;\n let h = width * (sentences.length / maxPhoneLength);\n if (h > maxHeight) {\n h = maxHeight;\n w = h * (maxPhoneLength / sentences.length);\n }\n return {\n width: w,\n height: h\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(new Set(Object.values(cmudict.phones)))\n .range(d3.schemeAccent)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}