36:null 37:["$","title",null,{"children":"Диаграммы | Olga Polovikova | Observable"}] 3d:[{"id":"febdfebdc41bcc5667c828edc90c0330802842c07cd3a3f88b25e907d99674cc84466562826c69adb67794bb59002341c3abccdbe051dc388fd0b4467e6e55d9","href":"https://static.observableusercontent.com/files/febdfebdc41bcc5667c828edc90c0330802842c07cd3a3f88b25e907d99674cc84466562826c69adb67794bb59002341c3abccdbe051dc388fd0b4467e6e55d9","name":"Tomsk_temper.csv","type":"text/csv","lastModified":1665329008598.205,"size":597551},{"id":"e6d0e2f26686e9afd2f5547cc1da5ba0c7701492d540413ff0375eba87118fd71915facbd5f5d48dc662e0fba0ecf1f03b6c272b50c3ce19c1f3debfa7a8b17c","href":"https://static.observableusercontent.com/files/e6d0e2f26686e9afd2f5547cc1da5ba0c7701492d540413ff0375eba87118fd71915facbd5f5d48dc662e0fba0ecf1f03b6c272b50c3ce19c1f3debfa7a8b17c","name":"bee_using.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1664442970291.664,"size":16744}] 3b:{"id":"a4ce431a2360e84c","slug":"untitled/2","title":"Диаграммы","thumbnail":"2d84f3aa54795238ef8c2604e43631fbac99a733c00d78363f4bbdc04ac547b5","access_level":"public","create_time":"$D2022-09-15T07:51:48.336Z","update_time":"$D2022-10-12T04:47:56.990Z","view_time":null,"first_public_time":"$D2022-10-11T10:39:04.123Z","has_unpublished_edits":null,"fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":"starter_2024","bio":"","following":false},"version":1966,"publish_version":1966,"role":null,"authored":false,"authors":[{"type":"individual","id":"39bbe44713bf1f81","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"39bbe44713bf1f81","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":33,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Диаграммы","cells":[{"id":1916,"value":"# Диаграммы","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"### Загрузим датасет из csv-файла","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"bee_using = FileAttachment(\"bee_using.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"connecting = bee_using.sheet(0, {headers: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"`названия столбцов:[${connecting.columns}]\\n количество объектов: ${connecting.length}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"посмотрим данные в виде таблицы","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"viewof table_connect = Inputs.table(connecting, \n{ columns: [\"#\", \"субъект\", \"2019\", \"2020\", \"2021\"],\n header: {\n \"#\": \"N\",\n \"субъект\": \"Region\",\n \"2019\": \"2019г.\",\n \"2020\": \"2020г.\",\n \"2021\": \"2021г.\"\n }, \n width: {\n \"#\": 50,\n \"субъект\": 300,\n \"2019\": 100,\n \"2020\": 100,\n \"2021\": 100\n },\n maxWidth: 800, sort: \"2021\", maxHeight: 150, reverse:true, required: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"удалим первую строку и три последних (пустые)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":833,"value":"connecting.shift() //удаляем первую строку","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"connecting.pop() //удаляем последнюю строку - выполнить два раза","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"connecting","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"`названия столбцов:[${connecting.columns}]\\n количество объектов: ${connecting.length}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"## Построение и настройка диаграмм\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"Plot — это библиотека JavaScript для визуализации исследовательских данных. \nНеобходимо разобраться со следующими понятиями:\n
Marks and Channels (Метки и каналы)\n
Scales (шкалы) — визуальное кодирование абстрактных данных\n
Transforms — получение данных преобразованием\n
Facets — разделители данных\n
Legends — документирование визуальных кодировок","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":861,"value":"Библиотека Plot поддерживает несколько типов меток (Marks): Area, Bar, Cell, Dot, Frame, Line, Link, Rectangle, Rule, Text и Tick. \n
Типы меток не только определяют форму, они также задают какие каналы (Channels) поддерживаются, а также какие шкалы (Scales) могут быть связаны с связаны с каждым каналом. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"### Общие настройки области для вывода диаграммы","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1257,"value":"Следующие параметры можно настраивать (значения в пикселях):\n
marginTop - верхнее поле\n
marginRight - правое поле\n
marginBottom - нижнее поле\n
marginLeft - левое поле\n
margin - параметры для четырех полей\n
width - внешняя ширина графика (включая поля)\n
height - внешняя высота графика (включая поля)\n
Также можно добавить заголовок-подпись к диаграмме, используя параметр caption.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1108,"value":"## Метки","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"### BarX, BarY - столбцы\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1276,"value":"Метки визуализируют (выводят) данные в виде геометрических фигур: прямоугольники, полосы, точки и линии. Одна метка может генерировать несколько фигур, также в рамках одного графика можно отобразить несколько меток.\n
Конструкторы меток принимают два аргумента: данные и параметры (что и как визуализировать). Параметры могут задаваться как константами, так и генерироваться в зависимости от данных - каналы. Каналы обычно привязаны к шкале и кодируют абстрактные значения данных. Каналы также можно использовать для упорядочивания данных - сортировка.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":936,"value":"Добавим столбчатую гистограмму с вертикальными столбцами (BarX)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":934,"value":"Plot.plot({\n marks: [\n Plot.barX(connecting.slice(10,17), {x: \"2020\", y: \"субъект\", fill:\"#23af99\", sort: {x: \"x\", reverse: true}}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"Вызывается метод plot() библиотеки Plot, в который в качестве параметра передаются метки (параметры которые передаются методу оформлены в виде словаря, т.е. название параметра: его значение)\nВ нашем случае словарь меток включает: \n
метку BarX с двумя каналами: x, y (столбцы, длина которых связана с числовой характеристикой канала x, а количество столбцов зависит от канала y) и\n
ruleX(список вертикальных линий, задаются значениями по оси ОХ), можно добавлять любое кол-во вертикальных линий,\n
fill - цвет заполнения (либо канал).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":949,"value":" Можно сначало построить метку, а потом для неё вызвать метод plot(), чтобы \"отобразить-показать\" метку.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"Plot.barX(connecting.slice(10,17), {x: \"2020\", y: \"субъект\", fill:\"#23af99\"}).plot() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"В этом примере создается одна метка по данным connecting. Метки Bar и Rectangle схожи: генерируют прямоугольники. Разница в том, как строится этот прямоугольник. Для Bar только одна сторона прямоугольника (пусть для простоту - это ширина, как на рисунке) соответсвет (связывается) количественному значению (в нашем случае: количество аппартов в \"2020\" году). Для Rectangle обе стороны прясоугольника связываются с количественными значениями.\n
\nКанал x для Bar на самом деле также включает два канала: x1 и x2, по умолчанию один канал не используется (x1:0). Но, можно определить эти каналы явно.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"Plot.barX(connecting.slice(10,17), {x1: \"2021\", x2: \"2019\", y: \"субъект\", fill:\"#23af99\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"В нашем примере, получили прямоугольники (ширина одинаковая), у которых длина соответствует разности значений по двум каналам (так как канал x2 не связан со значением 0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":959,"value":"Используя fill, создадим канал, который будет отвечать за цвет заполнения столбцов (пусть цвет определяется столбцом \"субъект\").\n
Добавим легенду по цвету (color: { legend: true }), интервал слева (marginLeft: 200\n), несколько вертикальных лини","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":962,"value":"Plot.plot({\n marks: [\n Plot.barX(connecting.slice(10,18), {x: \"2020\", y: \"субъект\", fill:\"субъект\", sort: {x: \"x\", reverse: true}}),\n Plot.ruleX([0, 1800, 2000])\n ],\n color: { legend: true },\n marginLeft: 200\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"Можно канал для цвета задать явно. В нашем случае система \"посмотрела\", что указанного цвета для значения столбца \"субъект\" нет в списке базовых цветов (название региона не соответствует базовому цвету), и неявно создала канал. Этот канал можно настроить на работу некоторой функцией, которая возвращает определенный цвет.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":975,"value":"function select_colors(object) {\n if (object[\"2020\"] < 1800) return \"#aa8834\"\n if (object[\"2020\"] < 2000) return \"#889945\"\n return \"#445611\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"Plot.plot({\n marks: [\n Plot.barX(connecting.slice(10,18), {x: \"2020\", y: \"субъект\", fill:(d=>select_colors(d)), sort: {x: \"x\", reverse: true}}),\n Plot.ruleX([0, 1800, 2000])\n ],\n color: { legend: true },\n marginLeft: 200\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"Покажем цветом (каналом) прирост и убыль населения за 2 года с 2019 по 2021. Для этих целей создадим новую функцию.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"function select_colors_r(object) {\n if (object[\"2021\"] > object[\"2019\"]) return \"#4488bb\" //прирост\n else return \"#88aabb\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"Plot.plot({\n marks: [\n Plot.barX(connecting.slice(18,30), {x: \"2020\", y: \"субъект\", fill:(d=>select_colors_r(d)), sort: {x: \"x\", reverse: true}}),\n Plot.ruleX([0, 1800, 2000])\n ],\n color: { legend: true },\n marginLeft: 230\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"### RectX, RectY - прямоугольники","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"Метка RectX рисует прямоугольную область, определяемую каналами x1, y1, x2 и y2. Для данной метки числовыми являются каналы как для x так и для y. \nЧтобы понять специфику работы с данной меткой рассмотрим следующие данные о студентах: фамилия, количество курсов, количество сданных курсов, мин. балл, макс. балл. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1032,"value":"data_p = [{\"name\":\"Иванов\",\"courses\":10, \"course_passed\":8, \"min_balls\": 45, \"max_balls\": 84},{\"name\":\"Петров\",\"courses\":6, \"course_passed\":5, \"min_balls\": 49, \"max_balls\": 87}, {\"name\":\"Мыров\",\"courses\":3, \"course_passed\":1, \"min_balls\": 20, \"max_balls\": 63}, {\"name\":\"Иванова\",\"courses\":4, \"course_passed\":1, \"min_balls\": 85, \"max_balls\": 98}, ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"Plot.rectY(data_p, {x1:\"courses\", x2:\"course_passed\", y1:\"min_balls\", y2:\"max_balls\", fill:\"#23af99\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"Для информативности настроим ещё один канал fill, который отвечает за цвет, сейчас канал используется с постоянным значением (цвет-константа). Пусть цвет прямоугольника определяется фамилией студента.
Добавим легенду - color: { legend: true }); \n
Отступы - margin: 30; \n
Высоту и ширину: width, height\n
Вертикальную и горизонтальную линии. Для этого будем использовать Метки-линейки: Plot.RuleX, Plot.RuleY.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1127,"value":"Plot.rectY(data_p, {x1:\"courses\", x2:\"course_passed\", y1:\"min_balls\", y2:\"max_balls\", fill:\"name\"}).plot\n (\n {color: { legend: true },\n margin: 30,\n width: 400,\n height: 250,\n marks: [Plot.ruleY([0, 50, 90]), Plot.ruleX([0, 3, 6])]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"Сначала создаётся основа-подложка, которая определяется методом plot(), а только затем на неё накладывается изображение, определяемое меткой rectY. Поэтому часть линий перекрываются прямоугольниками.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1063,"value":"Если нас не интересует разница между количеством курсов и количеством сданных курсов. Например, нужно посмотреть соотношение баллов и количеством сданных курсов для студентов. Т.е. следует задействовать три числовых канала (а не четыре): мин.балл, макс.балл и количество сданных курсов. В этом случае метку можно взять rectX (в прошлом примере брали rectY), x2 - связать с количеством сданных курсов, y1 и y2 - c баллами.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1103,"value":"Plot.rectX(data_p, {x1:0, x2:\"course_passed\",y1:\"min_balls\", y2:\"max_balls\", fill:\"name\"}).plot\n (\n {color: { legend: true },\n margin: 30,\n width: 400,\n height: 250,\n marks: [Plot.ruleY([0, 90]), Plot.ruleX([0, 3, 6])]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"Построим аналогичную диаграмму, только все Метки зададим внутри метода Plot().","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1067,"value":"Plot.plot({\n caption: `Успеваемость студентов (количество: ${data_p.length})`,\n marks: [\n Plot.rectX(data_p, {x1:0, x2:\"course_passed\",y1:\"min_balls\", y2:\"max_balls\", fill:\"name\"}),\n Plot.ruleY([0, 50]),\n Plot.ruleX([0, 3, 6])\n ],\n color: { legend: true },\n margin: 30,\n width: 400,\n height: 250\n})\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"Из двух последних диаграмм видно, что порядок задания Меток определяет и порядок (последовательность) их отрисовки (метки-линейки видны полностью).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"### AreaY, AreaX - области","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"Метка areaY отрисовывает Область между нижней линией (y1) и верхней линией (y2). Если нижняя линия равна y = 0, вместо y1 и y2 можно использовать канал y. Обычно каналы x и y являются числовыми (значения: числа).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1320,"value":"Подготовим данные для работы. Считаем данные погоды в г. Томске из csv-файла.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1280,"value":"data_temper = FileAttachment(\"Tomsk_temper.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"Данных много, возьмем следующие поля: дату-время (строка), температуру(строка) и атмосферное давление(строка). Преобразуем строки в нужный формат.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1965,"value":"Создание и использование объектов класса Date в JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1293,"value":"data_temper_r = data_temper.map(function (d) {\n\t return {date_b: new Date(d[\"Дата\"].substring(6,10)+\"-\"+d[\"Дата\"].substring(3,5)+\"-\"+d[\"Дата\"].substring(0,2)+\"T\"+d[\"Дата\"].substring(11,16)),\n temper: Number(d[\"T\"]), \n press: Number(d[\"P\"]) \n } \n } ).sort((a, b) => a[\"date_b\"] > b[\"date_b\"] ? 1 : -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"Посмотрим на полученные данные в табличном виде:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1287,"value":"viewof table_temper = Inputs.table(data_temper_r, { sort: \"date_b\", maxHeight: 100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"Plot.plot({\n width: 1200,\n height: 300,\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", fill:\"#88bbbb\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"Выделим границу области, для этого добавим новую метку (свойство strokeWidth: ширина линии)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1436,"value":"Plot.plot({\n width: 1200,\n height: 300,\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", fill:\"#88bbbb\"}),\n Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.4}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"Для канала, например x, можно указать диапазон допустимых значений, например задать конкретный период: месяц","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1475,"value":"viewof select_manth = Inputs.select(Array.from(new Array(12),(val,index)=>index + 1), {label: \"Месяц:\", width:300, value:5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"Теперь можно указать допустимый диапазон (используя список:[min, max]) для канала x - параметр domain:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1477,"value":"Plot.plot({\n width: 1200,\n height: 300,\n x: {\n domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]\n },\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", fill:\"#88bbbb\"}),\n Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.4}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"Использую параметр curve, можно управляет интерполяций кривой, которая обрамляет сверху Область: кривая между двумя соседними точками.\n
Варианты:\"linear\", \"step\", \"step-after\", \"step-before\", \"linear-closed\", \"basis\", \"basis-closed\", \"basis-open\", \"bundle\", \"cardinal\", \"cardinal-closed\", \"cardinal-open\", \"catmull-rom\", \"catmull-rom-closed\", \"catmull-rom-open\", \"monotone-x\", \"monotone-y\", \"natural\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1498,"value":"Plot.plot({\n width: 1200,\n height: 300,\n x: {\n domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]\n },\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", curve:\"step\", fill:\"#88bbbb\"}),\n Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.6}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"При отрисовки Области, можно задействовать канал z, который группирует данные по дискретному измерению, создавая при этом сразу несколько областей (в зависимости от количества дискретных значений). \n
Для нашего примера можно построить две области: одна относиться к дневным температурам, другая к ночным. Для этих целей создадим функцию time_area, которая в зависимости от времени наблюдения возвращает 1 или 2.\n
Для наглядности включим канал fill: разукрасим цвет области(подобласти) в зависимости от температуры.\n
Параметр fillOpacity - прозрачность цвета.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1519,"value":"Plot.plot({\n width: 1200,\n height: 300,\n x: {\n domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]\n },\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", z:(d=>time_area(d)), fillOpacity: 0.4, fill:\"temper\"}),\n // Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.6}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"function time_area(object) {\n if (object[\"date_b\"].getHours() > 10 && object[\"date_b\"].getHours()<=20) return 1 //день\n else return 2\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"Получили две Области в цвете от температуры (температурная зависимость)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1568,"value":"Можно убрать градацию цвета по температуре, а поставить в зависимости от времени замера (как для канала z).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1350,"value":"function colors_area(object) {\n if (object[\"date_b\"].getHours() > 10 && object[\"date_b\"].getHours()<=20) return \"#aaccbb\" //день\n else return \"#11bbbb\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"Plot.plot({\n width: 1200,\n height: 300,\n x: {\n domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]\n },\n marks: [\n Plot.areaY(data_temper_r, {x: \"date_b\", y: \"temper\", z:(d=>time_area(d)), fillOpacity: 0.4, fill:(d=>colors_area(d))}),\n // Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.6}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"Можно показать изменение температур для определенного времени суток. Создадим функцию, которая будет возвращать время суток. \n
Для этих целей разобьем данные в зависимости от времени суток замера, используя параметр: facets.\n
Метка Plot.frame() - обрамляет прямоугольником область вывода визуальных данных.\n
grid: true - параметр для управления линиями сетки.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1581,"value":"function time_zone(object) {\n if (5<=object[\"date_b\"].getHours() && object[\"date_b\"].getHours() < 10) return \"утро\"\n if (10<=object[\"date_b\"].getHours() && object[\"date_b\"].getHours() < 18) return \"день\"\n if (18<=object[\"date_b\"].getHours()&& object[\"date_b\"].getHours() < 22) return \"вечер\" \n return \"ночь\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"Plot.plot({\n width: 1200,\n height: 600,\n grid : true,\n \n facet: {\n data: data_temper_r,\n y: (d=>time_zone(d)),\n margin: 50\n },\n marks: [\n Plot.areaY(data_temper_r, { x: \"date_b\", y: \"temper\", curve:\"natural\", fill:\"#93aa92\"}),\n // Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.6}),\n Plot.ruleY([0]),\n Plot.ruleX([new Date(2022, select_manth, 1)]), \n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"На следующем шаге настроим шкалы для осей OX и ОY. для этого передадим методу plot() параметры x: {...} и y:{...}. Построим аналогичную диаграмму, только для одного выбранного месяца.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1698,"value":"viewof select_manth_d = Inputs.select(Array.from(new Array(12),(val,index)=>index + 1), {label: \"Месяц:\", width:300, value:5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"Plot.plot({\n width: 1200,\n height: 900,\n grid : true,\n x: {\n type: \"time\", ticks: 30, tickFormat: \"%b %d\",\n domain: [new Date(2022, select_manth_d, 1), new Date(2022, select_manth_d+1, 0)]\n },\n y: {\n domain: [-1, 30], ticks: 20\n },\n facet: {\n data: data_temper_r,\n y: (d=>time_zone(d)),\n margin: 50\n },\n marks: [\n Plot.areaY(data_temper_r, { x: \"date_b\", y: \"temper\", curve:\"natural\", fill:\"#93aa92\", fillOpacity: 0.5}),\n // Plot.lineY(data_temper_r, {x: \"date_b\", y: \"temper\", strokeWidth: 0.6}),\n Plot.ruleY([0]),\n Plot.ruleX([new Date(2022, select_manth_d, 1)]), \n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"### Cell - ячейки (ячеистая сетка)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1703,"value":"Ячеистая диаграмма позволяет визуализировать динамику изменения какого-либо показателя, отображая его значение определенным цветом (можно ещё также указать и текст). Каналы x, y должны быть дискретными, как правило порядковыми (или категориальными), а не количественными значениями. Цвет ячейки определяется каналом fill. используя цветовое кодирование, можно показать изменения категориальных или количественных значений. Цветовая шкала по умолчанию является линейной: разница в цвете (ячеек) пропорциональна разнице количественных значений.\n
Построим температурную карту для одного выбранного месяца. Канал x - порядковые номера дней месяца, y - часы замеров.\n
Добавим легенду.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1643,"value":"Plot.plot({\n caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\"})\n ],\n color: { legend: true },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"Цветовую схему можно изменить - scheme: \"turbo\" (по умолчанию)\n
Можно указать цветовой диапазон - range: [\"blue\", \"brown\"]\n
Примеры настройка цветового оформления","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1712,"value":"Plot.plot({\n caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\"})\n ],\n color: { legend: true, scheme: \"cividis\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"Plot.plot({\n caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\"})\n ],\n color: { legend: true, range:[\"yellow\", \"brown\"] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"Представим \"температурные карты\" сразу для нескольких месяцев. Для этих целей воспользуемся параметром facet для группировки данных по номеру месяца.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1725,"value":"Plot.plot({\n caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,\n grid : true,\n facet: {\n data: data_temper_r,\n y: (d=>d[\"date_b\"].getMonth()),\n margin: 50\n },\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\"}),\n Plot.ruleY([0,23]),\n Plot.ruleX([0]), \n ],\n color: { legend: true, range:[\"lightblue\", \"#D2B48C\"] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"### Text - вывод текстовой информации","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1742,"value":"Метка Text отрисовывает текст в заданной позиции. Заданный текст (фонт, размер, выравнивание) можно выводить в определенную позицию. Данная Метка, как правило, используется для различных подписей на диаграммах или графиках. Использую метку Text, можно, например, подписать значения для столбцов столбчатой диаграммы.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1817,"value":"Отрисуем текст в центре прямоугольной области.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1782,"value":"Plot.plot({\n height: 100,\n marks: [\n Plot.frame(),\n Plot.text([\"Температурная карта г. Томск\"], {frameAnchor: \"middle\", fontSize: 16})\n ]\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1819,"value":"Добавим на \"температурную карту\" температуру замеров:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1747,"value":"Plot.plot({\n width: 1200,\n caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\",fillOpacity: 0.5}),\n //новая метка\n Plot.text(data_temper_r,{ x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), text:\"temper\", \n rotate:0, fontSize:8})\n ],\n padding: 0.05,\n grid: true\n\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1907,"value":"Добавим на \"температурную карту\" атмосферное давление замеров:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1757,"value":"Plot.plot({\n height: 300,\n width: 1200,\n marks: [\n Plot.cell(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), fill: \"temper\", fillOpacity: 0.5}),\n Plot.text(data_temper_r, { x: d => d[\"date_b\"].getDate(), y: d => d[\"date_b\"].getHours(), text:d=>(Math.round(d[\"press\"])), rotate:0, fontSize:9.3} )\n ],\n padding: 0.07,\n color: { legend: true, range:[\"yellow\", \"brown\"]}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"На одну из созданных ранее столбчатых диаграмм добавим информацию по количеству аппаратов за 2020 и 2021 года:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1884,"value":"Plot.plot({\n marks: [\n Plot.barX(connecting.slice(18,30), {x: \"2020\", y: \"субъект\", fill:(d=>select_colors_r(d)), rx:5, sort: {x: \"x\", reverse: true}}),\n Plot.text(connecting.slice(18,30), {x: \"2020\", y: \"субъект\", dx: 20, text: d=>d[\"2020\"]}), \n Plot.text(connecting.slice(18,30), {x: \"2020\", y: \"субъект\", dx: 60, text: d=>d[\"2021\"]}), \n Plot.ruleX([0, 1800, 2000])\n ],\n color: { legend: true },\n marginLeft: 230,\n marginRight: 80\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3c:"$3b:body"