2e:null 2f:["$","title",null,{"children":"Dear Dr. Myriam C. Traub, | emma-ba | Observable"}] 34:Ta2e,{ const context = DOM.context2d(width, height); const worker = new Worker(script); var start = true; var index_words = []; var index_y = []; function messaged({data: points}) { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.globalAlpha = 0.2; //.context.fillStyle = "#000"; const colors = ["#000000", "#111111", "#222222", "#333333", "#444444", "#666666", "#886688", "#993399", "#990099", "#cc00cc", "#ff00ff"]; const n_words = text.length; const mid_point = n_words / 2; if(start){ start = false; for (let i = 0, n = points.length; i < n; i += 2) { var y = points[i + 1] + (Math.random()-0.5) * 200; var prop = 1 - y/height; var k_prop = n_words * prop; k_prop = Math.min(k_prop, n_words); k_prop = Math.max(k_prop, 0); var penalty = Math.abs( Math.log( Math.abs( 1.2*(k_prop - mid_point)/mid_point) ) ) ; var quantile_ref = 0; var dir = -1; if(k_prop > mid_point){ quantile_ref = 100; dir = 1; } var quantile; quantile = (quantile_ref - dir * Math.pow(penalty*5, 1)) / 100; //quantile = 1/(1+Math.pow(Math.E, -((1-k_prop)/10^10) )); quantile = Math.min(quantile, 1); quantile = Math.max(quantile, 0); var k_test = Math.round(quantile * n_words + (Math.random()-0.5) * 10); k_test = Math.max(k_test, 0); k_test = Math.min(k_test, n_words-1); index_words.push(k_test); } } for (let i = 0, n = points.length; i < n; i += 2) { const x = points[i], y = points[i + 1]; var k = index_words[i/2]; //const size = Math.sqrt(Math.round(text[k].tfidf)*2)*200 + 6; const size = Math.min( Math.round(Math.max(text[k].tfidf, 0)*500) + Math.abs(text[k].emotion - 5) + 8, 30); context.font = size + "px Georgia"; context.textAlign = "center"; var hex = colors[text[k].emotion]; var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16); var alpha = Math.min(size/50 + Math.abs(text[k].emotion - 5)/10 + 0.1, 1); context.fillStyle = "rgba("+r+","+g+","+b+"," + alpha + ")"; context.fillText(text[k].token, x, y); // } context.fill(); } invalidation.then(() => worker.terminate()); worker.addEventListener("message", messaged); worker.postMessage({start, data, data2, data3, width, height, n}); return context.canvas; }35:T1519,md`Here is some explanation about the artwork. First some (boring) technical specifications, then something more fun about what I meant to say with the art :) Sorry it's a bit long.... ### Text processing - The artwork uses the corpus of words from Myriam's thesis. - Uninteresting words are excluded using their POS (Part Of Speech, aka their grammatical function). Basically anything that is not a noun, verb, adverb, adjective... is taken out. Family names are kept. - Each word is associated to an emotion, using a pre-made classifier with 11 classes: 5 levels of negative emotions (-1 to -5), 5 levels of positive emotion (1 to 5) and neutral emotions (well it's more a discrete regression than a classification). - Each word is also given a tf-idf score, considering each page of the thesis as a document. The library I used calculates tf-idf with a log included (negative values are possible), and with a score for all the documents (pages) in which the word appears. In the end, I select the max tf-idf for each word. - So we get single words, each with a score for emotion (-5 to 5) and a tf-idf score (-inf to +inf in theory, in practice often close to 0). ### Visualization - I took picture of Myriam from the internet, and used a template to make it a point by point image (using Voronoi diagram: https://observablehq.com/@mbostock/voronoi-stippling). - Using the coordinate of each, the words can be placed to reconstruct Myriam's portrait using words. - The last part is about how I positioned the words and colored/sized them... - The size of words depends on their tf-idf scores (mostly) and a little bit on their emotion. The higher the tf-idf, or the more extreme the emotion, the bigger the words. - Negative words are placed on the bottom, positive words on top. The more positive the emotion the higher the word is. - The colors also match the emotion. The more negative, the more it's black. The more positive, the more it's magenta. What shades of grey-magenta in between. - There are fewer words with extreme emotions (eg, scores of -5 or +5), so the "extreme" words are often repeated. - There's a bit of randomness in how the words are repeated or placed. So the most colorful words change when you refresh the page, the position of words as well. ### Animation - There are 3 rotating images. Each time the image change, the words are repositioned gradually to show the new image.- The position of positive and negative words will gradually shift in this process. - First the words are attracted to the top right corner. It will make the positive words "shrink", and the negative words will cover the whole picture (it looks dramatic!). - After the image is covered with "black" words, the movement will reverse. The words will then be attracted by the bottom left corner. - The negative words will shrink, and the positive words will expand. After a while, the image will be made on purple words only (it looks more joyful!)- The animation of words shifting from top right to bottom left, and the other way around, will go on forever in a never ending loop. - After a long time, the black and purple words will be completely mixed up: black can be anywhere from top to bottom, and purple too. When all colors are mixed up, Myriam's portrait is harder to see, interestingly. ### What it means - It's meant to show that the PhD process (like anything) is full of good and bad emotions, sometimes quite extreme! - It's meant to show how our mind can oscillate between optimism and pessimism. How positive or negative things can take all our mental space, sometimes. Or even when it's not extreme, there is always only a subset of things (words) in our mind, we have a different subsets of things in mind over time, on which we focus "one thing at a time". - It's meant to show how our feeling evolve through time, and how it constructs our identity. But not a fixed identity. As our mind explore things, we are not the same person at any step in the process. - So it can also show the scientific process as well: rethinking things, questioning things. Same as the portrait of Myriam can be made of different words, the real things (the real Myriam) can be described or characterised in many different ways. Exploring these characteristics is what the scientific process does. - It's also meant to show resilience as well. How we survive a PhD, going from different extreme emotions :) ### The colors... - Finally, the colors I chose are special. Beware it's gonna get really geeky now :) - These colors (black, grey, white, magenta) have no single light wave. They are color sensations that our brain generates. - Magenta is a mixture of red and blue light waves. It's impossible to have a single light wave frequency that would be perceived as magenta (unlike yellow that can either mix green and read frequency, or a single frequency).- White can be made with different mixtures (like RGB in our screen). - So why colors with no single wave frequency? Because they are constructs of our mind. They are illusions. So it echoes my point about the scientific process: find our what's real or what's an illusionary perception. - It also echos my point about what defines us, what constructs our personalities: a bunch of perceptions that are not necessarily real (which is great!). ... I hope you liked the explanations. Sorry again if it's a bit long!`36:T161e,script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); onmessage = event => { const {data: {start, data, data2, data3, width, height, n}} = event; const points = new Float64Array(n * 2); const c = new Float64Array(n * 2); const s = new Float64Array(n); // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { for (let j = 0; j < 30; ++j) { const x = points[i * 2] = Math.floor(Math.random() * width); const y = points[i * 2 + 1] = Math.floor(Math.random() * height); if (Math.random() < start[y * width + x]) break; } } const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); var wait = Date.now(); var timer = Date.now(); while(true){ for (let looping = 0; looping < 12; ++looping) { for (let k = 0; k < 80; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); // Get image data if(looping % 3 == 0) { data_pick = data3; } else if(looping % 3 == 1){ data_pick = data; } else { data_pick = data2; } for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data_pick[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 20; for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; //points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; //points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.1) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.9) * w; } postMessage(points); voronoi.update(); } wait = Date.now(); timer = Date.now(); while(timer - wait < 1000){ timer = Date.now(); } } for (let looping = 0; looping < 24; ++looping) { for (let k = 0; k < 80; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); // Get image data if(looping % 3 == 0) { data_pick = data2; } else if(looping % 3 == 1){ data_pick = data3; } else { data_pick = data; } for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data_pick[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 20; for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; //points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; //points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.9) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.1) * w; } postMessage(points); voronoi.update(); } wait = Date.now(); timer = Date.now(); while(timer - wait < 1000){ timer = Date.now(); } } for (let looping = 0; looping < 12; ++looping) { for (let k = 0; k < 80; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); // Get image data if(looping % 3 == 0) { data_pick = data2; } else if(looping % 3 == 1){ data_pick = data3; } else { data_pick = data; } for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data_pick[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 20; for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; //points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; //points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() + Math.random() - Math.random()) * w; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.1) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.9) * w; } postMessage(points); voronoi.update(); } wait = Date.now(); timer = Date.now(); while(timer - wait < 1000){ timer = Date.now(); } } } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }37:[{"id":"3f4bb3d06969779062b077fdae4e4347fee572a9424315b280401522f33a652c6b2f156d0298ced7929bc79f3a797c0571b2537f0649a83d5970ecc0a82e55c3","href":"https://static.observableusercontent.com/files/3f4bb3d06969779062b077fdae4e4347fee572a9424315b280401522f33a652c6b2f156d0298ced7929bc79f3a797c0571b2537f0649a83d5970ecc0a82e55c3","name":"start.png","type":"image/png","lastModified":1588937018411.424,"size":7820},{"id":"80004efbbb3276588441ee4f39a8d6c166b3c1ab9c26768d191c9d1c8731d24fab0fd263411fde02a9a8189eeb6e5b78f5f61611b01a5e5ca7b7a6a0dab16462","href":"https://static.observableusercontent.com/files/80004efbbb3276588441ee4f39a8d6c166b3c1ab9c26768d191c9d1c8731d24fab0fd263411fde02a9a8189eeb6e5b78f5f61611b01a5e5ca7b7a6a0dab16462","name":"Myriam_text@8.csv","type":"text/csv","lastModified":1589005138790.474,"size":182268},{"id":"779f839901d10c88e756d2f05f77069e14abf1840a655444cd7df9b7d60b781e1e5dccb543af12a00473266cdcfd5efd483d645d43c5bcf9de501d3471a162ce","href":"https://static.observableusercontent.com/files/779f839901d10c88e756d2f05f77069e14abf1840a655444cd7df9b7d60b781e1e5dccb543af12a00473266cdcfd5efd483d645d43c5bcf9de501d3471a162ce","name":"fb_v4@1.png","type":"image/png","lastModified":1589008165554.485,"size":115338},{"id":"e4672e92571eba1dc5df2500323b8ef2d4f62a49c615c21a3696bf7c6d7b91e8ec0fec22e96a4ac69da40849c75d368809cb95d0607235738c2771e6aca364e5","href":"https://static.observableusercontent.com/files/e4672e92571eba1dc5df2500323b8ef2d4f62a49c615c21a3696bf7c6d7b91e8ec0fec22e96a4ac69da40849c75d368809cb95d0607235738c2771e6aca364e5","name":"conf2_v4.png","type":"image/png","lastModified":1589007384931.308,"size":7933},{"id":"11051979336c267e777ca5f2dd14ecbce945198c66c46a5ddfb1ea1157e463de05b51e841d30441af42f408a16f0b30826476d39976255a973838b3fb80f4712","href":"https://static.observableusercontent.com/files/11051979336c267e777ca5f2dd14ecbce945198c66c46a5ddfb1ea1157e463de05b51e841d30441af42f408a16f0b30826476d39976255a973838b3fb80f4712","name":"linkedin_v3.png","type":"image/png","lastModified":1589006652176.267,"size":10815}] 32:{"id":"f88c3fd3a788671f","slug":"myriam-phd-art","title":"Dear Dr. Myriam C. Traub,","thumbnail":"08a1ff673822085f72df70ae166895588b290f96736771a7c11979c95876ec7d","access_level":"public","create_time":"$D2020-05-08T11:23:38.411Z","update_time":"$D2020-05-10T07:42:59.025Z","view_time":null,"first_public_time":"$D2020-05-09T07:10:15.689Z","has_unpublished_edits":null,"fork":{"id":"ea93014d69471a99","slug":"faith","title":"fAIth","owner":{"id":"5d9b00b2cdcd8028","login":"emma-ba","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"5d9b00b2cdcd8028","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":"starter_2024"},"version":1351,"publish_version":1351,"role":null,"authored":false,"authors":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null}],"members":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dear Dr. Myriam C. Traub,","cells":[{"id":0,"value":"md`# Dear Dr. Myriam C. Traub,\n**Congratulations for achieving this adventure!** For going through this mind-bending process of making sense of complex information, information processing tools, and of the humanities they bring to life. May this artwork remind you of the richness of your mind, and the richness of landscapes you can explore.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"d3 = require(\"d3-dsv@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"text = d3.csvParse(await FileAttachment(\"Myriam_text@8.csv\").text());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"n = 4000 //text.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"linkedin_v3.png\").image().then(image => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"data2 = FileAttachment(\"conf2_v4.png\").image().then(image => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"data3 = FileAttachment(\"fb_v4@1.png\").image().then(image => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"data_start = FileAttachment(\"start.png\").image().then(image => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"