1d:{"title":"Average LZString Compression Dictionary Shape","cells":[{"id":0,"value":"md`# Average LZString Compression Dictionary Shape`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof renderCirclePackedAndCollapsibleTree = checkbox({\n options: [\n { value: \"toggle\", label: \"Render circle packed and collapsible tree\" }\n ],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$20","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof input = textarea({\n title: \"You can insert your own text to compress below, or alternatively select a pre-defined text\",\n placeholder: \"Lorem ipsum...\", \n value: predeftxt[predefStrings],\n spellcheck: false,\n width: \"100%\",\n rows: 10,\n submit: \"Send to worker!\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof predefStrings = {\n return html` `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof barChartOrder = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"$23","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"$24","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`\nNodes that have no child nodes: ${((trieData.totalChildren[0]/trieData.totalNodes)*10000|0)/100}%\n\nNodes that have one child: ${((trieData.totalChildren[1]/trieData.totalNodes)*10000|0)/100}%\n\nNodes that have two children: ${((trieData.totalChildren[2]/trieData.totalNodes)*10000|0)/100}%\n\nNodes that have three children: ${((trieData.totalChildren[3]/trieData.totalNodes)*10000|0)/100}%\n\nNodes that have four children: ${((trieData.totalChildren[4]/trieData.totalNodes)*10000|0)/100}%\n\nNodes with five or more children: ${(((trieData.totalNodes - trieData.totalChildren[0] - trieData.totalChildren[1] - trieData.totalChildren[2] - trieData.totalChildren[3] - trieData.totalChildren[4])/trieData.totalNodes)*10000|0)/100}%\n\nCompression size of original: ${compressed_output.compressed.length} / ${input.length} or ${(compressed_output.compressed.length/input.length * 10000 | 0)/100}%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$25","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"compressionWorker = {\n const worker = new Worker(LZScript); \n worker.onmessage = function(ev) {\n mutable compressed_output = ev.data;\n }\n\n return worker;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"mutable compressed_output = null;","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"postMessageToWorker = {\n compressionWorker.postMessage(input);\n return html`/* A new message will be posted to the worker whenever input changes */`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$26","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"trieData = trieToChartData(compressed_output.trie)","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"trieDepth = trieData.maxDepth","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"data = trieData.data","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"barChartData = {\n const labelWidth = (trieData.totalChildren.length + \"\").length\n return trieData.totalChildren.map((value, name) => {\n name = name + \"\";\n while(name.length < labelWidth) name = \"0\" + name;\n return {name, value};\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"percentBarChartData = {\n let total = 0;\n for (const { value } of barChartData) {\n total += value;\n }\n return barChartData.map(({ name, value }) => ({\n name,\n value: value / total\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"rootCharsBarChartData = {\n return trieData.data.children.map(node => {\n let {name} = node;\n if (name === '\\n') name = '\\\\n';\n return {name, value: node.children.length};\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"$27","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"SortableBarChart = html`

Sortable Bar Chart

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"{\n switch (barChartOrder) {\n case \"name-ascending\": \n barChartData.sort((a, b) => a.name.localeCompare(b.name));\n rootCharsBarChartData.sort((a, b) => a.name.localeCompare(b.name));\n break;\n case \"value-ascending\": \n barChartData.sort((a, b) => a.value - b.value);\n rootCharsBarChartData.sort((a, b) => a.value - b.value);\n break;\n case \"value-descending\": \n barChartData.sort((a, b) => b.value - a.value);\n rootCharsBarChartData.sort((a, b) => b.value - a.value);\n break;\n }\n sortableBarChart_x.domain(barChartData.map(d => d.name));\n sortableBarChart.update();\n sortableBarChartRootChars_x.domain(rootCharsBarChartData.map(d => d.name));\n sortableBarChartRootChars.update();\n return barChartOrder;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"sortableBarChart_x = d3.scaleBand()\n .domain(barChartData.map(d => d.name))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"sortableBarChartRootChars_x = d3.scaleBand()\n .domain(rootCharsBarChartData.map(d => d.name))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"CirclePacking = html`

Circle Packing

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"color = d3.scaleSequential([trieDepth*2, 0], d3.interpolateMagma)\n//color = d3.scaleSequential([trieDepth*2, 0], d3.interpolateInferno)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`

Collapsible Tree

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"dx = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"dy = width / trieDepth","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`

Other libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {textarea, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W28","stdlib":"1"}