28:null 29:["$","title",null,{"children":"Работа с таблицами | ASU | Observable"}] 2f:[{"id":"5652843819ee0cb301be3b4e9627c224491caf5782b1ac221bf5d1c0d703baab30360a38073caaf23b0a23df563ec662cb6f46ed2b21ed9d43db4465a264d8c8","href":"https://static.observableusercontent.com/files/5652843819ee0cb301be3b4e9627c224491caf5782b1ac221bf5d1c0d703baab30360a38073caaf23b0a23df563ec662cb6f46ed2b21ed9d43db4465a264d8c8","name":"image@1.png","type":"image/png","lastModified":1763203612572.866,"size":2550},{"id":"ce12fd7933973e0a17e13c7142b3e3d9b299fc3be477cd3e82053021c63a7161db8ebe58c4a2478eb0760c74a35b481cbdc48a7df2d1a40675eaa685c6779c5a","href":"https://static.observableusercontent.com/files/ce12fd7933973e0a17e13c7142b3e3d9b299fc3be477cd3e82053021c63a7161db8ebe58c4a2478eb0760c74a35b481cbdc48a7df2d1a40675eaa685c6779c5a","name":"sport_world.csv","type":"text/csv","lastModified":1763203686256.752,"size":15029}] 2c:{"id":"92aaf7799aa6aa6f","slug":null,"title":"Работа с таблицами","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-15T10:46:52.572Z","update_time":"$D2025-11-15T11:30:38.650Z","view_time":null,"first_public_time":"$D2025-11-15T10:46:52.572Z","fork":{"id":"8510a03b5949238a","slug":"n","title":"Работа с таблицами","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dd587ff5e721d620","login":"asu5","name":"ASU","avatar_url":"https://avatars-next.observableusercontent.com/21570a93c18054840ae7fe11eecac7137936707a393ead9136a6a460caa26b93","tier":"starter_2024"},"version":862,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6494894a9704dd67","login":"ziptrail","name":"Ziptrail","avatar_url":"https://avatars-next.observableusercontent.com/95f8e9f3be779fc08d10c7c63f28dd4ea4cf13e524bf5bda35d00d8bc81b5cc1","tier":null}],"members":[{"type":"team","id":"dd587ff5e721d620","login":"asu5","name":"ASU","avatar_url":"https://avatars-next.observableusercontent.com/21570a93c18054840ae7fe11eecac7137936707a393ead9136a6a460caa26b93","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6494894a9704dd67","login":"ziptrail","name":"Ziptrail","avatar_url":"https://avatars-next.observableusercontent.com/95f8e9f3be779fc08d10c7c63f28dd4ea4cf13e524bf5bda35d00d8bc81b5cc1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Работа с таблицами","cells":[{"id":0,"value":"# Работа с таблицами\n### Вывод табличных данных ","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"### (csv-формат данных)","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"sport_world_data = FileAttachment(\"sport_world.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof table = Inputs.table(sport_world_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"\"Всего записей в таблице Соревнований:\" +` ${sport_world_data.length}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"viewof table_data = Inputs.table(sport_world_data, {\n columns: [\n \"Наименование соревнования\",\n \"Сроки проведения\",\n \"Ориентировочное число участников\"\n ],\n header: {\n \"Наименование соревнования\": \"Соревнование\",\n \"Сроки проведения\": \"Сроки\",\n \"Ориентировочное число участников\": \"Участники\"\n },\n sort: \"Ориентировочное число участников\", reverse:true, required: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"//запрос на вывод выбранного подмножества данных\ntable_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"Plot.plot({\n marks: [\n Plot.barX(table_data, {x: \"Ориентировочное число участников\", y: \"Наименование соревнования\", fill: \"#345678\", sort: {x: \"x\", reverse: true}}),\n Plot.ruleY([0]),\n Plot.ruleX([20, 1500]),\n ], marginLeft: 50, width: 700,height: 200\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"Можно управлять шириной столбцов (width): с помощью параметра ширины в пикселях.\n
Параметр align (выравнивание) позволяет изменить выравнивание текста ячеек: справа, слева, по центру (по умолчанию он справа для числовых столбцов и слева для всего остального).\n
Параметр rows (строки) указывает количество отображаемых строк (по умолчанию 11). \n
Параметры: maxWidth, height и maxHeight соответственно задают максимальную ширину, высоту и максимальную высоту таблицы в пикселях.\n
Параметр: required - показывает, какие данные будут возвращены в качестве результата. Если этот параметр: true, значит результатом будет вся таблица, если - false, то результатом будут только выбранные строки.\n
Параметр: multiple - устанавливает возможность выбора нескольких строк (по умолчанию: true).","pinned":false,"hidden":false,"mode":"md"},{"id":775,"value":"{ var a = sport_world_data.filter(x => x[\"Место проведения\"] < \"г. Москва\");\n return `Количество соревнований в столице России: ${a.length}, всего соревнований: ${sport_world_data.length}`;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"------","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"## Фильтрация по диапазону значений","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"### Инструменты формы для ввода/вывода данных\nИнструмент Text: Inputs.text(options)\n\n![image@1.png](${await FileAttachment(\"image@1.png\").url()})","pinned":true,"hidden":false,"mode":"md"},{"id":458,"value":"viewof text = Inputs.text({label: \"Место\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"sportworld_data_by_search = sport_world_data.filter( (x)=> String(x[\"Место проведения\"]).indexOf(text.trim()) > -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"city = sport_world_data.map(d => d[\"Место проведения\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"viewof select = Inputs.select(city, {label: \"Укажите город:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"`Выбранный город: ${select}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"viewof select_mult = Inputs.select(city, {label: \"Выберите города из списка:\", multiple: true, width:300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"`Выбранные города: ${select_mult.join(\", \")}`","pinned":false,"hidden":false,"mode":"md"},{"id":797,"value":"function max_and_min_values() {\n var arr = sport_world_data.map((x)=> Number(x[\"Ориентировочное число участников\"])).sort((a,b)=>(a-b));\n return {\"Минимум\": arr[0], \"Максимум\": arr[arr.length-1]};\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"arr_max_and_min_values = max_and_min_values()","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"`Результат: минимальное значение - ${arr_max_and_min_values[\"Минимум\"]}, максимальное значение - ${arr_max_and_min_values[\"Максимум\"]}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"!!!!! Задание Придумать другой способ без построения массива (Этот способ плохой! Почему?)","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"minimum = arr_max_and_min_values[\"Минимум\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"maximum = arr_max_and_min_values[\"Максимум\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof range_minimum = Inputs.range([minimum, maximum], {label: \"Количество участников от:\", value: minimum, step: 10, width: 300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof range_maximum = Inputs.range([range_minimum, maximum], {label: \"до:\", value: maximum, step: 10, width: 300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"Проблемы:\n\nСоздаёшь полный массив всех чисел участников (map) → лишняя память. Если данных очень много, это неэффективно.\n\nСортировка (sort) → сложность O(n log n), хотя нам нужно только найти минимум и максимум, а это можно сделать за один проход O(n).\n\nМой способ - Один проход без построения массива\n\nМожно просто пройтись по данным и сразу найти min и max:","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"{\n let minVal = Infinity;\n let maxVal = -Infinity;\n \n for (let d of sport_world_data) {\n let val = Number(d[\"Ориентировочное число участников\"]);\n if (val < minVal) minVal = val;\n if (val > maxVal) maxVal = val;\n }\n\nreturn {\"Минимум\": minVal, \"Максимум\": maxVal};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"!!!!! Задание Показать с помощью bar-объекта (canvas) количество субъектов, удовлетворяющих условию (Соревнования, в котором количество участников меньше или равно заданному числу)","pinned":false,"hidden":false,"mode":"md"},{"id":728,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"height = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"percentage_of_fill_rect = (range_maximum - range_minimum) / (maximum - minimum)","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"canvas = {\n const context = DOM.context2d(width, height);\n context.fillStyle = \"hsl(216deg 100% 13%)\";\n context.fillRect(0, 0, percentage_of_fill_rect*width, height);\n context.canvas.style.background = \"hsl(216deg 25% 90%)\";\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"count_fill = maximum * percentage_of_fill_rect","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"Выведем данные в табличном виде, которые удовлетворяют выбранному диапазону","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"sport_world_data.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"sportworld_data_mult = sport_world_data.filter((x)=>Number(x[\"Ориентировочное число участников\"]) <= count_fill && x[\"Сроки проведения\"] !=null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"Inputs.table(sportworld_data_mult.filter( (x)=> Number(x[\"Ориентировочное число участников\"]) <= count_fill), \n {\n columns: [\n \"Наименование соревнования\",\n \"Место проведения\",\n \"Сроки проведения\",\n \"Ориентировочное число участников\"\n ],\n width: {\n \"Наименование соревнования\": 400,\n \"Место проведения\": 150,\n \"Сроки проведения\": 150,\n \"Ориентировочное число участников\": 250\n },\n sort: \"Ориентировочное число участников\", maxHeight: 150, maxWidth: 900, reverse:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"Построим диаграмму субъектов, отфильтрованных по условию","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"function select_colors(object) {\n if (object[\"Ориентировочное число участников\"] < 200) {\n return \"#7FFF00\"\n } else if (object[\"Ориентировочное число участников\"] >= 200 && object[\"Ориентировочное число участников\"] < 500) {\n return \"#FFD700\"\n } else {\n return \"#FF4500\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"Plot.plot({\n marks: [\n Plot.barX(sportworld_data_mult, {x: \"Ориентировочное число участников\", y: \"Сроки проведения\", fill: (d=>select_colors(d)), sort: {x: \"x\", reverse: true}}),\n Plot.ruleY([0])\n ], marginLeft: 150\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"Немного о строковом типе (JavaScript)\n
Есть три типа кавычек. Строки, использующие обратные кавычки, могут занимать более одной строки в коде и включать выражения \"$....\" (выше были примеры таких строк).\n
Строки в JavaScript кодируются в UTF-16.\n
Есть специальные символы, такие как \\n, и можно добавить символ по его коду, используя \\u… (так во всех языках).\n
Для получения символа используйте [ ](как в python).\n
Для получения подстроки: slice или substring.\n
Для того, чтобы перевести строку в нижний или верхний регистр: toLowerCase/toUpperCase.\n
Для поиска подстроки: indexOf или includes/startsWith/endsWith, когда надо только проверить, есть ли вхождение (выше был пример).\n
Чтобы сравнить строки с учётом правил языка: localeCompare.\n
str.trim() — убирает пробелы в начале и конце строки.\n
str.repeat(n) — повторяет строку n раз.\n
Cсылка: про строки","pinned":false,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"