28:null 29:["$","title",null,{"children":"Untitled | Настя Чуракова | Observable"}] 2f:[{"id":"40a3bd99b9ddc1cdf9627c9b4d5c114734b88fb0111879bc713dd97070c614dcaa29c8665894426542dacf1b4466d3b3999cb08edf14972e80004a54a46ceda8","href":"https://static.observableusercontent.com/files/40a3bd99b9ddc1cdf9627c9b4d5c114734b88fb0111879bc713dd97070c614dcaa29c8665894426542dacf1b4466d3b3999cb08edf14972e80004a54a46ceda8","name":"USD2021-2022@2.csv","type":"text/csv","lastModified":1670834104824.569,"size":8880}] 2c:{"id":"c73ddaee4011d512","slug":null,"title":"","thumbnail":"efa0079a850d129311163d325aaa254cffba8fe5354f9bb7d3852c7eb40ec142","access_level":"public","create_time":"$D2022-12-12T08:35:04.824Z","update_time":"$D2022-12-12T08:35:27.135Z","view_time":null,"first_public_time":"$D2022-12-12T08:35:04.824Z","fork":{"id":"1bc304b13e3492f6","slug":null,"title":"","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"81806ebe8d4d80aa","login":"churakova","name":"Настя Чуракова","avatar_url":"https://avatars-next.observableusercontent.com/43cee295b9870a92f238cbfbf7e156280aa0c1fba7bb93e9ab923a56ebabc81f","tier":"starter_2024"},"version":316,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"95d4ece4bb2d6e0c","login":"churakova","name":"Настя Чуракова","avatar_url":"https://avatars-next.observableusercontent.com/43cee295b9870a92f238cbfbf7e156280aa0c1fba7bb93e9ab923a56ebabc81f","tier":null}],"members":[{"type":"individual","id":"95d4ece4bb2d6e0c","login":"churakova","name":"Настя Чуракова","avatar_url":"https://avatars-next.observableusercontent.com/43cee295b9870a92f238cbfbf7e156280aa0c1fba7bb93e9ab923a56ebabc81f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":309,"value":"### Объект класса Scrubber","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"usd = FileAttachment(\"USD2021-2022@2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"Array.from\nПреобразует и возвращает новый массив из массивоподобного, или итерируемого объекта.\n\nМожно использовать Array.from(), чтобы построить последовательность без цикла for.\n\nДля этого нужно создать объект по требованиям: свойство length и индексы:\n\nconst nums = Array.from({length: 500}, function(value, index) { return index * 2})","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"massiv = Array.from({length: 500}, (x, i) => i*2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"Построим специальный Объект класса Scrubber\n\nДанный объект обладает следующими свойствами:\n\nautoplay (по умолчанию имеет значение true), указывает, будет ли анимация воспроизводиться автоматически. Можно назначить: false, чтобы требовать нажатия кнопки воспроизведения;\n\nloop (по умолчанию имеет значение true), указывает, должна ли анимация автоматически перезапускаться с начала после достижения конца;\n\nalternate (по умолчанию имеет значение false), указывает, должна ли анимация изменить направление, когда она достигает конца, а не повторяться с самого начала;\n\ndelay (по умолчанию равен нулю), указывает, сколько времени ждать между кадрами в миллисекундах;\n\nformat указывает, как отображать текущее выбранное значение. \n\nwidth -- ширина;\n\ninitial -- начальное значение.\n","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"viewof i = Scrubber(massiv, {autoplay:false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"Получим значение для текущего состояния Объекта класса Scrubber","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"`значение равно =${i}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"Попробуем использовать параметры:\n","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"massiv_date = Array.from({length: 100}, function fun(x, i) {\n var new_date = new Date();\n new_date.setDate(new_date.getDate() + i);\n return new_date;\n }\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"Для работы с датой при форматировании значения, которое видит пользователь в процессе, можно использовать метод toLocaleString():\n
var date = new Date(2014, 11, 31, 12, 30, 0)\n
date.toLocaleString(\"ru\", options) ); // среда, 31 декабря 2014 г. \n
date.toLocaleString(\"en-US\", options) ); // Wednesday, December 31, 2014 \n\n

options = { era: 'long', year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', timezone: 'UTC', hour: 'numeric', minute: 'numeric', second: 'numeric' }","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"Пример работы с датами объекта класса Scrubber","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"viewof date = Scrubber(massiv_date.slice(0,5), {\n delay : 400,\n alternate: true,\n loop: true,\n format: x => x.toLocaleString(\"ru\",{month: \"long\", day: \"numeric\", year: 'numeric'})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"Создадим массив объектов (список объектов): Дата, Объём_продукции.\n\nMath.random(x, y) -- возвращает случайное число с плавающей точкой в интервале (x, y) ","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"massiv_obj = Array.from({length: 100}, function fun(x, i) {\n var x = new Date();\n x.setDate(x.getDate() + i);\n var y = x.toISOString().substring(0,10);\n return {'date_b': new Date(y), 'value_b': Number((1+Math.random()*(4-1)).toFixed(3))}\n }\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof filter_date = Scrubber(massiv_obj.map(d=>d['date_b']), {\n delay : 400,\n alternate: true,\n loop: true,\n format: x => x.toLocaleString(\"ru\",{month: \"long\", day: \"numeric\", year: 'numeric'})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"Сформируем диапазон дат для построения домена в графике","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"list_date = massiv_obj.map(d=>d['date_b'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"`Получили диапазон для даты: ${[list_date[0], list_date[list_date.length-1]]}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"Построим график","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"Plot.plot({\n x: {domain: [list_date[0],list_date[list_date.length-1]] },\n y: {domain: [0, 4]},\n width: 1200,\n height: 300,\n grid: true,\n marks: [\n Plot.line(massiv_obj, { x: 'date_b', y: 'value_b', filter: ((d) => d['date_b'] <= filter_date)}),\n Plot.circle(massiv_obj, { x: 'date_b', y: 'value_b', fill:(d)=>f_color(d['value_b']), filter: ((d) => d['date_b'] <= filter_date)}),\n Plot.ruleY([1, 2, 3, 4])\n ],\n color: { legend: true },\n marginLeft: 40\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"Теперь добавим столбчатую диаграмму","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"Plot.plot({\n width: 1200,\n height: 300,\n grid: true, \n x:{},\n marks: [\n Plot.barY(massiv_obj, { x: 'date_b', y: 'value_b', fill:(d)=>f_color(d['value_b']), filter: ((d) => d['date_b'] <= filter_date)}),\n Plot.ruleY([1, 2, 3, 4])\n ],\n color: { type: \"linear\",\n range: [\"green\", \"red\"], legend: true },\n marginLeft: 20\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"function f_color(obj) {\n if (obj < 2.0) return 1\n if (obj < 3.0) return 2\n else return 3;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"Сформируем датасет для экспериментов","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"usd202120222 = await FileAttachment(\"USD2021-2022@2.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"`Количество записей: ${usd202120222.length}`","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"viewof date_USD = Scrubber(usd202120222.map(d=> d['dataUSD']), {\n delay : 100,\n alternate: true,\n loop: true,\n format: x => x.toLocaleString(\"ru\",{month: \"long\", day: \"numeric\", year: 'numeric'})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"Построим график курса USD в динамике:","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"Plot.plot({\n x: {ticks: 15, tickFormat: \"%b %d\" }, \n y: {},\n width: 1200,\n height: 400,\n grid: true,\n marks: [\n Plot.line(usd202120222, { x: 'dataUSD', y: 'kursUSD', curve: \"catmull-rom\", stroke: \"#aa79a7\", marker: \"circle\", filter: ((d) => d['dataUSD'] <= date_USD)}),\n // Plot.circle(usd202120222, { x: 'dataUSD', y: 'kursUSD', fill:(d)=>f_colorUSD(d['kursUSD']), filter: ((d) => d['dataUSD'] <= date_USD)}),\n Plot.ruleY([60, 70])\n ],\n color: { legend: true },\n marginLeft: 40\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"function f_colorUSD(obj) {\n if (obj < 50) return 0\n if (obj < 60) return 1\n if (obj < 70) return 2\n else return 3;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"