44:["$","title",null,{"children":"Работа с таблицами | Denis Bublikov | Observable"}] 4c:T433,sportHTML = { const rows = [...sportData] .sort((a, b) => b.participants - a.participants) .slice(0, 10); const table = document.createElement("table"); table.style.width = "100%"; table.style.borderCollapse = "collapse"; const columns = [ ["name", "Соревнование", "55%"], ["city", "Место проведения", "25%"], ["participants", "Участников", "20%"] ]; const header = table.createTHead().insertRow(); for (const [key, title, width] of columns) { const th = document.createElement("th"); th.textContent = title; th.style.width = width; th.style.padding = "10px"; th.style.textAlign = "left"; th.style.borderBottom = "2px solid #555"; header.appendChild(th); } const body = table.createTBody(); for (const row of rows) { const tr = body.insertRow(); for (const [key] of columns) { const td = tr.insertCell(); td.textContent = row[key]; td.style.padding = "8px"; td.style.borderBottom = "1px solid #ddd"; } } return table; }4d:[{"id":"26e4252093de22a9b78b21632d0fdfaabde8953181f5f56f66ed4e5fccae6b2f75643981cd960b2ff6f57d7d39b3bacd6e0f9168dc8f4bba4b2b048e8ae6a7e5","href":"https://static.observableusercontent.com/files/26e4252093de22a9b78b21632d0fdfaabde8953181f5f56f66ed4e5fccae6b2f75643981cd960b2ff6f57d7d39b3bacd6e0f9168dc8f4bba4b2b048e8ae6a7e5","name":"AltayRegion_1.csv","type":"text/csv","lastModified":1664266934020.613,"size":6512},{"id":"0db9e865df293f04ae0629a5a1dbc689fa38cc4b7b909afaab9e1945d26a026d2a5520543e95da1a34adcdca322569a880f72abdf2084ebeba1b0e8527b10f0c","href":"https://static.observableusercontent.com/files/0db9e865df293f04ae0629a5a1dbc689fa38cc4b7b909afaab9e1945d26a026d2a5520543e95da1a34adcdca322569a880f72abdf2084ebeba1b0e8527b10f0c","name":"d1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1758281871257.181,"size":114706},{"id":"5652843819ee0cb301be3b4e9627c224491caf5782b1ac221bf5d1c0d703baab30360a38073caaf23b0a23df563ec662cb6f46ed2b21ed9d43db4465a264d8c8","href":"https://static.observableusercontent.com/files/5652843819ee0cb301be3b4e9627c224491caf5782b1ac221bf5d1c0d703baab30360a38073caaf23b0a23df563ec662cb6f46ed2b21ed9d43db4465a264d8c8","name":"image@1.png","type":"image/png","lastModified":1664266934020.613,"size":2550},{"id":"b89b52d82501a321894e0a56594e411f8fd24782f53bab4079d7f5460715a61be9a06041ac1e40e72d9bfac2e82e226eed50a0d4c50ae06831fc91f0b89bf39e","href":"https://static.observableusercontent.com/files/b89b52d82501a321894e0a56594e411f8fd24782f53bab4079d7f5460715a61be9a06041ac1e40e72d9bfac2e82e226eed50a0d4c50ae06831fc91f0b89bf39e","name":"image.png","type":"image/png","lastModified":1664266934020.613,"size":3164},{"id":"a0f0f9469cb01b537599e31489bba2f73f3f2ed0f2bb294b3b306b9f32789a532919d2a25dcafe2674e9d66c18cc4a714c96fcc14b08e76b4fd4bc6a2e711550","href":"https://static.observableusercontent.com/files/a0f0f9469cb01b537599e31489bba2f73f3f2ed0f2bb294b3b306b9f32789a532919d2a25dcafe2674e9d66c18cc4a714c96fcc14b08e76b4fd4bc6a2e711550","name":"sport_world (2).csv","type":"text/csv","lastModified":1794536815732,"size":15029}] 48:{"id":"a3d6f08f9d5102c3","slug":"rabota-s-tablitsami","title":"Работа с таблицами","thumbnail":"8d4ddde8e11fb5d93231abe7c449763c3577ac5338e21234e658f09bfad618e3","access_level":"public","create_time":"$D2026-11-13T02:27:50.416Z","update_time":"$D2026-11-13T02:48:20.916Z","view_time":null,"first_public_time":"$D2026-11-13T02:34:13.926Z","has_unpublished_edits":null,"fork":{"id":"8510a03b5949238a","slug":"n","title":"Работа с таблицами","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1c6617ca81db3a91","login":"denis-nucen","name":"Denis Bublikov","avatar_url":null,"tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":818,"publish_version":818,"role":null,"authored":false,"authors":[{"type":"individual","id":"9449ec6e7dfadeeb","login":"denis-nucen","name":"Denis Bublikov","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1c6617ca81db3a91","login":"denis-nucen","name":"Denis Bublikov","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Работа с таблицами","cells":[{"id":0,"value":"# Работа с таблицами\n### Вывод табличных данных ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":158,"value":"altayregion_data= FileAttachment(\"AltayRegion_1.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":112,"value":"viewof table = Inputs.table(altayregion_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"ad= FileAttachment(\"d1.xlsx\").xlsx({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"\"Всего записей в таблице районов Алтайского края:\"+`${altayregion_data.length}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"

Можно отобразить конкретное подмножество столбцов , можно изменить их порядок. Можно изменить имена столбцов, по умолчанию имена столбцов выводятся из data.columns.\n

Можно сортировать строки таблицы.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"viewof table1 = Inputs.table(altayregion_data, {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ],\n header: {\n \"Район или город\": \"Rayon\",\n \"всего 2021\": \"2021\",\n \"всего 2020\": \"2020\"}, \n sort: \"всего 2021\", reverse:true, required: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":" Можно использовать выбранные строки таблицы для построения других таблиц, диаграмм, графиков и т.д. (т.е. работать как с подмножеством данных).

Выберите несколько строк, чтобы посмотреть пример работы с подмножеством данных.

Название подмножества: имя объекта viewof. В нашем примере это: table1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"//запрос на вывод выбранного подмножества данных\ntable1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"Будем использовать выбранное подмножества для построения html-таблицы: ![image.png](${await FileAttachment(\"image.png\").url()}). \n\nДобавим ячейку HTML-table и в коде укажем нужные параметры для таблицы.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"

\n \n \n \n \n \n \n \n \n ${table1.map(d => htl.html`\n \n \n \n `)}\n \n

Район	2021	2020
${d[\"Район или город\"]}	${d[\"всего 2021\"]}	${d[\"всего 2020\"]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"Будем использовать выбранное подмножество данных для построения диаграммы.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"Plot.plot({\n marks: [\n Plot.barX(table1, {x: \"всего 2021\", y: \"Район или город\", fill: \"#345678\", sort: {x: \"x\", reverse: true}}),\n Plot.ruleY([0]),\n Plot.ruleX([0, 200000]),\n ], marginLeft: 250\n\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"viewof table2 = Inputs.table(altayregion_data, {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ],\n header: {\n \"Район или город\": \"Rayon\",\n \"всего 2021\": \"2021\",\n \"всего 2020\": \"2020\"}, \n \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"всего 2020\": 100\n },\n align: {\n \"Район или город\": \"left\",\n \"всего 2021\": \"center\",\n \"всего 2020\": \"right\"\n },\n maxWidth: 600, sort: \"всего 2021\", maxHeight: 300, reverse:true, required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"Отфильтруем данные: получим районы, в которых население сократилось (2020г.> 2021г.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"Inputs.table(altayregion_data.filter( (x)=> x[\"всего 2021\"] < x[\"всего 2020\"]), \n {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ],\n header: {\n \"Район или город\": \"Rayon\",\n \"всего 2021\": \"2021\",\n \"всего 2020\": \"2020\"}, \n \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"всего 2020\": 100\n },\n rows: 60, maxWidth: 600, sort: \"всего 2021\", maxHeight: 200, reverse:true, required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"{var a = altayregion_data.filter( (x)=> x[\"всего 2021\"] < x[\"всего 2020\"]);\n return `Количество таких субъектов ${a.length}, всего субъектов ${altayregion_data.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":334,"value":"## Фильтрация по диапазону значений","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"Организуем поиск информации по районам по включению введенной пользователем подстроки","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"viewof text = Inputs.text({label: \"Район\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"altayregion_data_by_search = altayregion_data.filter( (x)=> String(x[\"Район или город\"]).indexOf(text.trim()) > -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"Теперь построим таблицу по заданному условию (название района включает указанную подстроку)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"Inputs.table(altayregion_data_by_search, \n {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ], \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"всего 2020\": 100\n },\n sort: \"всего 2021\", maxHeight: 150, maxWidth: 550, reverse:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"Для настройки инструмента: Text есть различные параметры, например\n
type - можно указать тип инструмента, например \"password\", \"email\", \"tel\" (по умолчанию: \"text\").\n
value - начальное значение (по умолчанию: пустая строка). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"Инструмент Select: Inputs.select(options)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"Построим список районов (используем Inputs.select)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"regions = altayregion_data.map(d => d[\"Район или город\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof select = Inputs.select(regions, {label: \"Укажите субъект:\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"`Выбранный район: ${select}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"altayregion_data_short = altayregion_data.filter( (x)=> String(x[\"Район или город\"])==select)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"Inputs.table(altayregion_data_short, \n {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ],\n header: {\n \"Район или город\": \"Rayon\",\n \"всего 2021\": \"2021\",\n \"всего 2020\": \"2020\"}, \n \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"всего 2020\": 100\n },\n rows: 60, maxWidth: 600, sort: \"всего 2021\", maxHeight: 400, reverse:true, required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"Вывод таблицы для конкретного района (выбранного)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"Выбор нескольких районов:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"viewof select_mult = Inputs.select(regions, {label: \"Укажите субъектЫ:\", multiple: true, width:300})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"Inputs.table(altayregion_data.filter((x)=>select_mult.includes(String(x[\"Район или город\"]) ) ), \n {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"всего 2020\"\n ],\n header: {\n \"Район или город\": \"Rayon\",\n \"всего 2021\": \"2021\",\n \"всего 2020\": \"2020\"}, \n \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"всего 2020\": 100\n },\n rows: 60, maxWidth: 600, sort: \"всего 2021\", maxHeight: 400, reverse:true, required: false}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"Инструмент Range: Inputs.range(options)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"Необходимо получить информацию по субъектам края, численность населения которых (Всего за 2021): находится в некотором интервале.\n
Получим границы:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":566,"value":"m = altayregion_data.map( (x)=> Number(x[\"всего 2021\"])).sort((a,b)=>(a-b))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"function max_min() {\n var arr = altayregion_data.map( (x)=> Number(x[\"всего 2021\"])).sort((a,b)=>(a-b));\n return [arr[0], arr[arr.length-1]];\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"arr_max_min = max_min()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"`результат: минимальное - ${arr_max_min[0]}, максимальное - ${arr_max_min[1]}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"!!!!! Задание Придумать другой способ без построения массива (Этот способ плохой! Почему?)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":741,"value":"minMaxDirect = {\n let min = Infinity;\n let max = -Infinity;\n\n for (const row of altayregion_data) {\n const value = Number(row[\"всего 2021\"]);\n\n if (value < min) {\n min = value;\n }\n\n if (value > max) {\n max = value;\n }\n }\n\n return [min, max];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"`Минимальное население: ${minMaxDirect[0]}, максимальное население: ${minMaxDirect[1]}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"**Вывод:** минимальная численность населения составляет 4 100 человек, максимальная — 695 540 человек.\n\nВ отличие от исходного способа, здесь не создаётся дополнительный массив численности населения и не выполняется сортировка.\n\nАлгоритм последовательно перебирает строки таблицы и сравнивает значения с текущими минимумом и максимумом.\n\nСложность алгоритма — O(n), тогда как сортировка требует O(n log n). Поэтому предложенный способ эффективнее.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"viewof range_A = Inputs.range([minMaxDirect[0], minMaxDirect[1]], {label: \"Население от:\", value:minMaxDirect[0], step: 10, width: 400})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"viewof range_B = Inputs.range([range_A, minMaxDirect[1]], {label: \"до:\", value: minMaxDirect[1], step: 10, width: 400})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"!!!!! Задание Показать с помощью bar-объекта (canvas) количество субъектов, удовлетворяющих условию (Население 2021 в интервале...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"filteredCount = altayregion_data.filter(d =>\n Number(d[\"всего 2021\"]) >= range_A &&\n Number(d[\"всего 2021\"]) <= range_B\n).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"filteredCanvas = {\n const w = 700;\n const h = 50;\n\n const ctx = DOM.context2d(w, h);\n\n const total = altayregion_data.length;\n const percent = filteredCount / total;\n\n // Фон индикатора\n ctx.fillStyle = \"#dce3ec\";\n ctx.fillRect(0, 0, w, h);\n\n // Заполненная часть\n ctx.fillStyle = \"#345678\";\n ctx.fillRect(0, 0, w * percent, h);\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"`В выбранном диапазоне населения от ${range_A} до ${range_B} человек найдено ${filteredCount} районов из ${altayregion_data.length}.`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"**Вывод:** реализован интерактивный Canvas-индикатор количества районов Алтайского края, численность населения которых находится в заданном диапазоне.\n\nПри изменении ползунков «Население от» и «До» автоматически пересчитывается количество подходящих районов.\n\nДлина заполненной части индикатора пропорциональна доле найденных районов от общего количества записей.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"max_count = altayregion_data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"height = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"viewof count = Inputs.range([0, max_count], {label: \"для примера работы\", step: 1, width: 300})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"canvas = {\n const context = DOM.context2d(width, height);\n context.fillStyle = \"hsl(216deg 100% 13%)\";\n context.fillRect(0, 0, count*(width/max_count), height);\n context.canvas.style.background = \"hsl(216deg 25% 90%)\";\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"Выведем данные в табличном виде, которые удовлетворяют выбранному диапазону","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"altayregion_data.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"altayregion_data_mult = altayregion_data.filter( (x)=> Number(x[\"всего 2021\"]) >= range_A && Number(x[\"всего 2021\"])<= range_B)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"Inputs.table(altayregion_data.filter( (x)=> Number(x[\"всего 2021\"]) >= range_A && Number(x[\"всего 2021\"])<= range_B), \n {\n columns: [\n \"Район или город\",\n \"всего 2021\",\n \"городское население 2021\", \n \"сельское население 2021\"\n ], \n width: {\n \"Район или город\": 250,\n \"всего 2021\": 100,\n \"городское население 2021\": 120, \n \"сельское население 2021\": 120\n },\n sort: \"всего 2021\", maxHeight: 150, maxWidth: 700, reverse:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"Построим диаграмму субъектов, отфильтрованных по условию","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"Plot.plot({\n width:1000,\n marks: [\n Plot.barY(altayregion_data_mult, {y: \"всего 2021\", x: \"Район или город\", fill: \"#345678\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleX([0]),\n Plot.ruleY([0, 200000]),\n ], marginLeft: 50\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":748,"value":"# Самостоятельная работа с табличными данными\n\n## Тема: Анализ международных спортивных соревнований\n\nЦель работы — исследовать распределение спортивных соревнований по местам проведения и ориентировочной численности участников.\n\nЗадачи:\n\n1. Создать JavaScript-таблицу с настройкой названий, порядка, ширины столбцов и сортировки.\n2. Построить HTML-таблицу.\n3. Реализовать ручной выбор строк и построить диаграмму по выбранным данным.\n4. Организовать поиск соревнований по названию.\n5. Реализовать одиночный и множественный выбор мест проведения.\n6. Реализовать фильтрацию по диапазону количества участников.\n7. Построить диаграммы по отфильтрованным данным.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"sportRaw = FileAttachment(\"sport_world (2).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":750,"value":"sportData = sportRaw.map(d => ({\n id: Number(d[\"номер\"]),\n name: String(d[\"Наименование соревнования\"] ?? \"\").trim(),\n period: String(d[\"Сроки проведения\"] ?? \"\").trim(),\n city: String(d[\"Место проведения\"] ?? \"\").trim(),\n participants: Number(d[\"Ориентировочное число участников\"])\n})).filter(d => Number.isFinite(d.participants))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"Inputs.table(sportData, {rows: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"viewof sportSelected = Inputs.table(sportData, {\n columns: [\"name\", \"city\", \"participants\", \"period\", \"id\"],\n header: {\n name: \"Название соревнования\",\n city: \"Место проведения\",\n participants: \"Количество участников\",\n period: \"Сроки проведения\",\n id: \"№\"\n },\n width: {\n name: 400,\n city: 180,\n participants: 150,\n period: 140,\n id: 50\n },\n sort: \"participants\",\n reverse: true,\n multiple: true,\n rows: 12,\n maxHeight: 450\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"Plot.plot({\n title: \"Сравнение выбранных соревнований\",\n width: 900,\n height: Math.max(180, sportSelected.length * 40 + 70),\n marginLeft: 180,\n x: {\n label: \"Количество участников\",\n grid: true\n },\n marks: [\n Plot.barX(sportSelected, {\n x: \"participants\",\n y: d => `№${d.id} — ${d.city}`,\n fill: \"#346789\",\n sort: {y: \"x\", reverse: true},\n tip: true\n }),\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":754,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"viewof sportSearch = Inputs.text({\n label: \"Поиск соревнования:\",\n placeholder: \"Введите название\",\n width: 400\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"sportSearchResults = sportData.filter(d =>\n d.name.toLowerCase().includes(sportSearch.trim().toLowerCase())\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"Inputs.table(sportSearchResults, {\n columns: [\"name\", \"city\", \"participants\"],\n header: {\n name: \"Соревнование\",\n city: \"Место\",\n participants: \"Участников\"\n },\n rows: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"sportCities = [...new Set(sportData.map(d => d.city))].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"viewof sportCity = Inputs.select(sportCities, {\n label: \"Выберите место проведения:\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"Inputs.table(\n sportData.filter(d => d.city === sportCity),\n {\n columns: [\"name\", \"period\", \"participants\"],\n rows: 10\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"viewof sportCitiesSelected = Inputs.select(sportCities, {\n label: \"Выберите несколько мест:\",\n multiple: true,\n width: 350\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"sportMultiData = sportData.filter(d =>\n sportCitiesSelected.includes(d.city)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"Inputs.table(sportMultiData, {\n columns: [\"city\", \"name\", \"participants\"],\n rows: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"sportCitySummary = sportCitiesSelected.map(city => ({\n city,\n participants: d3.sum(\n sportMultiData.filter(d => d.city === city),\n d => d.participants\n )\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"Plot.plot({\n title: \"Численность участников по местам проведения\",\n width: 850,\n height: 400,\n marginLeft: 200,\n x: {\n label: \"Количество участников\",\n grid: true\n },\n marks: [\n Plot.barX(sportCitySummary, {\n x: \"participants\",\n y: \"city\",\n fill: \"#3b82f6\",\n tip: true\n }),\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":766,"value":"sportBounds = [\n d3.min(sportData, d => d.participants),\n d3.max(sportData, d => d.participants)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"viewof sportRangeA = Inputs.range(sportBounds, {\n label: \"Количество участников от:\",\n value: sportBounds[0],\n step: 1,\n width: 400\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"viewof sportRangeB = Inputs.range(\n [sportRangeA, sportBounds[1]],\n {\n label: \"До:\",\n value: sportBounds[1],\n step: 1,\n width: 400\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"sportFiltered = sportData.filter(d =>\n d.participants >= sportRangeA &&\n d.participants <= sportRangeB\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"Inputs.table(sportFiltered, {\n columns: [\"name\", \"city\", \"participants\"],\n sort: \"participants\",\n reverse: true,\n rows: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"`Найдено ${sportFiltered.length} соревнований из ${sportData.length}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"Plot.plot({\n title: \"Распределение соревнований по количеству участников\",\n width: 850,\n height: 400,\n x: {\n label: \"Количество участников\",\n grid: true\n },\n y: {\n label: \"Количество соревнований\"\n },\n marks: [\n Plot.rectY(\n sportFiltered,\n Plot.binX(\n {y: \"count\"},\n {\n x: \"participants\",\n thresholds: 12,\n fill: \"#346789\",\n inset: 1,\n tip: true\n }\n )\n ),\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":773,"value":"md`\n# Выводы\n\nВ ходе практической работы исследованы данные о международных спортивных соревнованиях.\n\nВсего проанализировано **${sportData.length} соревнований**.\n\nВыполнены следующие задания:\n\n- Созданы JavaScript-таблица и HTML-таблица.\n- Изменены названия, порядок и ширина столбцов.\n- Настроена начальная сортировка по численности участников.\n- Реализован ручной выбор строк для построения диаграммы.\n- Создан текстовый поиск соревнований.\n- Реализован одиночный и множественный выбор мест проведения.\n- Создана фильтрация по числовому диапазону.\n- Построены диаграммы для сравнения выбранных и отфильтрованных данных.\n\nТакже выполнены задания преподавателя по поиску минимума и максимума без дополнительного массива и построению Canvas-индикатора.\n\n**Общий вывод:** Observable позволяет создавать интерактивные таблицы и диаграммы, которые автоматически обновляются при изменении выбранных данных и параметров фильтрации.\n`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null