31:Tdd2,getParadigms = function(wordform_data) { const wordforms = wordform_data.paradigms.map(d => d.HCL.wordform); const result = {}; var global_min = 200000; var global_max = -200000; wordforms.forEach(function(wordform) { const paradigm = wordform_data.paradigms[wordforms.indexOf(wordform)]; var hcls = []; if (paradigm.HCL != undefined) { var min = d3.min(paradigm.HCL.corpora.map(d => d3.min(d.frequencies.map(f => f.year))).filter(d => d)); var max = d3.max(paradigm.HCL.corpora.map(d => d3.max(d.frequencies.map(f => f.year))).filter(d => d)); if (min < global_min) global_min = min; if (max > global_max) global_max = max; hcls.push({wordform: paradigm.HCL.wordform, min: min, max: max}); } var hcms = []; if (paradigm.HCM != undefined) { paradigm.HCM.forEach( function(hcm) { var min = d3.min(hcm.corpora.map(d => d3.min(d.frequencies.map(f => f.year))).filter(d => d)); var max = d3.max(hcm.corpora.map(d => d3.max(d.frequencies.map(f => f.year))).filter(d => d)); if (min < global_min) global_min = min; if (max > global_max) global_max = max; hcms.push({wordform: hcm.wordform, min: min, max: max}); } ) } var hcts = []; if (paradigm.HCT != undefined) { paradigm.HCT.forEach( function(hct) { var min = d3.min(hct.corpora.map(d => d3.min(d.frequencies.map(f => f.year))).filter(d => d)); var max = d3.max(hct.corpora.map(d => d3.max(d.frequencies.map(f => f.year))).filter(d => d)); if (min < global_min) global_min = min; if (max > global_max) global_max = max; hcts.push({wordform: hct.wordform, min: min, max: max}); } ) } var hdus = []; if (paradigm.HDU != undefined) { paradigm.HDU.forEach( function(hdu) { var min = d3.min(hdu.corpora.map(d => d3.min(d.frequencies.map(f => f.year))).filter(d => d)); var max = d3.max(hdu.corpora.map(d => d3.max(d.frequencies.map(f => f.year))).filter(d => d)); if (min < global_min) global_min = min; if (max > global_max) global_max = max; hdus.push({wordform: hdu.wordform, min: min, max: max}); }) } hdus.sort(function(a,b) { return a.min - b.min }); result[wordform] = {HCL: hcls, HCM: hcms, HCT: hcts, HDU: hdus}; }) const paradigm_names = Object.keys(wordform_data.paradigms) const paradigms = paradigm_names.map(n => wordform_data.paradigms[n]); var all_hcls, all_hdus, all_hcts, all_hcms = []; try { all_hcls = [].concat.apply([], paradigms.map(d => d.HCL.wordform)).filter(unique); } catch (e) { all_hcls = undefined; } try { all_hdus = [].concat.apply([], paradigms.map(d => d.HDU.map(d => d.wordform))).filter(unique); } catch (e) { all_hdus = undefined; } try { all_hcts = [].concat.apply([], paradigms.map(d => d.HCT.map(d => d.wordform))).filter(unique); } catch (e) { all_hcts = undefined; } try { all_hcms = [].concat.apply([], paradigms.map(d => d.HCM.map(d => d.wordform))).filter(unique); } catch (e) { all_hcms = undefined; } return {wordform: wordform_data.wordform, lemmas: result, min_year: global_min, max_year: global_max, hcls: all_hcls, hdus: all_hdus, hcts: all_hcts, hcms: all_hcms}; }32:Ta0e,chart = { const svg = d3.create("svg") .attr('class', 'wordformChart') .attr("viewBox", [0, 0, width, height]); var lemma_dimensions = getTextDimensions(chart_data.wordform, fontSize, 'IBM Plex Mono'); var baseX = 0.5 * width - 0.5 * lemma_dimensions.width; var baseY = 0.5 * height; var baseword = Object.keys(chart_data.lemmas)[0]; var wordform = svg.append("g") .attr('class', 'wordformG') .selectAll("g").data([chart_data]).join("g") .attr("class", "lemma") .call(g => g.append("text") .attr("class","wordform") .attr("fill", "#386cb0") .attr("style", lemma_style) .attr("fill", "red") .attr("x", baseX) .attr("y", baseY) .text(d => d.wordform)); var hctG = svg.append("g") .attr('class', 'lemmaG') .selectAll("g .lemma").data(Object.keys(chart_data.lemmas)).join("g") .call(g => g.append("text") .attr("class","hct") .attr("style", hct_style) .attr("x", baseX) .attr("y", (d,i) => baseY + (i+1)*fontSize ) .text((d,i) => d!=baseword? d : null )); var hdus = svg.append("g") .attr('class', 'hduG') .selectAll("g .hdu").data(chart_data.lemmas[baseword].HDU).join("g") .call(g => g.append("text") .attr("class","hdu") .attr("fill", "#7fc97f") .attr("style", hdu_style) .attr("x", baseX) .attr("y", (d,i) => baseY - (chart_data.lemmas[baseword].HDU.length * fontSize*1.25) + i*fontSize) .text((d,i) => d.wordform)); var hctG = svg.append("g") .attr('class', 'hctG'); var hctGjoin = hctG.selectAll("g .hdu").data(chart_data.lemmas[baseword].HCT).join("g"); hctGjoin.call(g => g.append("text") .attr("class","hct") .attr("fill", "#fdc086") .attr("style", hct_style) .attr("x", baseX) .attr("y", (d,i) => baseY + (i+4)*fontSize ) .attr('xml:space', 'preserve') .text((d,i) => d.wordform)); var hcms = svg.append("g") .attr('class', 'hcmG') .selectAll("g .hcm").data(chart_data.lemmas[baseword].HCM).join("g") .call(g => g.append("text") .attr("class","hcm") .attr("fill", "#beaed4") .attr("style", hcm_style) .attr("x", 0.5 * width - 5* lemma_dimensions.width) .attr("y", (d,i) => baseY - 0.5*(chart_data.lemmas[baseword].HCM.length * fontSize) + i*fontSize) .text((d,i) => d.wordform)); return svg.node(); }33:T96a,chart2 = { const svg = d3.create("svg") .attr('class', 'wordformChart') .attr("viewBox", [0, 0, width, height]); var baselemma = Object.keys(chart_data.lemmas)[0]; var plotSubgroup = function(frequencies, subgroup, barcolor, textcolor, offset) { svg.append("g") .attr("fill", barcolor) .selectAll('rect .' + subgroup) .data(frequencies) .join("rect") .attr('class', `${subgroup}`) .attr("x", d => (parseDate(d.min) != undefined)? barchartX(parseDate(d.min)) : 0 ) .attr("y", d => barchartY(d.wordform) + offset) .attr("width", d => barchartX(parseDate(d.max)) - barchartX(parseDate(d.min))) .attr("height", barchartY.bandwidth() * 0.25); svg.append("g") .attr("text-anchor", "start") .attr("fill", textcolor) .style("font", "12px sans-serif") .selectAll('text .' + subgroup) .data(frequencies) .join("text") .attr('class', `${subgroup}`) .attr("x", d => (parseDate(d.max) != undefined)? barchartX(parseDate(d.max)) : 0 ) .attr("y", d => barchartY(d.wordform) + barchartY.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.wordform); } plotSubgroup(chart_data.lemmas[baselemma].HDU, 'HDU', '#7fc97f', '#000', 0); Object.keys(chart_data.lemmas).forEach(function(lemma) { plotSubgroup(chart_data.lemmas[lemma].HCL, 'HCL', '#386cb0', '#000', 0); plotSubgroup(chart_data.lemmas[lemma].HCM, 'HCM', '#beaed4', '#000', (2 * barchartY.bandwidth() * 0.25)); plotSubgroup(chart_data.lemmas[lemma].HCT, 'HCT', '#fdc086', '#000', (3 * barchartY.bandwidth() * 0.25)); }); var baselemma2 = Object.keys(chart_data2.lemmas)[0]; plotSubgroup(chart_data2.lemmas[baselemma2].HDU, 'HDU', '#7fc97f', 'red', 0); Object.keys(chart_data2.lemmas).forEach(function(lemma) { plotSubgroup(chart_data2.lemmas[lemma].HCL, 'HCL', '#386cb0', 'red', 0); plotSubgroup(chart_data2.lemmas[lemma].HCM, 'HCM', '#beaed4', 'red', (2 * barchartY.bandwidth() * 0.25)); plotSubgroup(chart_data2.lemmas[lemma].HCT, 'HCT', '#fdc086', 'red', (3 * barchartY.bandwidth() * 0.25)); }); svg.append("g") .call(barchartXAxis); svg.append("g") .attr("transform", `translate(${width - 150},20)`) .attr("class", "legend") .attr("height", 0) .attr("width", 0) .style("font-size","12px") .call(legend); return svg.node(); }34:[] 2f:{"title":"Wordform Variation Visualization","cells":[{"id":0,"value":"md`# Wordform Variation Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"api_url = 'http://145.100.59.165:8000/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof word_to_search = text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"viewof word_to_search2 = text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"wordform_data = { \n const prefix = 'http://145.100.59.165:8000/variants/';\n var data = await fetchURLWithProxy(`${prefix+word_to_search}`);\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"wordform_data2 = { \n const prefix = 'http://145.100.59.165:8000/variants/';\n var data = await fetchURLWithProxy(`${prefix+word_to_search2}`);\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"DOM.download(serialize2(wordform_data), null, \"Download JSON\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof eval_file = {\n const form = html``;\n \n form.oninput = () => (form.value = form.input_file.files[0]);\n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"wordform_data_fixed = Files.text(eval_file).then(t => JSON.parse(t))","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"height = ([].concat.apply([], [chart_data.hdus, chart_data.hcms, chart_data.hcts])).filter(unique).length *40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"chart_data = getParadigms(wordform_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"chart_data2 = getParadigms(wordform_data2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"function getDifference(a, b) {\n var v, w;\n if (a < b) {\n v = a;\n w = b;\n } else {\n w = a;\n v = b;\n }\n \n var i = 0;\n var j = 0;\n var resultSame = \"\";\n var resultDiff = \"\";\n\n while (j < w.length) {\n if (v[i] != w[j] || i == v.length) {\n resultSame += ' ';\n resultDiff += w[j];\n } else {\n resultSame += w[j];\n resultDiff += ' '; \n }\n i++;\n j++;\n }\n return [resultSame, resultDiff];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"getDifference(\"boom\", \"oboooom\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"fontSize = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"chart_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"barchartXAxis = g => g\n .attr(\"transform\", `translate(0,${barchartMargins.top})`)\n .call(d3.axisTop(barchartX).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"legendData = [[\"Lemma\", '#386cb0', d3.symbolSquare, true],\n [\"Diachronic Variant\",\"#7fc97f\", d3.symbolSquare, true], \n [\"Morphologic Variant\",\"#beaed4\", d3.symbolSquare, true],\n [\"Typo\",\"#fdc086\", d3.symbolSquare, true]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"legend = g => g\n .selectAll('g')\n .data(legendData)\n .enter()\n .append(\"g\")\n .attr(\"transform\", function(d,i){\n return 'translate(0, ' + (i * 20) + ')';\n })\n .call(g => g.append('path')\n .attr(\"d\", d3.symbol().type((d) => { return d[2] })) \n .style(\"fill\", function (d) {\n if (d[3]) return d[1]; else return \"none\";\n })\n .style(\"stroke\", function (d) {\n return d[1];\n }))\n .call(g => g.append(\"text\") \n .attr(\"x\", 10)\n .attr(\"y\", 5)\n .text(function (d) {\n return d[0];\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md `## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"lemma_style = `\nfont-size: 20px;\n line-height: 7.5;\n font-family: 'IBM Plex Mono', monospace;\n padding: 2rem 1rem;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"hct_style = `\nfont-size: 20px;\n line-height: 7.5;\n font-family: 'IBM Plex Mono', monospace;\n padding: 2rem 1rem;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"hcm_style = `\nfont-size: 20px;\n line-height: 7.5;\n font-family: 'IBM Plex Mono', monospace;\n padding: 2rem 1rem;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"hdu_style = `\nfont-size: 20px;\n line-height: 7.5;\n font-family: 'IBM Plex Mono', monospace;\n padding: 2rem 1rem;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md `## Variables and functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"barchartMargins = ({top: 30, right: 200, bottom: 10, left: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"barchartX = d3.scaleTime() \n .domain([parseDate(chart_data.min_year), parseDate(chart_data.max_year)])\n .range([barchartMargins.left, width - barchartMargins.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"barchartY = d3.scaleBand()\n .domain(([].concat.apply([], [chart_data.hcls, chart_data.hdus, chart_data.hcms, chart_data.hcts, chart_data2.hcls, chart_data2.hdus, chart_data2.hcms, chart_data2.hcts])).filter(unique))\n .range([barchartMargins.top, height - barchartMargins.bottom]) \n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function makeSpans(display_array) {\n let spans = [];\n let total = 0\n let values = []\n for (let i=0; i\n`)\n }\n spans = spans.join('')\n return spans\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"scales_lookup = {\n let cat_colors = {}\n for (let [i,t] of shared_topics.entries()) {\n cat_colors[t] = scaleColor(colors[i])\n }\n for (let [i,t] of broadsheet_specific.entries()) {\n cat_colors[t] = scaleColor(colors[i + shared_topics.length]);\n }\n for (let [i,t] of tabloid_specific.entries()) {\n cat_colors[t] = scaleColor(colors[i + shared_topics.length + broadsheet_specific.length]);\n }\n return cat_colors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"function getTextDimensions(text, fontSize, fontFace) {\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n context.font = fontSize + 'px ' + fontFace;\n return context.measureText(text);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"function unique(value, index, self) { \n return self.indexOf(value) === index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"scaleColor = color => {\n return chroma.scale([\"#efefef\", color])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"colors = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"parseDate = d3.timeParse(\"%Y\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"fetchURLWithProxy = await function(url) {\n return fetch(`https://observable-cors.glitch.me/` + \n `${url}`, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n }).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n }).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"import {serialize as serialize2} from \"@palewire/saving-json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-scale@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}