2c:null 2d:["$","title",null,{"children":"Visualising Language | Sarah Schöttler | Observable"}] 32:T8ad,md` ## Motivation Depending on the viewpoint, language can be both data and data format. A textbook for example uses language to communicate information that has nothing to do with the language. A dictionary on the other hand has language as its subject, yet also relies on language to communicate it. In addition, language and society are interwoven - it is nearly impossible to hear the sound of a language without also hearing the content of what is being said, without past experiences or stereotypes merging with the raw sound. This motivated me to try and find a way to transfer the essence of a language’s sound to a different domain, the visual one in this case. The biggest challenge was to try and evoke the same feeling through visuals rather than sound. This is of course entirely subjective, and I don't think that the image above really succeeds in doing that, but they're still nice to look at ;) ## Process I wanted to focus on the ‘pure’ sound, so I tried to create a technical setup that would control other variables as much as possible. I decided to work with text rather than recordings to control for different voices and accents, especially as I personally, for most languages, cannot reliably assess how much of an accent someone has. To control the content, I chose to work with the same text in different languages. I was therefore looking for a text that was available in different languages, professionally translated. I was also looking to avoid influences of other languages (e.g. in Harry Potter, there are still lots of English names in translations), and repetitive sentences (such as The Very Hungry Caterpillar). I ended up choosing the first chapter of ‘The Little Prince’ in English, German, Dutch, French, and Italian, which are available online due to the copyright having expired. The technical process has three basic steps: 1. 'Translate' each text to IPA using [eSpeak](http://espeak.sourceforge.net/), a command line speech synthesis tool 2. Parse IPA using the ipa-parser Javascript library, which for each phoneme extracts a number of different features 3. Use the extracted features to create visuals on a HTML Canvas with the help of D3 ## Appendix: Code `33:Tac9,drawChart = function(text) { const context = DOM.context2d(width,height) context.fillStyle = "#f3f3f3"; context.fillRect(0, 0, width, height); var result = parser.parse(text).units.filter(function(d) {return d.segment}) var data = result.slice(0,700) // draw consonants / background context.globalAlpha = 0.05; var consonants = data.filter(d => d.category == 'consonant') consonants.forEach(function(d) { var posX = +xCons(d.places[0]) + Math.random() * cellSize * 1.5; var posY = +yCons(d.manner) + Math.random() * cellSize * 1.5; var r = 220; var fill = backgroundColour(posX, posY) context.beginPath(); context.arc(posX, posY, r, 0, 2 * Math.PI); context.fillStyle=fill; context.fill(); context.closePath(); }); // end consonants forEach // vowels context.globalAlpha = 1; // draw path // create an avg that isn't rendered anywhere for the path var svg = d3.select(DOM.svg(width,height)) var linepoints = [[0,350], [370,280], [850,500], [1300,140]].map(d => d.map(d => d/1300*width)) var lineGenerator = d3.line().curve(d3.curveCardinal); var pathData = lineGenerator(linepoints); var path = svg.append('path').attr('d', pathData) // draw path onto canvas var p = new Path2D(pathData); context.stroke(p) var vowels = data.filter(d => d.category == 'vowel') vowels = vowels.slice(0,100) var pathLength = path.node().getTotalLength(); var interval = pathLength / vowels.length; vowels.forEach(function(d,i) { var pos = path.node().getPointAtLength(interval * i) var line = d.height * 30 context.beginPath() context.moveTo(pos.x, pos.y) context.lineTo(pos.x, pos.y + line) context.stroke() context.closePath(); // if rounded draw circle if (d.rounded) { var r = 10 / 1300 * width; var cpos = {x: pos.x, y: pos.y + line + Math.sign(line) * r} context.beginPath() context.arc(cpos.x, cpos.y, r, 0, tau) context.fillStyle = '#fff' context.fill() context.stroke() context.closePath(); } // otherwise it's not rounded, draw hexagon else { var numberOfSides = 6, r = 10 / 1300 * width, Xcenter = pos.x, Ycenter = pos.y + line + Math.sign(line) * r; context.beginPath(); context.moveTo (Xcenter + r * Math.cos(0), Ycenter + r * Math.sin(0)); for (var i = 1; i <= numberOfSides;i += 1) { context.lineTo (Xcenter + r * Math.cos(i * tau / numberOfSides), Ycenter + r * Math.sin(i * tau / numberOfSides)); } context.fillStyle = '#fff' context.fill() context.stroke(); } }) return context.canvas }34:[] 30:{"id":"8569e5b578e50285","slug":"visualising-language","title":"Visualising Language","thumbnail":"158ae1faf9362feebc2119e32339a2c12a422989e82b349fa0bd5d0d12ec5151","access_level":"public","create_time":"$D2019-03-19T13:33:13.153Z","update_time":"$D2019-03-21T10:54:40.169Z","view_time":null,"first_public_time":"$D2019-03-20T22:51:31.530Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"cb82497696636dd6","login":"sarah37","name":"Sarah Schöttler","avatar_url":"https://avatars-next.observableusercontent.com/635b26db3db2af01ef3a5d783b224c1957f35c82f4f0d31f61ed0237862dad12","tier":"starter_2024"},"version":202,"publish_version":202,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba7890104dd82290","login":"sarah37","name":"Sarah Schöttler","avatar_url":"https://avatars-next.observableusercontent.com/635b26db3db2af01ef3a5d783b224c1957f35c82f4f0d31f61ed0237862dad12","tier":null}],"members":[{"type":"individual","id":"ba7890104dd82290","login":"sarah37","name":"Sarah Schöttler","avatar_url":"https://avatars-next.observableusercontent.com/635b26db3db2af01ef3a5d783b224c1957f35c82f4f0d31f61ed0237862dad12","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualising Language","cells":[{"id":0,"value":"md`# Visualising Language\n\nThis is a uni project of mine, it grew out of wanting to do something within the themes *Language, Visualisation and Data*. In the end, I set out to **create visuals that answer the question: What do different languages really sound like?** (more background info below)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof lang = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"chart = {\n yield drawChart(prince[lang])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"randomPosition = function(x, y, dist) {\n // returns a sort of random position around (x,y) within distance dist\n\tvar angle = Math.random() * tau;\n\tvar r = Math.random() * dist;\n\treturn {x: (x + Math.cos(angle) * r), y: (y + Math.sin(angle) * r)}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"backgroundColour = function(x,y) {\n\tvar X = d3.scaleLinear()\n\t\t.domain([0, width])\n\t\t.range(['yellow', 'steelblue']);\n\tvar Y = d3.scaleLinear()\n\t\t.domain([0, height])\n\t\t.range(['white', 'brown']);\n\n\tvar color = d3.scaleLinear()\n\t\t.domain([0,1])\n\t\t.range([X(x), Y(y)])\n\t\t.interpolate(d3.interpolateLab);\n \n return color(0.5)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"yCons = d3.scaleOrdinal()\n // d.manner\n\t.domain([\"stop\", \"flap\", \"tapped-fricative\", \"fricative\", \"trill\", \n\t\t\"trilled-fricative\", \"approximant\", \"vowel\"])\n\t.range(d3.range(0, cellSize * 8, cellSize))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"xCons = d3.scaleOrdinal()\n// d.places[0] (there's only more than one in very few cases)\n\t.domain([\"alveolar\", \"dental\", \n\t\t\"postalveolar\",\"labiodental\", \"retroflex\", \"bilabial\", \n\t\t\"alveopalatal\", \"palatal\", \"velar\", \"uvular\", \"pharyngal\",\n\t\t\"epiglottal\", \"glottal\"])\n\t.range(d3.range(0, cellSize * 13, cellSize))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"height = yLength * cellSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"cellSize = width / xLength","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"yLength = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"xLength = 13;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"import {prince} from \"a827d6ef02ddf21c\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"parser = ipaParser.parser","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"ipaParser = require('https://bundle.run/ipa-parser@1.0.3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"