28:null 29:["$","title",null,{"children":"Работа с данными на платформе Observable (язык JavaScript + библиотека D3) | qellex | Observable"}] 2f:[{"id":"0b71facc86da723cdc241b41d3a347fdbc3829735bffb90cadf1368476974b09658941f77222e52890a519396f8dd9b4d4172646384bf6baff3d3d536ce02d17","href":"https://static.observableusercontent.com/files/0b71facc86da723cdc241b41d3a347fdbc3829735bffb90cadf1368476974b09658941f77222e52890a519396f8dd9b4d4172646384bf6baff3d3d536ce02d17","name":"image.png","type":"image/png","lastModified":1725277092174.852,"size":49584},{"id":"9df55a7bcef9c6e6c30973f58aa6930477689e9b39c0a7e02a7ae87b2c16e62d7fca3cacb3bd87bcb05edd139ce971db68a36afd0d7f9c5ef4b95115155aaa74","href":"https://static.observableusercontent.com/files/9df55a7bcef9c6e6c30973f58aa6930477689e9b39c0a7e02a7ae87b2c16e62d7fca3cacb3bd87bcb05edd139ce971db68a36afd0d7f9c5ef4b95115155aaa74","name":"sad_RF.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1725277092174.852,"size":15022},{"id":"8ea73ccb77df85ae94ff8af9fc5d1ea114c387d384b0007f40574e13f605d3d9ae2d8e413f43a0c37957d84d65c89cac99a8994dd677c75cdae4f645b2278465","href":"https://static.observableusercontent.com/files/8ea73ccb77df85ae94ff8af9fc5d1ea114c387d384b0007f40574e13f605d3d9ae2d8e413f43a0c37957d84d65c89cac99a8994dd677c75cdae4f645b2278465","name":"competition.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1725277092174.852,"size":98419}] 2c:{"id":"c356d04a5c97106f","slug":null,"title":"Работа с данными на платформе Observable (язык JavaScript + библиотека D3)","thumbnail":"6bcc0dbc4998c0c734604f49d903bf72daa4339d7559cc2dd9cf7f6538807f29","access_level":"public","create_time":"$D2024-09-02T11:38:12.174Z","update_time":"$D2024-09-02T11:52:10.441Z","view_time":null,"first_public_time":"$D2024-09-02T11:38:12.174Z","fork":{"id":"ba1d6ce1b3be983c","slug":"n-observable","title":"Работа с данными на платформе Observable (язык JavaScript + библиотека D3)","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"397eb612fd309cf3","login":"qellex","name":"qellex","avatar_url":"https://avatars-next.observableusercontent.com/edb4c7906570b191c0aab1bff629a48e075858b53a856a047a145d6012fd6621","tier":"starter_2024"},"version":770,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ab2fef5eab69b2ad","login":"qellex","name":"qellex","avatar_url":"https://avatars-next.observableusercontent.com/86772708464dfcd84dc190250dc431b74bcf60adfa6f283f1cd658fb4aac545e","tier":null}],"members":[{"type":"individual","id":"ab2fef5eab69b2ad","login":"qellex","name":"qellex","avatar_url":"https://avatars-next.observableusercontent.com/86772708464dfcd84dc190250dc431b74bcf60adfa6f283f1cd658fb4aac545e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Работа с данными на платформе Observable (язык JavaScript + библиотека D3)","cells":[{"id":0,"value":"# Работа с данными на платформе Observable (язык JavaScript + библиотека D3)\n\nObservable - это платформа, на которой вы можете совместно исследовать, анализировать, визуализировать данные. На первом занятии вы увидите, как работать со своими данными и быстро получать их \"примитивную\"\nбизнес-аналитику.\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n","pinned":true,"hidden":false,"mode":"md"},{"id":757,"value":"

Ссылка на документацию

\nhttps://observablehq.com/documentation/learn/overview","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"## Типы данных:\nvar number = 13;\n\nvar value = 14.3467;\n\nvar active = false;\n\nvar text = \"Good day\";","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"{var number = 5;\nvar value = 12.3467;\nvar active = true;\nvar text = \"Crystal clear\";\nreturn number;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"### Объекты","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"\nvar child = {\n\n kind: \"boy\",\n \n age: 12,\n \n rost: 123.7\n};","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"{\nvar child = {\n kind: \"boy\",\n age: 12,\n rost: 123.7\n};\nreturn child;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"### Массив и массив объектов","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"//примеры массивов\n\nvar numbers = [ 5, 10, 15, 3.6, '25' ];\n\nvar names = [ '2', '30'];\n\n var s = '';\n \n for (var i = 0; i < names.length; i++) {\n \n s += ' '+names[i];\n \n }","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"{var numbers = [ 5, 10, '15', 20.8, 25 ];\n var names = [ '2', '4'];\n var s = '';\n for (var i = 0; i < names.length; i++) {\n s += ' '+names[i];\n }\n return s;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"//массив объектов\n\nvar childs = [\n\n {\n kind: \"boy\",\n age: 12,\n rost: 123.7\n },\n \n {\n kind: \"boy\",\n age: 10,\n rost: 110.2\n }\n \n];\n","pinned":true,"hidden":false,"mode":"md"},{"id":496,"value":"childs = [\n {\n kind: \"boy\",\n age: 12,\n rost: 123.7\n },\n {\n kind: \"boy\",\n age: 10,\n rost: 110.2\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"### JSON формат\nJSON - это синтаксис организации данных в виде объектов JavaScript. Синтаксис преимущественно оптимизирован для работы с JavaScript и для выполнения запросов. На практике множество веб-интерфейсов возвращают/принимают данные в формате JSON. Этот формат проще и быстрее обрабатывать по сравнению с XML, и D3 также работает с этим форматом.\n\nпример JSON-формата данных:\n\nchildsJS = [\n\n {\n \"kind\": \"boy\",\n \"age\": 12,\n \"rost\": 123.7\n },\n \n {\n \"kind\": \"boy\",\n \"age\": 10,\n \"rost\": 110.2\n }\n \n]\n","pinned":false,"hidden":false,"mode":"md"},{"id":513,"value":"childsJS = [\n {\n \"kind\": \"boy\",\n \"age\": 12,\n \"rost\": 123.7},\n {\n \"kind\": \"boy\",\n \"age\": 10,\n \"rost\": 110.2}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"m = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"a1 = m+7","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"childsJS[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"## Работа с таблицами \n(загрузка и чтение данных)","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"1) Научимся работать с табличными данными: просматривать данные, фильтровать данные по значениям полей таблицы\n\nДля того, чтобы открыть таблицу (xlsx-файл), следует добавить ячейку соответствующего типа: ","pinned":false,"hidden":false,"mode":"html"},{"id":221,"value":"sad_rf = FileAttachment(\"sad_RF.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"childs","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"{//выведем текст сообщения с использование javascript\n let a = \"После открытия привязки файла, представим его данные в виде списка объектов\\n где каждый объект - это словарь-> ключ: значение\\n\" + \"воспользуемся методом sheet (API JavaScript для Excel), которому передадим номер листа\";\n return a;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"data_sad = sad_rf.sheet(0, {headers: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"Можно пользоваться также и стандартными датафреймами, например, cars","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"c_cars=cars.slice(1,20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"data = Inputs.table(c_cars, {columns: ['name', 'cylinders'], rows: 3, maxWidth: 300, sort : 'cylinders'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"Посмотрим название столбцов в нашем датафрейме:","pinned":false,"hidden":false,"mode":"md"},{"id":701,"value":"data_sad.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"function f1() {\n let s = ''\n data_sad.forEach((item, index) => {if ( item[\"регион\"][0]=='Б' ) {s+=' '+item[\"регион\"] } } )\n return s;\n} \n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"f1()","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"Можно работать полученными объектами: получить срез объектов","pinned":false,"hidden":false,"mode":"html"},{"id":245,"value":"data_sad.slice(0,3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"Можно получить: название столбцов","pinned":false,"hidden":false,"mode":"html"},{"id":369,"value":"data_sad.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"{ const s = \"можно отфильтровать данные (условие на значения)\";\n return s;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"a = data_sad.filter( (d)=> d[\"хорошее\"] > 40 && d[\"очень хорошее\"]>10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"Можно выполнить перебор всех объектов","pinned":false,"hidden":false,"mode":"html"},{"id":269,"value":"{let s = \"\";\n data_sad.forEach((item, index) => {s+=`\\n ${item[\"регион\"]} показатель \\\"очень плохое\\\" у ${item[\"очень плохое\"]} опрошенных`});\nreturn s.length;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":" data_sad1= data_sad.map((d) => d['регион'] = d['регион'].toUpperCase())","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"b = data_sad.map((item) => item['всего хорошее'] = item['хорошее'] + item['очень хорошее'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"data_sad","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"Теперь представим наши данные в табличном виде (нужно добавить соответствующую ячейку JavaScript Table)","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"viewof table = Inputs.table(data_sad)","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"table","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"Просмотр таблицы","pinned":false,"hidden":false,"mode":"md"},{"id":673,"value":"SELECT *\n FROM data_sad\n ORDER BY регион DESC\n LIMIT 1","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:data_sad"},{"id":408,"value":"Покажем график по двум параметрам ( добавим ячейку для построения диаграммы со столбцами по X)","pinned":false,"hidden":false,"mode":"html"},{"id":666,"value":"a","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"Plot.plot({\n marks: [\n Plot.barY(data_sad, {x: \"регион\", y: \"очень плохое\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"Диаграмма не информативна.\nИзменим диаграмму: столбцы по Y, сортировка, отступ слева, интервал значений для X","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"Plot.plot({\n width:1000,\n marks: [\n \n Plot.barX(data_sad, {y: \"регион\", x: \"хорошее\", fill:\"#aabfab\", sort: {y: \"x\", reverse: false}}),\n Plot.ruleX([0, 10, 20, 30, 40, 50, 60], {fill:\"#aaaaaa\"})],\n \n color: { legend: true },\n marginLeft: 200,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"## Ещё примеры \n(посмотреть, подумать: что можно изменить, улучшить, поэкспериментировать)\n\nданные по Спартакиаде города Барнаула (школьники)","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"competition = FileAttachment(\"competition.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"data102 = competition.sheet(0, { headers: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"Plot.plot({\n \n marks: [\n Plot.circle(data102.filter(d=> d[\"Год рождения\"]==select), {x: \"Бег 30 метров, сек.\", y: \"Прыжок в длину с места, см \", fill: \"Пол\"})\n ],\n color: { legend: true },\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof select = Inputs.select(stateNames, {label: \"год рождения\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"Plot.plot({\n grid: true,\n facet: {\n data: data102,\n y: \"Год рождения\"\n },\n marks: [\n Plot.circle(data102, {x: \"Бег 30 метров, сек.\", y: \"Прыжок в длину с места, см \", r:\"Год рождения\",fill: \"Пол\"})\n ],color: { legend: true },\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof rows = Inputs.table(data102, {typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"stateNames = new Set(data102.map(d => d['Год рождения']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"построим диаграмму: количество детей по возрастам","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"Plot.plot({ marks: [ Plot.barY(data102, Plot.groupX({y: \"count\"}, {x: \"Год рождения\", fill:\"#a19fab\", sort: {x: \"y\",reverse: true, limit: 10}})), Plot.ruleX([0, 235]) ] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"Plot.plot({\n marks: [\n Plot.barX(olympians, Plot.groupY({x: \"count\"}, {y: \"nationality\", sort: {y: \"x\", reverse: true, limit: 10}})),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"Plot.plot({\n \n marks: [\n Plot.rectY(data102, Plot.binX({y: \"count\"}, {x: \"Год рождения\", fill: \"Пол\"})),\n Plot.ruleY([0])\n ], \n color: {\n legend: true\n },\n x: {\n domain: [1996, 2000]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"Plot.plot({\n grid: true,\n facet: {\n data: data102,\n y: \"Пол\"\n },\n marks: [\n Plot.rectY(data102, Plot.binX({y: \"count\"}, {x: \"Год рождения\", fill: \"Пол\"})),\n Plot.ruleY([0, 50, 75, 100, 125, 145, 165]),\n Plot.textY([75, 100, 125, 145, 165], {fill:\"#a61F1a\"})\n ], \n color: {\n legend: true\n },\n x: {\n domain: [1996, 2000]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"Plot.plot({\n height: 400,\n marks: [\n Plot.dot(data102, Plot.dodgeY({x: \"Прыжок в длину с места, см \",fill: \"Пол\" }))\n ],\n color: {\n legend: true\n },\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"