28:null 29:["$","title",null,{"children":"Группировка данных для визуализации | Olga Polovikova | Observable"}] 2f:[{"id":"a312cfa13a752dfd083498c1943047bde8b376609ec3bea20f266e07e9d069d57b91fdf4e31f11afaa5492f3edc860f9e62a44b78e6e0ebd889815d2ed1c03de","href":"https://static.observableusercontent.com/files/a312cfa13a752dfd083498c1943047bde8b376609ec3bea20f266e07e9d069d57b91fdf4e31f11afaa5492f3edc860f9e62a44b78e6e0ebd889815d2ed1c03de","name":"bd-deaths-age.csv","type":"text/csv","lastModified":1666766327108.188,"size":17442},{"id":"f6987ff0dc29541e3e4d5598b84f9005c4203f7dd8bb6ebda56051cda6edc6845d5fa80278bf3f669b1bb7c2d9ec87a37b9ba44236fc4dedd852a4b40af93b37","href":"https://static.observableusercontent.com/files/f6987ff0dc29541e3e4d5598b84f9005c4203f7dd8bb6ebda56051cda6edc6845d5fa80278bf3f669b1bb7c2d9ec87a37b9ba44236fc4dedd852a4b40af93b37","name":"disk_d@7.csv","type":"text/csv","lastModified":1666766327108.188,"size":1020},{"id":"26088b7f35f239950dc1dbadec7883093a457b0396b0f92d253e73d748b0f2a1801cfa2e6438fc1a9c34686c1aff65ea81071e746e65981d19e77ab0b79bd3b1","href":"https://static.observableusercontent.com/files/26088b7f35f239950dc1dbadec7883093a457b0396b0f92d253e73d748b0f2a1801cfa2e6438fc1a9c34686c1aff65ea81071e746e65981d19e77ab0b79bd3b1","name":"disk_d2@5.csv","type":"text/csv","lastModified":1666766327108.188,"size":1214}] 2c:{"id":"ad59216eb8835c7f","slug":null,"title":"Группировка данных для визуализации","thumbnail":"839b65e9b64d13141d108bd6dc9603dfedf97a5c905de52396bf283efdd25962","access_level":"public","create_time":"$D2022-10-26T06:38:47.108Z","update_time":"$D2022-10-26T06:38:47.108Z","view_time":null,"first_public_time":"$D2022-10-26T06:38:47.108Z","fork":{"id":"e39c4325267d8e5a","slug":null,"title":"Группировка данных для визуализации","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":"starter_2024"},"version":786,"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":0,"collection":null,"type":"notebook","body":{"title":"Группировка данных для визуализации","cells":[{"id":23,"value":"# Группировка данных для визуализации","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"Загружаем данные: csv-файл для выполнения экспериментов:","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"bdDeathsAge = FileAttachment(\"bd-deaths-age.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"Формируем датасет для работы. Преобразуем к нужному типу (для поля Age определяем только нижнюю границу интервала, верхняя = нижняя граница интервала + 4). Избавляемся от \"итоговых\" записей.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"bd = bdDeathsAge.filter((d)=>(d.Sex!=\"Total\" && d.Age!= \"Total\" && d.Age!= \"Infant\")).map(\n function (d) {\n\t return {data_b: Number(d.Period),\n pol: (d.Sex).substring(0,1).toUpperCase(),\n age: fun_get_age(d.Age),\n count_b: Number(d.Count)}\n }).sort((a, b) => a[\"data_b\"] > b[\"data_b\"] ? 1 : -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"Функция для обработки строки на основе регулярных выражений. Возвращает первое число (непрерывную последовательность из символов-цифр) в строке.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"function fun_get_age(object) {\n var r = /\\d+/;\n return Number((String(object)).match(r)[0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"Представим данные в табличном виде","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"viewof table_bd = Inputs.table(bd, {maxHeight: 150})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"Построим диаграммы (для мужчин и женщин), отражающие количественные показатели по годам, выделив цветом в каждом годе пол:","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"bd_2021 = bd.filter(d=>d[\"data_b\"]==2021)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"Plot.plot({\n width : 900,\n height : 300, \n grid : true,\n facet: {\n data: bd_2021,\n x: \"age\",\n margin: 30\n },\n marks: [\n Plot.barY(bd_2021, {x: \"pol\", y: \"count_b\", fill:\"pol\"}),\n Plot.ruleY([0, 2000,3000]),\n //Plot.text(bd, {x: \"data_b\", y: \"count_b\", fill: \"age\" , dy: , text: d=>d[\"count_b\"]}), \n ], color: { range: colors, legend: true},\nmargintop: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"Количество человек по каждой возрастной группе одного года (две метки столбцов: M, F)","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"viewof select_date = Inputs.select(new Set(bd.map(d => d[\"data_b\"])), {label: \"Год исследования\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"Plot.plot({\n width :1000,\n height : 400, \n grid : true,\n y: {\n domain: [1, 4000]\n },\n marks: [\n Plot.barY(bd.filter(x=> x.data_b==select_date && x.pol=='M'), {x: \"age\", y: \"count_b\", fill: \"grey\" , fillOpacity: 0.4}),\n Plot.barY(bd.filter(x=> x.data_b==select_date && x.pol=='F'), {x: \"age\", y: \"count_b\", fill: \"red\", fillOpacity: 0.4}),\n Plot.ruleY([0]),\n Plot.text(bd.filter(x=> x.data_b==select_date && x.pol=='M'), {x: \"age\", y: \"count_b\", fill: \"black\", dy: -10, text: d=>d[\"count_b\"]}), \n Plot.text(bd.filter(x=> x.data_b==select_date && x.pol=='F'), {x: \"age\", y: \"count_b\", fill: \"red\" , dy:-80, text: d=>d[\"count_b\"]}), \n ],color: { legend: true, range:[\"orange\", \"brown\"]},\n marginLeft: 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"

В процессе работы с данными возникает потребность сгруппировать их перед визуализацией. Например, в нашем случае, я можно посмотреть медианные значения по количеству человек за весь период исследований по возрастам.\n

Групповые преобразования Plot позволяют получать сводные значения для каждой группы, такие как количество, сумма, среднее значение, медиана. Групповое преобразование, как правило, используется для создания столбчатых диаграмм.

Преобразование groupX группирует данные по x. Это может быть использовано для создания y-канала для метки barY (Аналогичная группировка по y).","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"Plot.plot({\n width :700,\n height : 400, \n grid : true,\n facet: {\n data: bd,\n y: \"pol\",\n margin: 50\n },\n y: {\n domain: [1, 3000]\n },\n marks: [\n Plot.ruleY([0, 1000, 2000, 3000]),\n Plot.barY(bd, Plot.groupX({y: \"mean\"}, {x: \"age\", y: \"count_b\",fill: \"pol\" })),\n ], \n color: { range: colors, legend: true}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"colors = [\"#7fa074\",\"#90719f\",\"#2c4b27\",\"#2d223c\",\"#dec5da\",\"#c1d1aa\",\"#574571\",\"#0e2810\",\"#b695bc\",\"#466c4b\",\"#ffa074\",\"#9a719f\",\"#2f4b27\",\"#22223c\", \"orange\", \"brown\",\"#af9980\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"

Групповое преобразование обычно не следует использовать, если основное измерение (например, x) является временным (время) или другим непрерывным количественным показателем, т.е. не категориальным (не дискретным). \n

Для каждой группы определяется специальный ключ, который задаёт способ построения итоговое значение (ключ группировки указывается первым аргументом группового преобразования). Можно строить каналы на основе следующих ключей:\n
count - количество наблюдений для каждой группы,\n
sum - сумма значений,\n
proportion - как сумма, но разделенная на общую сумму,\n
min - минимальное значение,\n
max - максимальное значение,\n
mean - среднее значение,\n
median - медиана значений,\n
mode - мода (значение с наибольшим количеством вхождений),\n
variance - несмещенная оценка дисперсии,\n
deviation - стандартное отклонение,\n
first - первое значение (в датасете),\n
last - последнее значение (в датасете).","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"Для нашего датасета определим: есть (наблюдается) тенденция (рост, снижение) суммарного количества людей всех возрастов из года в год (отдельно для каждой гендерной группы)?","pinned":true,"hidden":false,"mode":"md"},{"id":709,"value":"Plot.plot({\n width :900,\n height : 300, \n facet: {\n data: bd,\n x: \"pol\",\n margin: 50\n },\n y: {\n domain: [0, 17000]\n },\n marks: [\n Plot.ruleY([0, 15000, 17000]),\n Plot.barY(bd, Plot.groupX({y: \"sum\"}, {x: \"data_b\", y: \"count_b\",fill: \"data_b\" })),\n ], \n color: { legend: true , scheme: \"magma\"},\n grid : true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"Построим аналогичные зависимости, но покажем количественные изменения между гендерными группами.","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"Plot.plot({\n width :900,\n height : 400, \n facet: {\n data: bd,\n x: \"data_b\",\n margin: 40\n },\n y: {\n domain: [0, 18000]\n },\n marks: [\n Plot.ruleY([0, 15000, 17000]),\n Plot.barY(bd, Plot.groupX({y: \"sum\"}, {x: \"pol\", y: \"count_b\",fill: \"pol\" })),\n ], \n color: { legend: true },\n grid : true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"Сгруппируем данные по возрасту и полу, вычислим для этих групп пропорцию (в процентах-> percent: true): proportion (сумма количественных данных, разделенная на общую сумму количественных данных в процентах)","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"Plot.plot({\n width: 1000,\n grid: true,\n y: {\n percent: true,\n domain: [0, 18]\n },\n marks: [\n Plot.barY(bd_2021, Plot.groupX({y: \"proportion\"}, {y: \"count_b\", fill:\"pol\", x:\"age\"})),\n Plot.text(bd_2021, Plot.groupX({y: \"proportion\", text:\"first\"}, {y: \"count_b\", x:\"age\", dy: -5, dx: -15, text:\"count_b\"})),\n Plot.text(bd_2021, Plot.groupX({y: \"proportion\", text:\"last\"}, {y: \"count_b\", x:\"age\",dy: -5, dx: 10, text:\"count_b\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"Для подписей использовали метку: Plot.text(). Инструкция в настройках группирующего ключа text:\"last\" позволяет поставить ссылку (label) для вывода текста.","pinned":false,"hidden":false,"mode":"md"},{"id":732,"value":"### Диаграмма вида Pack и Sunburst","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"Загрузим данные (датасет): содержание нескольких папок диска D с размерами.","pinned":false,"hidden":false,"mode":"md"},{"id":675,"value":"diskD = FileAttachment(\"disk_d@7.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"Метод pop() вырезает и возвращает последний элемент (в нашем случае из списка)","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"diskD[1].dir_file.split(\"\\\\\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"diskD[1].dir_file.split(\"\\\\\").pop()","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"Добавим ячейку \"создание Sunburst\" и укажем данные нашего датасет-а","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"Sunburst(diskD, {\n path: (d) => d.dir_file.replaceAll(\"\\\\\", \"\\/\"),\n label: (d) => d.dir_file.split(\"\\\\\").pop()+(d.size!=null?\"(\"+String(d.size)+\")\":\"\"),\n value: (d) => d?.size, \n // title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), \n width,\n height: 700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"Загрузка данных","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"subj = FileAttachment(\"disk_d2@5.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"Добавим ячейку \"создание Pack\" и укажем данные нашего датасет-а","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"Pack(subj, {\n path: (d) => d.subject.replaceAll(\":\", \"\\/\"),\n label: (d) => d.subject.split(\":\").pop()+(d.count_stud!=null?\"\\n(\"+String(d.count_stud)+\")\":\"...\"),\n value: (d) => d?.count_stud, \n //title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), \n width,\n height: 700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"import {Pack} from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"import {Sunburst} from \"@d3/sunburst\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"