2a:null 2b:["$","title",null,{"children":"Работа с таблицами | Olga Polovikova | Observable"}] 31:[{"id":"26e4252093de22a9b78b21632d0fdfaabde8953181f5f56f66ed4e5fccae6b2f75643981cd960b2ff6f57d7d39b3bacd6e0f9168dc8f4bba4b2b048e8ae6a7e5","href":"https://static.observableusercontent.com/files/26e4252093de22a9b78b21632d0fdfaabde8953181f5f56f66ed4e5fccae6b2f75643981cd960b2ff6f57d7d39b3bacd6e0f9168dc8f4bba4b2b048e8ae6a7e5","name":"AltayRegion_1.csv","type":"text/csv","lastModified":1664266934020.613,"size":6512},{"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":"0db9e865df293f04ae0629a5a1dbc689fa38cc4b7b909afaab9e1945d26a026d2a5520543e95da1a34adcdca322569a880f72abdf2084ebeba1b0e8527b10f0c","href":"https://static.observableusercontent.com/files/0db9e865df293f04ae0629a5a1dbc689fa38cc4b7b909afaab9e1945d26a026d2a5520543e95da1a34adcdca322569a880f72abdf2084ebeba1b0e8527b10f0c","name":"d1.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1758281871257.181,"size":114706}] 2e:{"id":"8510a03b5949238a","slug":"n","title":"Работа с таблицами","thumbnail":"af9097aa7c20a8236618e07656c94abacb5751a4c7a61dfcfea744430b1af391","access_level":"public","create_time":"$D2022-09-27T08:22:14.020Z","update_time":"$D2025-09-19T11:39:31.267Z","view_time":null,"first_public_time":"$D2022-09-27T08:35:37.733Z","fork":{"id":"a4ce431a2360e84c","slug":"untitled/2","title":"Диаграммы","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":4,"starred":false,"owner":{"type":"team","id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":"starter_2024"},"version":742,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39bbe44713bf1f81","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":null}],"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":false,"trashed":false,"subscribed":null,"forks":37,"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":"altayregion_data= FileAttachment(\"AltayRegion_1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof table = Inputs.table(altayregion_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"ad= FileAttachment(\"d1.xlsx\").xlsx({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"\"Всего записей в таблице районов Алтайского края:\"+`${altayregion_data.length}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"

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

Можно сортировать строки таблицы.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":202,"value":" Можно использовать выбранные строки таблицы для построения других таблиц, диаграмм, графиков и т.д. (т.е. работать как с подмножеством данных).

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

Название подмножества: имя объекта viewof. В нашем примере это: table1.","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"//запрос на вывод выбранного подмножества данных\ntable1","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"Будем использовать выбранное подмножества для построения html-таблицы: ![image.png](${await FileAttachment(\"image.png\").url()}). \n\nДобавим ячейку HTML-table и в коде укажем нужные параметры для таблицы.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":231,"value":"Будем использовать выбранное подмножество данных для построения диаграммы.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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":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"},{"id":306,"value":"Отфильтруем данные: получим районы, в которых население сократилось (2020г.> 2021г.)","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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":453,"value":"Организуем поиск информации по районам по включению введенной пользователем подстроки","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"viewof text = Inputs.text({label: \"Район\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"altayregion_data_by_search = altayregion_data.filter( (x)=> String(x[\"Район или город\"]).indexOf(text.trim()) > -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"Теперь построим таблицу по заданному условию (название района включает указанную подстроку)","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":510,"value":"Для настройки инструмента: Text есть различные параметры, например\n
type - можно указать тип инструмента, например \"password\", \"email\", \"tel\" (по умолчанию: \"text\").\n
value - начальное значение (по умолчанию: пустая строка). ","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"Инструмент Select: Inputs.select(options)","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"Построим список районов (используем Inputs.select)","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"regions = altayregion_data.map(d => d[\"Район или город\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof select = Inputs.select(regions, {label: \"Укажите субъект:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"`Выбранный район: ${select}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"altayregion_data_short = altayregion_data.filter( (x)=> String(x[\"Район или город\"])==select)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":372,"value":"Вывод таблицы для конкретного района (выбранного)","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"Выбор нескольких районов:","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"viewof select_mult = Inputs.select(regions, {label: \"Укажите субъектЫ:\", multiple: true, width:300})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":519,"value":"Инструмент Range: Inputs.range(options)","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"Необходимо получить информацию по субъектам края, численность населения которых (Всего за 2021): находится в некотором интервале.\n
Получим границы:","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"m = altayregion_data.map( (x)=> Number(x[\"всего 2021\"])).sort((a,b)=>(a-b))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":581,"value":"arr_max_min = max_min()","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"`результат: минимальное - ${arr_max_min[0]}, максимальное - ${arr_max_min[1]}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"!!!!! Задание Придумать другой способ без построения массива (Этот способ плохой! Почему?)","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"viewof range_A = Inputs.range([arr_max_min[0], arr_max_min[1]], {label: \"Население от:\", value:arr_max_min[0], step: 10, width: 400})","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof range_B = Inputs.range([range_A, arr_max_min[1]], {label: \"до:\", value: arr_max_min[1], step: 10, width: 400})","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"!!!!! Задание Показать с помощью bar-объекта (canvas) количество субъектов, удовлетворяющих условию (Население 2021 в интервале...)","pinned":false,"hidden":false,"mode":"md"},{"id":714,"value":"max_count = altayregion_data.length","pinned":true,"hidden":false,"mode":"ojs"},{"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":"viewof count = Inputs.range([0, max_count], {label: \"для примера работы\", step: 1, width: 300})","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, 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"},{"id":603,"value":"Выведем данные в табличном виде, которые удовлетворяют выбранному диапазону","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"altayregion_data.columns","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":415,"value":"Построим диаграмму субъектов, отфильтрованных по условию","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"