2f:T554,{ let index = 0; const duration = 500; function update() { if (index >= data.length) { index = 0; } else { index++; } console.info("Period", data[index]); header.innerHTML = data[index].year; const t = d3.transition().duration(duration).ease(d3.easeExpInOut); const node = d3.select(ol); const selection = d3 .select(ol) .selectAll("li") .data(data[index].words, (d) => d.word) .order() .join( (enter) => { enter .append("li") //.style("color", "green") .style("opacity", 0) .style("color", "green") .style("font-size", (d) => "1pt") .html((d) => `${d.word} `) .transition(t) .style("opacity", 100) .style("font-size", (d) => `${d.fontSize}pt`) .style("color", "black"); }, (update) => { update.transition(t).style("font-size", (d) => `${d.fontSize}pt`); }, (exit) => { exit.remove(); } ); } const div = document.createElement("div"); const header = document.createElement("h1"); const ol = document.createElement("ol"); div.style["min-height"] = "800px"; div.appendChild(header); div.appendChild(ol); d3.interval(update, duration * 2); return div; }30:[{"id":"a12b60d278d8385083525f4701c60224463b473ddb248dde9a62c4736b69b334f446c7de9d418938948402f588c63c6d6fd2b9ca62d10aa659cb13923d328d45","href":"https://static.observableusercontent.com/files/a12b60d278d8385083525f4701c60224463b473ddb248dde9a62c4736b69b334f446c7de9d418938948402f588c63c6d6fd2b9ca62d10aa659cb13923d328d45","name":"words.json","type":"application/json","lastModified":1670278325677.45,"size":727822},{"id":"6b68aead2a2e7b0aea79e00188d33384150c216e6b69021970f39b5b4616e5e8ce4f9dae492e1efdc0d95613cbef19edd31355ed2a4bc670b2e309e1c96a3c5a","href":"https://static.observableusercontent.com/files/6b68aead2a2e7b0aea79e00188d33384150c216e6b69021970f39b5b4616e5e8ce4f9dae492e1efdc0d95613cbef19edd31355ed2a4bc670b2e309e1c96a3c5a","name":"words-cleaned-grouped.json","type":"application/json","lastModified":1670709317142.142,"size":13512}] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"maxFontSize = 24","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"minFontSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"data = {\n const data = wordsByYear.map((d) => {\n const year = {\n year: d.year,\n words: Object.keys(d.words)\n .map((key) => {\n return {\n word: key,\n count: d.words[key]\n };\n })\n .sort((a, b) => (a.count > b.count ? -1 : 1))\n };\n\n const [minCount, maxCount] = d3.extent(year.words, (d) => d.count);\n const totalCount = d3.sum(year.words, (d) => d.count);\n\n year.words.forEach((word, i) => {\n word.fontSize =\n (word.count / maxCount) * (maxFontSize - minFontSize) + minFontSize;\n });\n\n return year;\n });\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"{\n const div = document.createElement(\"div\");\n div.classList.add(\"container\");\n\n function update(data) {\n const node = d3\n .select(div)\n .selectAll(\"span\")\n .data(data, (d) => d)\n .order();\n\n node\n .exit()\n .style(\"color\", \"red\")\n .transition(2000)\n .style(\"font-size\", \".1px\")\n .remove();\n\n node\n .enter()\n .append(\"span\")\n .text((d) => `${d} `)\n .style(\"color\", \"green\")\n .style(\"font-size\", \"1px\")\n .transition(2000)\n .style(\"font-size\", \"17px\")\n .transition(2000)\n .style(\"color\", \"black\");\n }\n\n update([\"a\", \"c\", \"e\"]);\n\n setTimeout(() => {\n update([\"b\", \"d\", \"e\", \"a\"]);\n }, 5000);\n\n //update([\"z\", \"b\", \"c\"]);\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"wordsByYear = FileAttachment(\"words-cleaned-grouped.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"function renderYear(year) {\n const words = wordsByYear.filter((d) => d.year === year + \"\")[0].words;\n\n const keys = Object.keys(words).sort((a, b) => {\n return words[a] < words[b] ? 1 : -1;\n });\n\n const rows = keys.map((d, i) => {\n return html`\n \n ${i + 1}\n ${renderChange(d, year, i + 1)}\n ${d}\n ${words[d]}\n `;\n });\n\n let content = html`\n

${year}

\n \n \n \n \n \n \n \n \n \n \n ${rows}\n \n

#		Слово	Количество

`;\n\n return html`${content}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"renderYear(2001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"renderYear(2002)","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"renderYear(2003)","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"renderYear(2004)","pinned":true,"hidden":false,"mode":"ojs"},{"id":587,"value":"renderYear(2005)","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"renderYear(2006)","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"renderYear(2007)","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"renderYear(2008)","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"renderYear(2009)","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"renderYear(2010)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"renderYear(2011)","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"renderYear(2012)","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"renderYear(2013)","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"renderYear(2014)","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"renderYear(2015)","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"renderYear(2016)","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"renderYear(2017)","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"renderYear(2018)","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"renderYear(2019)","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"renderYear(2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"renderYear(2021)","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"renderYear(2022)","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"function getPosition(word, year) {\n const words = wordsByYear.filter((d) => d.year == year)[0].words;\n\n const keys = Object.keys(words).sort((a, b) => {\n return words[a] < words[b] ? 1 : -1;\n });\n\n const position = keys.findIndex((d) => d === word);\n\n return position + 1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"getPosition(\"россия\", 2001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"function renderChange(word, year, currentPosition) {\n if (year === 2001) {\n return html`-`;\n }\n\n const lastYearPosition = getPosition(word, year - 1);\n\n if (lastYearPosition === 0) {\n return html`↑↑`;\n }\n\n const change = lastYearPosition - currentPosition;\n\n if (change === 0) {\n return html`-`;\n }\n\n if (change > 0) {\n return html`↑ (+${change})`;\n } else {\n return html`↓ (${change})`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}