31:Tad3,toki_chart = { const root = build_root(toki_dictionary); const svg = d3.create("svg"); const fill = "#555"; svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("stroke", d => (d.source.data.name == "" ? "none" : fill)) .attr( "d", d3 .linkRadial() .angle(d => d.x) .radius(d => d.y) ); svg .append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .attr("fill", d => d.data.name == "" ? "none" : d.data.leaf ? "#FFFF63" : fill ) .attr("stroke", d => (d.data.name == "" ? "none" : "#009")) .attr("r", 2.5); if (radius > 200) { svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("stroke-linejoin", "round") .attr("stroke-width", 1) .selectAll("text") .data(root.descendants()) .join("text") .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) ` ) .attr("dy", "0.31em") .attr("x", d => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end" ) .text(d => d.data.name) .clone(true) .lower() .attr("stroke", d => "#e5e8f9"); } let title = svg .append("g") .attr("font-family", "sans-serif") .attr("stroke-linejoin", "round") .attr('transform', `translate(-${radius}, -${radius})`); title .append("text") .attr("font-size", radius / 10) .text("toki pona radix tree"); let legend = title .selectAll("g") .data(["commonly accepted word in toki pona", "word prefix"]) .join("g") .attr( "transform", (_, i) => `translate(${radius / 32}, ${(radius / 20) * (2 + i * 2)})` ); legend .append("circle") .attr("fill", (d, i) => (i == 0 ? "#FFFF63" : fill)) .attr("r", 5) .attr("stroke", "#009"); legend .append("text") .attr("text-anchor", "center") .attr("dy", "0.30em") .attr("x", 8) .text(d => d); let logo_size = radius * logo_scale; svg .append("image") .attr( 'xlink:href', 'https://upload.wikimedia.org/wikipedia/commons/8/8a/Toki_pona.svg' ) .attr('transform', `translate(-${logo_size / 2}, -${logo_size / 2})`) .attr('width', logo_size) .attr('height', logo_size); return svg.attr("viewBox", autoBox).node(); }32:Te6e,compare_chart = { const svg = d3.create("svg"); let base = svg .attr("style", "padding:20px") .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); function chart(container, root, fill, leaf) { container .selectAll("path") .data(root.links()) .join("path") .attr("stroke", d => (d.source.data.name == "" ? "none" : fill)) .attr( "d", d3 .linkRadial() .angle(d => d.x) .radius(d => d.y) ); container .append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr("stroke-width", .1) .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .attr("fill", d => d.data.name == "" ? "none" : d.data.leaf ? leaf : fill ) .attr("stroke", d => (d.data.name == "" ? "none" : fill)) .attr("r", .2) .attr("z-index", d => (d.data.leaf ? 1 : -1)); } chart(base.append("g"), build_root(eng_dictionary), "#00247D", "#CF142B"); chart( base.append("g").attr('transform', `translate(${radius * 1.1}, ${radius * 0.3})`), build_root(toki_dictionary, relative_radius), "#FFFF63", "#009" ); chart( base.append("g").attr('transform', `translate(${radius * 1.4}, -${radius * 0.3})`), build_root(esperanto_dictionary, relative_radius2), "#019b00", "#EFE" ); let title = svg .append("g") .attr("font-family", "sans-serif") .attr("stroke-linejoin", "round") .attr('transform', `translate(-${radius}, -${radius})`); title .append("text") .attr("font-size", radius / 10) .text("common English vocabulary vs Esperanto vs toki pona"); title .append("text") .attr("font-size", radius / 20) .attr('transform', `translate(0, ${radius / 10})`) .text("(size by ngram density)"); let legend = title .selectAll("g") .data(["word", "prefix"]) .join("g") .attr( "transform", (_, i) => `translate(${radius / 32}, ${(radius / 20) * (1 + i)})` ); svg.append("path") .attr("d", `M${radius*0.75},${radius*0.55} T${radius*0.8},${radius*0.4} T${radius},${radius*0.3}`) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 2) .attr("marker-end", "url(#arrow)"); svg.append("text") .attr("font-size", radius / 20) .attr("class", "coords") .attr("transform", `translate(${radius*0.75}, ${radius*0.6})`) .append("tspan") .text("toki pona radix tree") svg.append("path") .attr("d", `M${radius*0.59},-${radius*0.81} T${radius*0.5},-${radius*0.78} T${radius*0.4},-${radius*0.55}`) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 2) .attr("marker-end", "url(#arrow)"); svg.append("text") .attr("font-size", radius / 20) .attr("class", "coords") .attr("transform", `translate(${radius*0.6}, -${radius*0.8})`) .append("tspan") .text("radix tree of common English ") svg.append("path") .attr("d", `M${radius*1.6},${radius*0.77} T${radius*1.7},${radius*0.67} T${radius*1.7},${radius*0.15}`) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 2) .attr("marker-end", "url(#arrow)"); svg.append("text") .attr("font-size", radius / 20) .attr("class", "coords") .attr("transform", `translate(${radius*0.85}, ${radius*0.8})`) .append("tspan") .text("radix tree of common Esperanto") return svg.attr("viewBox", autoBox).node(); }33:T7a0,// modified from https://codepen.io/yoksel/pen/ajJes html``34:[{"id":"64bb44af0529b28a52b1a2b1b5211755d73c078b7e841ffefcdf4e00821e2c25a1dd80bfd9e01c1c63b4f52062eae65979eadc863475406b0fd72fecd70c37e8","href":"https://static.observableusercontent.com/files/64bb44af0529b28a52b1a2b1b5211755d73c078b7e841ffefcdf4e00821e2c25a1dd80bfd9e01c1c63b4f52062eae65979eadc863475406b0fd72fecd70c37e8","name":"english_dictionary.json","type":"application/json","lastModified":1616183422772.542,"size":334814},{"id":"66a33b4b60bebc85e03ae5baba029afe7cedbfb522143de84e2c27e45bba5035e59c58fb82956ba40a2df483c87df185a27ff2752dd9d2d4984592f2ca055275","href":"https://static.observableusercontent.com/files/66a33b4b60bebc85e03ae5baba029afe7cedbfb522143de84e2c27e45bba5035e59c58fb82956ba40a2df483c87df185a27ff2752dd9d2d4984592f2ca055275","name":"toki_pona_dictionary.json","type":"application/json","lastModified":1616117845409.758,"size":24950},{"id":"66005de5f156cd4eee99847704a11ef9851ba6b2a01683ad767af63ec2725bc85ec04e711808f22cfa26cc102f017b4b227cd51214678e9da62ca8a8fb7e8deb","href":"https://static.observableusercontent.com/files/66005de5f156cd4eee99847704a11ef9851ba6b2a01683ad767af63ec2725bc85ec04e711808f22cfa26cc102f017b4b227cd51214678e9da62ca8a8fb7e8deb","name":"esperanto_dictionary.json","type":"application/json","lastModified":1616215504791.543,"size":165339}] 2f:{"title":"Deconstructing a language (toki pona)","cells":[{"id":0,"value":"toki_pona = md`# Deconstructing a language (toki pona)\n\n[toki pona](https://en.wikipedia.org/wiki/Toki_Pona) (the language of good) is a language consisting of just 120 (ish) words, it was invented in 2003 by [Sonja Lang](https://tokipona.org/). Its simplicity means that we can eaily view the entire vocabulary in a [radix tree](https://en.wikipedia.org/wiki/Radix_tree). Using [out of the box d3 examples](https://next.observablehq.com/@d3/radial-tidy-tree), and a [publically available source of the toki pona vocabulary](https://jprogr.github.io/TokiPonaDictionary/), and we're cooking! I tried to style this graphic after \\`pu\\` [the offical book of toki pona](https://www.amazon.com/Toki-Pona-Language-Sonja-Lang/dp/0978292308/).\n\n~~~\no musi e sona kasi pi toki pona\ntawa jan Silan\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof logo_scale = slider({\n min: 0,\n max: 0.5,\n value: 0.25,\n step: 0.01,\n description: \"Size of logo\",\n title: \"Logo scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof radius = slider({min: 100, max: 1000, value:250, step: 1, description: \"Radius\", title:\"Radius\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"hm = md` ## hm\nok, but how small is toki pona? Conversational English uses between 10,000-20,000 words, using the top 20k words as per [Google n-grams](https://github.com/first20hours/google-10000-english), and cross referencing it with the standard [unix dictionary](https://en.wikipedia.org/wiki/Words_(Unix%29), we end up with \\`14395\\` words, which seems ball-park for a functional English usage. I also pull in some [Esperanto data](https://gist.github.com/dmadisetti/6cd25894ef1d5998640d1eeabaaa38b4) from [Wiktionary](https://en.wiktionary.org/wiki/Wiktionary:Frequency_lists/Esperanto), as a sort of intermediate. How's all this stack up to toki pona? Well take a look:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`## imports etc..`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"build_root = function(dictionary, r){\n r = r || radius;\n const tree = d3\n .tree()\n .size([2 * Math.PI, r])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);\n return tree(\n d3.hierarchy(radix(dictionary)).sort((a, b) => d3.ascending(a.data.name, b.data.name))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"// Area of eng chart is pi*r^2\n// density is 17751/pi*r^2\n// For same density 166/pi*R^2 = 17751/pi*r^2\n// => sqrt(166 * r^2 / 17751) -> r * sqrt(166 / 17751)\nrelative_radius = radius * Math.sqrt(166 / 17751)","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"// Area of eng chart is pi*r^2\n// density is 17751/pi*r^2\n// For same density 8613/pi*R^2 = 17751/pi*r^2\n// => sqrt(8613 * r^2 / 17751) -> r * sqrt(8613 / 17751)\nrelative_radius2 = radius * Math.sqrt(8613 / 17751)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"eng_dictionary = FileAttachment(\"english_dictionary.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"toki_dictionary = FileAttachment(\"toki_pona_dictionary.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"esperanto_dictionary = FileAttachment(\"esperanto_dictionary.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"class Node {\n constructor(visits, word, parent) {\n this.visits = visits;\n this.word = word;\n this.children = {};\n this.leaf = false;\n this.parent = parent || word.slice(0, -1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"radix = function(dictionary) {\n let radix = { name: \"\", children: [] };\n let visited = { \"_root\": radix };\n let frontier = [trie(dictionary)];\n while (frontier.length) {\n let head = frontier.pop();\n let front = Object.values(head.children);\n frontier = frontier.concat(front);\n if (!head.leaf && front.length == 1) {\n front[0].parent = head.parent;\n continue;\n }\n visited[head.word] = { name: head.word, children: [], leaf: head.leaf };\n visited[head.parent].children.push(visited[head.word]);\n }\n console.log(\"size\", Object.keys(visited).length);\n return radix.children[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"trie = function(dictionary) {\n let data = {};\n let root = { name: \"toki pona\", children: [] };\n let trie = new Node(0, \"\", \"_root\");\n dictionary.forEach(word => {\n let trie_head = trie;\n let letters = word.word.split()[0];\n let ngram = \"\";\n letters.split(\"\").forEach(letter => {\n ngram += letter\n if (!(letter in trie_head.children)) {\n trie_head.children[letter] = new Node(0, ngram);\n }\n trie_head.visits++;\n trie_head = trie_head.children[letter];\n });\n trie_head.leaf = true;\n });\n return trie;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"defs = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}