31:T514,md`Reading every word in a document is slow. Text skimming is a reading technique of rapid eye movement across a large amount of text to acquire key ideas and content overview. At a high level, this reading strategy includes reading titles, headers and captions; and at a lowerlevel, this requires the reader to dip into the text for words such as proper nouns, unusual words and enumerations. Typographic variations, such as font weight, width or even x-height are visually salient without changing font size. The following paragraphs are from Lewis Carol's *Alice in Wonderland*, where the least frequent words in English are formatted most heavily. Bold words such as **rabbit**, **waistcoat-pocket**, **Alice** allow the reader to quickly get the main idea of a scentence or paragraph with low effort. In this example, you can paste your own text and try out different formatting attributes. For more information on formatting text for skimming, (or aiding pronounciation, indicating spelling errors, and more), more examples are described in the book *Visualizing with Text* (Richard Brath, 2020, [A.K. Peters](https://www.routledge.com/Visualizing-with-Text/Brath/p/book/9780367259266), [Amazon](https://www.amazon.com/Visualizing-Text-AK-Peters-Visualization-dp-0367259265/dp/0367259265)).`32:Ta37,//VARIABLE FONTS! If this visualization isn't working you might need to update or switch browsers (tested on firefox & chrome). I was able to get this running thanks to other some example experiments with v-fonts done by (@jmahabal/variable-fonts-playground). //Amstelvar (https://github.com/TypeNetwork/Amstelvar) is a variable fonts with many low level controls: 15+ variable axes to use. The axes names are based on this (https://variationsguide.typenetwork.com/) proposal for standardizing v-fonts. The quick rundown is that any "Opaque" variable is conrolling how thick the black of a single glyph is while any "Transparent" variable controls how much white negative space there is. X-height is a common element discussed in font design but it is almost always fixed in most font families. With YTLC (Y Transparent Lower Case) we can actually set the x-height on Amstelvar. html` `33:[{"id":"63d447964ab1fad260a7a3de59f5b6328e819372ca2054615f6e4540c88237b3e66fa71fa8d910a35655e50dba72b7a5d563feaae39ba34cf544b72dd4bc32ee","href":"https://static.observableusercontent.com/files/63d447964ab1fad260a7a3de59f5b6328e819372ca2054615f6e4540c88237b3e66fa71fa8d910a35655e50dba72b7a5d563feaae39ba34cf544b72dd4bc32ee","name":"wordFrequencyWikipedia.csv","type":"text/csv","lastModified":1595601514587.166,"size":448684},{"id":"148c972e31e626ad930069ef8161e83168865de76ff8ae7524d5d568535c3e4b2b8ab39f6b9abab29a0d31becfb3852f8ea1fc615cd182ba2df3b5646d925dc2","href":"https://static.observableusercontent.com/files/148c972e31e626ad930069ef8161e83168865de76ff8ae7524d5d568535c3e4b2b8ab39f6b9abab29a0d31becfb3852f8ea1fc615cd182ba2df3b5646d925dc2","name":"Alice in Wonderland.txt","type":"text/plain","lastModified":1595610561124.662,"size":173183}] 2f:{"title":"Word Skimming","cells":[{"id":0,"value":"md`# Word Skimming`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof input = textarea({\n title: \"Your Text Here!\", \n value: placeholder,\n placeholder: \"Insert your text here...\", \n spellcheck: true,\n width: \"100%\",\n rows: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"viewof textAxis = select({\n title: \"Format text by:\",\n options: [\n { label: \"Weight\", value: \"weight\" },\n { label: \"Width\", value: \"width\" },\n { label: \"X-Height\", value: \"xhigh\" },\n { label: \"Weight and Width\", value: \"weightWidth\"},\n { label: \"Weight and X-Height\", value: \"weightXhigh\"},\n ],\n value: \"weight\"\n})\n// { label: \"Caps and Font\", value: \"caps\" },","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"chart = {\n const body = html`\n \n \n

${Array.from(words, d => html`\n ${formatTerm(d)}\n `)}\n

\n `\n\n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`## Data and Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"words = { \n const data = nlp(input).terms().json()\n \n//word.lower is the token word from the target text with case and punctuation removed. word.lower is then compared to the corpus word frequency list (wikiFreq below) which will then be used to set the formatting \n\n//example object:\n//0: Object {text: \"ALICE\", terms: Array(1), lower: \"alice\"}\n//terms: Array(1) [0: Object {text: \"ALICE\", tags: Array(0), pre: \"\", post: \" \"}\n \n data.forEach(d => d.lower = d.terms[0].text.toLowerCase())\n dataParse(data)\n \n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"// word frequency and count never got used for this visualization, we mostly care about rank. They are left in because they are intersting properties that could be useful.\ndataParse = function(arr){\n const counts = d3.rollup(arr, v => v.length, d => d.lower) \n \n arr.forEach(function(d){ \n const match = d.lower\n\n d.count = counts.get(match) // sets the count of each word\n\n// need a \"try\" condition for freqency and rank since .find() will fail if it encounters a word outside the given wikipedia data. When .find() fails set the word to lowest frequency (1) / highest rank (20,000) possible (ie. not in 20,000 most common words\n try { d.freq = wikiFreq.find((obj) => obj.word === match).freq } catch {d.freq = 1} // freq of use on wikipedia\n try { d.rank = wikiFreq.find((obj) => obj.word === match).rank } catch {d.rank = wikiFreq.length + 1 } // rank \n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"//Via en.wiktionary.org/wiki/Wiktionary:Frequency_lists/PG/2006/04/1-10000\n//20,000 most frequently used words on Wikipedia! Frequency is occurences per billion words while Rank is the relative usage of the word (ie. rank 1 - the most used english word, rank 2 - 2nd most used, ect.)\n\n//There *may* be some issues with this list, lemmatization is assumbed to be captured in this list (ie. the list is based on pure word frequencies, run, ran and running have different frequencies.)\n\nwikiFreq = Object.assign(d3.csvParse(await FileAttachment(\"wordFrequencyWikipedia.csv\").text(), \n ({Word, Frequency_per_billion, Rank}) =>\n ({word: Word, freq: +Frequency_per_billion, rank: +Rank})\n))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":"//formats the text before entering html to remove some unwanted pre/post word characters and add some line breaks/italics\nformatTerm = function(d){\n \n var term = d.terms[0].pre.concat(d.terms[0].text, d.terms[0].post)\n \n if (d.terms[0].text.includes(\"_\")) {term = \"\" + term.replace(/_/g,\"\") + \"\"}\n if (d.terms[0].post.includes(\"\\n\\n\")) {term = term + \"

\"} \n return term;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"//script that changes the font properties based on the dropdown\nupdate = {\n const elements = document.getElementsByClassName(\"word\")\n \n words.forEach(function(d, i){\n const rank = d.rank;\n \n (textAxis == \"weight\" || textAxis == \"weightWidth\" || textAxis == \"weightXhigh\")? \n elements[i].style.setProperty(\"--text-wght\", rankWeight(d.rank))\n :elements[i].style.setProperty(\"--text-wght\", 80); \n (textAxis == \"width\" || textAxis == \"weightWidth\")? \n elements[i].style.setProperty(\"--text-wdth\", rankWidth(d.rank))\n :elements[i].style.setProperty(\"--text-wdth\", 400); \n (textAxis == \"xhigh\" || textAxis == \"weightXhigh\" )? \n elements[i].style.setProperty(\"--text-YTLC\", rankYTLC(d.rank))\n :elements[i].style.setProperty(\"--text-YTLC\", 500);\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"rankWeight = d3.scaleQuantile()\n .domain(words.map(d => d.rank)) // Alice in Wonderland: [1, 20000]\n .range([50, 100, 100, 150, 150, 150, 200, 200, 250]) // Amstelvar weight range (0, 250)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1145,"value":"rankWidth = d3.scaleQuantile()\n .domain(words.map(d => d.rank)) // Alice in Wonderland: [1, 20000]\n .range([100, 175, 175, 250, 250, 250, 325, 325, 400]) // Amstelvar width range (50, 400)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"rankYTLC = d3.scaleQuantile()\n .domain(words.map(d => d.rank)) // Alice in Wonderland: [1, 20000]\n .range([450, 487.5, 487.5, 525, 525, 525, 562.5, 562.5, 600]) // Amstelvar width range (50, 400)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"d3 = {\n const d3 = await require(\"d3@5\", \"d3-array@2\");\n return d3;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"// nlp = {\n// let nlp = await require('compromise/builds/compromise-tokenize.js')\n// let plugin = await require('compromise-paragraphs')\n// nlp.extend(plugin)\n// return nlp\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"nlp = require('compromise')","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"nlp.version","pinned":true,"hidden":false,"mode":"ojs"},{"id":1103,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {textarea} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"placeholder = (await FileAttachment(\"Alice in Wonderland.txt\").text()).slice(0, 1510)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}