JSON Data Visualization<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<\/head>\n<body>\n<div class=\"container mt-4\" style=\"min-width:850px; max-width: 2000px;\">\n <center>\n\n \n <div class=\"row mb-3 d-flex justify-content-end\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-2 d-flex justify-content-center\">\n <div class=\"row mb-3 d-flex\" style=\"background: white; position: relative; padding: 5px 10px 0px 6px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <div class=\"col-8 d-flex justify-content-start\" style=\"padding: 2px 0px 0px 4px;\">\n <a href=\"https:\/\/forms.gle\/T6tpnZmhXKUHx84U8\" style=\"text-decoration: none;\">\n <h2 style=\"font-family: verdana; font-size: 90%; color: blue; text-align: right;\">Adborth!<\/h2>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row mb-3 justify-content-between\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-3\">\n <a href=\"https:\/\/www.technocamps.com\/cy\/\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/technocamps.png\" alt=\"Technocamps Logo and link to technocamps.com\" class=\"img-fluid d-block m-auto\" style=\"max-height: 55px;\">\n <\/a>\n <\/div>\n <div class=\"col-6\">\n <h1 style=\"font-family: courier new; font-size: 200%; color: black; text-align: center;\">micro:bit ML a CreateAI<br>Offeryn Dadansoddi Data<\/h1>\n <\/div>\n <div class=\"col-3\">\n <a href=\"https:\/\/microbit.org\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit-1.png\" alt=\"microbit Logo and link to microbit.org\" class=\"img-fluid d-block m-auto\" style=\"max-height: 55px;\">\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"row mb-3\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-6\">\n <input type=\"file\" id=\"jsonFile\" class=\"form-control\" accept=\".json\">\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleLearnerHelp()\">Cymorth i Ddysgwyr<\/button>\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleTeacherHelp()\">Cymorth i Athrawon<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"learnerHelpSection\" class=\"mt-3\" style=\"display: none; text-align: left;\">\n <div class=\"border p-3 rounded mx-auto d-flex align-items-center\" style=\"min-width:800px; max-width: 1000px; background-color: #f8f9fa;\">\n <div class=\"row g-3 w-100\">\n\n \n <div class=\"col-md-3 border-end pe-3\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit_axes.png\" alt=\"Diagram demonstrating the x, y and z axes on a micro:bit\" class=\"img-fluid\" style=\"max-height: 300px;\">\n <\/div>\n\n \n <div class=\"col-md-9 ps-3 d-flex align-items-center\">\n <div class=\"accordion w-100\" id=\"learnerHelpAccordion\">\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#uploadData\" \n aria-expanded=\"false\" \n aria-controls=\"uploadData\">\n <b>Lanlwytho Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"uploadData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Cliciwch <i>Dewis Ffeil<\/i> a dewiswch y ffeil hoffech lanlwytho\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r ffeil cael ei lawrlwytho o naill ai'r <i>Offeryn micro:bit Machine Learning<\/i> \n neu gwefan <i>micro:bit CreateAI<\/i> a rhaid ei bod hi'n <i>ffeil<\/i> JSON!\n <\/li>\n <li class=\"mb-3\">\n Gallwch lawrlwytho hwn ar y gwefannau hyn trwy glicio ar y botwm dewislen (tri dot) a chlicio \n <i>Download all data samples<\/i>.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingSite\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingSite\">\n <b>Defnyddio'r Wefan Hon<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingSite\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Pan fyddwch chi'n agor ffeil, mae'r gweithredoedd a gofnodwyd gennych yn ymddangos fel botymau.\n <\/li>\n <li class=\"mb-3\">\n Pan fyddwch yn clicio ar unrhyw weithred, bydd 4 graff yn ymddangos:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r 3 graff cyntaf yn dangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o'r Recordiadau. Gallwch ddefnyddio'r rhain i benderfynu pa mor debyg yw eich Recordiadau!\n <\/li>\n <li class=\"mb-2\">\n Mae'r graff olaf yn dangos y cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o un Recordiad ar y tro. Mae gwymplen yn gadael i chi ddewis pa Recordiad i ymchwilio iddo.\n <\/li>\n <\/ul>\n <\/li> \n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingGraphs\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingGraphs\">\n <b>Eich Graffiau<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingGraphs\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <p>Mae gan bob un o'ch graffiau isod yr offer hyn:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Bydd clicio ar y Recordiadau ar frig pob graff yn gwneud iddynt ymddangos a diflannu. Gallwch ddefnyddio hwn i helpu i ganfod pa Recordiadau sy'n debyg.\n <\/li>\n <li class=\"mb-3\">\n Mae'r tri graff cyntaf (<i>x<\/i>, <i>y<\/i> a <i>z<\/i>) yn arddangos y <b>cydberthynas<\/b> o'r Recordiadau - mae hyn yn golygu pa mor debyg ydyn nhw. Wrth i chi wneud i'ch Recordiadau ymddangos\/diflannu bydd y rhifau hyn yn newid i ddangos y gydberthynas ar gyfer y Recordiadau y gallwch eu gweld! Mae hyn yn ddefnyddiol ar gyfer canfod pa Recordiadau sy'n debyg.\n <\/li>\n <li class=\"mb-3\">\n Bydd clicio <b>Toglo'r Tabl<\/b> yn gwneud i'r tabl o dan y graff ymddangos a diflannu. \n <\/li>\n <li class=\"mb-3\">\n Bydd hofran dros unrhyw bwynt yn dweud wrthych ei werth.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#understandingData\" \n aria-expanded=\"false\" \n aria-controls=\"understandingData\">\n <b>Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"understandingData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Mae eich model Dysgu Peirianyddol yn gweithio trwy ddod o hyd i batrymau yn eich Recordiadau - <b>ond mae hyn yn anodd!<\/b>\n <\/li>\n <li class=\"mb-3\">\n I ddod o hyd i batrymau mae angen i'ch Recordiadau fod <b>yn debyg<\/b>. Os yw'ch holl Recordiadau'n edrych yn wahanol iawn, yna bydd yn anodd iawn i'ch model ddod o hyd i batrymau (bydd yn dal i geisio dyfalu yn wael!). \n <\/li>\n <li class=\"mb-3\">\n <i>Ond<\/i>, os yw eich holl Recordiadau yr un peth yna does dim patrymau!\n <\/li>\n <li class=\"mb-3\">\n Mae hyn yn gwneud pethau'n anodd! Gall yr offeryn hwn eich helpu i ddadansoddi a gall eich helpu i wella eich model Dysgu Peirianyddol.\n <\/li>\n <li class=\"mb-3\">\n Mae'r graffiau yn ffordd dda o wirio a yw eich Recordiadau yn debyg gyda'ch llygaid. Os ydyn nhw'n edrych yn debyg yna mae'ch data'n dda. Os ydynt yn edrych yn wahanol iawn yna mae eich data <i>efallai<\/i> yn wael.\n <\/li>\n <li class=\"mb-3\">\n Mae'r cydberthnasau yn ffordd dda o wirio a yw eich Recordiadau yn debyg gyda <b>mathemateg!<\/b> <i>Cydberthynas<\/i> yn golygu pa mor debyg yw pethau - mae gan eich graffiau ddau gydberthynas:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Si\u00e2p<\/i><\/b> yn dweud wrthych pa mor debyg yw si\u00e2p eich Recordiadau - mewn geiriau eraill pa mor dda mae'r llinellau'n cyfateb. Os yw eich llinellau yr un fath bydd ganddynt <i>100%<\/i> gydberthynas, os yw eich llinellau yn hollol i'r gwrthwyneb bydd ganddynt <i>-100%<\/i> gydberthynas.\n <\/li>\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Syfliad<\/i><\/b> yn dweud wrthych pa mor debyg fyddai eich Recordiadau pe baent yn cael eu symud i'r chwith neu'r dde - mewn geiriau eraill pe baech yn eu gosod yn eu trefn orau ag y gallech. <b>Byddwch yn ofalus<\/b> gan nad yw'r gydberthynas hon yn poeni am si\u00e2p, felly gall y nifer fod yn uchel iawn hyd yn oed os nad yw'r Recordiadau yn edrych yn debyg iawn!\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"teacherHelpSection\" class=\"mt-3\" style=\"display: none; text-align: left;\">\n <div class=\"border p-3 rounded mx-auto d-flex align-items-center\" style=\"min-width: 800px; max-width: 1000px; background-color: #f8f9fa;\">\n <div class=\"row g-3 w-100\">\n\n \n <div class=\"col-md-3 border-end pe-3\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit_axes.png\" alt=\"Diagram demonstrating the x, y and z axes on a micro:bit\" class=\"img-fluid\" style=\"max-height: 300px;\">\n <\/div>\n\n \n <div class=\"col-md-9 ps-3 d-flex align-items-center\">\n <div class=\"accordion w-100\" id=\"teacherHelpAccordion\">\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#uploadData\" \n aria-expanded=\"false\" \n aria-controls=\"uploadData\">\n <b>Lanlwytho Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"uploadData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Cliciwch <b>Dewis Ffeil<\/b> a dewiswch y ffeil hoffech lanlwytho\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r ffeil cael ei lawrlwytho o naill ai'r <i>Offeryn micro:bit Machine Learning<\/i> \n neu gwefan <i>micro:bit CreateAI<\/i> a bod yn <b>ffeil<\/b> JSON!\n <\/li>\n <li class=\"mb-3\">\n Gallwch lawrlwytho hwn ar y gwefannau hyn trwy glicio ar y botwm dewislen (tri dot) a chlicio \n <i>Download all data samples<\/i>.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingSite\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingSite\">\n <b>Llywio'r Tudalen Hon<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingSite\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Pan agorir JSON, bydd pob un o'r gweithredoedd a gofnodwyd gan ddefnyddio'r offer Machine Learning neu CreateAI yn ymddangos fel botymau. Dangosir pob gweithred fel tab ar wah\u00e2n - h.y. ni ellir cymharu'r gweithredoedd \u00e2'r naill a'r llall.\n <\/li>\n <li class=\"mb-3\">\n Ar gyfer pob gweithred, bydd 4 graff yn ymddangos:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r 3 graff cyntaf yn dangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> yr holl Recordiadau - gellir defnyddio'r rhain i bennu cysondeb pob Recordiad, ac a yw unrhyw rai yn dra gwahanol. Dangosir system gyfesurynnol y micro:bit ar y chwith.\n <\/li>\n <li class=\"mb-2\">\n Mae'r graff olaf yn arddangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o un Recordio ar y tro. Mae cwymplen yn eich galluogi i ddewis pa Recordiad i ymchwilio iddo.\n <\/li>\n <\/ul>\n <\/li> \n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingGraphs\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingGraphs\">\n <b>Llywio'r Graffiau<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingGraphs\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <p>Gellir ymchwilio i bob graff isod gan ddefnyddio\u2019r canlynol:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Bydd clicio ar bob Recordiad\/Echel <i>yn yr allwedd<\/i> o bob graff yn <b>toglo ei welededd<\/b> Gellir defnyddio hwn i helpu i ganfod pa Recordiadau sy'n gyson a pha rai sy'n allanolion.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <i>tri graff cyntaf<\/i> yn dangos <b>cydberthynas<\/b> y data. Dyma yw pa mor agos mae pob un o'r Recordiadau (ar gyfer y cyfesuryn penodol) yn cyfateb. Darperir hyn fel canran ar gyfer dealladwyedd. Bydd cyfuno gwelededd Recordiadau yn newid y gydberthynas i adlewyrchu'r data a ddewiswyd. Gall hyn hefyd helpu i ddod o hyd i allanolion.\n <\/li>\n <li class=\"mb-3\">\n Bydd clicio <b>Toglo'r Tabl<\/b> yn toglo'r tabl sy'n cynnwys gwerthoedd pob pwynt data o bob Recordiad\/Echelin gweladwy.\n <\/li>\n <li class=\"mb-3\">\n <b>Bydd Hofran<\/b> dros unrhyw bwynt yn dweud wrthych ei werth.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#understandingData\" \n aria-expanded=\"false\" \n aria-controls=\"understandingData\">\n <b>Deall y Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"understandingData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Er mwyn i Dysgu Peirianyddol weithio, rhaid i batrymau fod yn bresennol yn y data, ond <b>nid yw hon yn wyddoniaeth fanwl gywir!<\/b>\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r data a gofnodwyd ar gyfer pob gweithred <i>fod yn weddol tebyg<\/i> er mwyn i batrymau cael eu canfod - os yw'r Recordiadau ar gyfer gweithred yn dra gwahanol yna bydd yn anodd iawn i'r model ddod o hyd i unrhyw batrymau realistig (er y bydd yn dal i geisio gan dychwelyd canlyniadau annisgwyl!). \n <\/li>\n <li class=\"mb-3\">\n <i>Fodd bynnag<\/i>, pe bai'r holl Recordiadau ar gyfer gweithred yn union yr un fath yna ni fyddai unrhyw batrymau i'w gweld (gan mai dim ond yr union batrwm hwnnw fyddai'n cael ei gofrestru fel y weithred honno).\n <\/li>\n <li class=\"mb-3\">\n Mae hwn yn gydbwysedd bregus, a gall yr offer ar y dudalen hon helpu i ddadansoddi eich Recordiadau a gall helpu i wella effeithiolrwydd eich modelau Dysgu Peirianyddol.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <b>graffiau<\/b> yn rhoi arwydd gweledol da i weld a yw data yn debyg. Os yw'r cromliniau'n edrych yn debyg yna mae'r data'n dda. Os oes patrymau hollol wahanol, yna mae'r data <i>yn debygol<\/i> yn wael.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <b>cydberthynas<\/b> hefyd yn gallu rhoi arwydd mathemategol da i weld a yw data yn debyg. Rhoddir dau fesur o gydberthynas:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Si\u00e2p<\/i><\/b> yn diffinio pa mor dda y mae pob un o\u2019r Recordiadau yn cyfateb ar sail eu si\u00e2p (h.y. pa mor dda mae\u2019r llinellau\u2019n cyfateb). Bydd gan linellau sy'n cyfateb yn berffaith <i>100%<\/i> gydberthynas, bydd gan llinellau sy'n hollol i'r gwrthwyneb <i>-100%<\/i> gydberthynas. Nodwch <b>nad yw hwn yn<\/b> cymryd unrhyw atred (ar hyd yr echelin-x) i ystyriaeth, ac felly bydd yn rhoi gwerthoedd cydberthyniad isel i Recordiadau sy'n cael eu gwrthbwyso oddi wrth ei gilydd, ond sydd \u00e2 si\u00e2p union yr un fath. Mae hyn yn defnyddio'r <i>Cydberthynas Pearson<\/i>.\n <\/li>\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Syfliad<\/i><\/b> yn diffinio pa mor dda y byddai pob un o'r Recordiadau yn cyfateb pe baent yn cael eu symud (gwrthbwyso) i'w haliniad gorau posibl. Mae hyn yn bychanu pwysigrwydd si\u00e2p (trwy gydberthyn yn \u00f4l amlder) a <i>dylai ei gymryd gyda gronyn o halen<\/i> (gan y gall gwerthoedd fod yn gamarweiniol o uchel). Mae hyn yn defnyddio'r <i>Cydberthynas Pearson Addasedig (Cyfnod Sefydlog)<\/i>.\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <center>\n <div id=\"objectList\" class=\"mt-3\" style=\"min-width:800px; max-width: 800px;\"><\/div>\n <\/center>\n \n \n <div id=\"charts\" class=\"container mt-4\" style=\"display: none; min-width: 800px; max-width: 2000px;\">\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-X<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"x\" style=\"background: white; position: relative; text-align: center; vertical-align: middle; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"x\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"x\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"xChart\"><\/canvas>\n <\/div>\n <div id=\"xTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-Y<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"y\" style=\"background: white; position: relative; text-align: center; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"y\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"y\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"yChart\"><\/canvas>\n <\/div>\n <div id=\"yTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-Z<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"z\" style=\"background: white; position: relative; text-align: center; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"z\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"z\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"zChart\"><\/canvas>\n <\/div>\n <div id=\"zTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-6 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd Cyfun<\/b><\/h2>\n <\/div>\n <div class=\"col-6 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"merged\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"chart-toggles-merged\"><\/div>\n <div style=\"height: 400px;\">\n <canvas id=\"mergedChart\"><\/canvas>\n <\/div>\n <div id=\"mergedTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/center>\n<\/div>\n\n\n<script>\n let jsonData = [];\n let currentCharts = { x: null, y: null, z: null, merged: null };\n let currentObjectId = null;\n const colors = ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff', '#ff9f40'];\n\n\n \/\/ Listen to Choose File Button and Load File\n document.getElementById('jsonFile').addEventListener('change', function(e) {\n const file = e.target.files[0];\n const reader = new FileReader();\n \n reader.onload = function(event) {\n jsonData = JSON.parse(event.target.result);\n renderObjectList();\n };\n \n reader.readAsText(file);\n });\n\n\n \/\/ Toggle the Learner Help Section visibility upon clicking Help Button\n function toggleLearnerHelp() {\n const learnerHelpSection = document.getElementById('learnerHelpSection');\n const teacherHelpSection = document.getElementById('teacherHelpSection');\n learnerHelpSection.style.display = learnerHelpSection.style.display === 'none' ? 'block' : 'none';\n teacherHelpSection.style.display = teacherHelpSection.style.display === 'block' ? 'none' : 'none';\n }\n\n\n \/\/ Toggle the Teacher Help Section visibility upon clicking Help Button\n function toggleTeacherHelp() {\n const teacherHelpSection = document.getElementById('teacherHelpSection');\n const learnerHelpSection = document.getElementById('learnerHelpSection');\n teacherHelpSection.style.display = teacherHelpSection.style.display === 'none' ? 'block' : 'none';\n learnerHelpSection.style.display = learnerHelpSection.style.display === 'block' ? 'none' : 'none';\n }\n\n\n \/\/ Create List of Actions Recorded in ML\n function renderObjectList() {\n const container = document.getElementById('objectList');\n container.innerHTML = jsonData.map(obj => `\n <button class=\"btn btn-primary w-100 mb-2\" \n onclick=\"showCharts(${obj.ID})\">\n ${obj.name}\n <\/button>\n `).join('');\n }\n\n\n \/\/ On Action Chosen Show All Charts\n function showCharts(objectId) {\n currentObjectId = objectId;\n const obj = jsonData.find(item => item.ID === objectId);\n document.getElementById('charts').style.display = 'block';\n renderRecordingDropdown(obj.recordings);\n createAllCharts(obj);\n }\n\n\n \/\/ Create Dropdown for Megred Chart\n function renderRecordingDropdown(recordings) {\n const mergedHTML = `\n <select class=\"form-select merged-select\">\n ${recordings.map((rec, i) => `\n <option value=\"${rec.ID}\">Recording ${i + 1}<\/option>\n `).join('')}\n <\/select>\n `;\n document.querySelector('.chart-toggles-merged').innerHTML = mergedHTML;\n }\n\n\n \/\/ Call for the creation of all Charts\n function createAllCharts(obj) {\n createAxisChart('x', obj);\n createAxisChart('y', obj);\n createAxisChart('z', obj);\n createMergedChart(obj);\n }\n\n\n \/\/ Perform the FFT recursively\n function fastFourierTransform(x) {\n const N = x.length;\n if (N <= 1) return x; \/\/ Base case, return if the size of the array is 1\n\n \/\/ Split the array into even and odd parts\n const even = fastFourierTransform(x.filter((_, index) => index % 2 === 0)); \/\/ Even index\n const odd = fastFourierTransform(x.filter((_, index) => index % 2 !== 0)); \/\/ Odd index\n\n const result = new Array(N);\n for (let k = 0; k < N \/ 2; k++) {\n const exp = Math.PI * 2 * k \/ N;\n const w = [Math.cos(exp), Math.sin(exp)]; \/\/ Complex number for the \"twiddle factor\"\n \n result[k] = [\n even[k][0] + w[0] * odd[k][0] - w[1] * odd[k][1], \/\/ Real part\n even[k][1] + w[0] * odd[k][1] + w[1] * odd[k][0] \/\/ Imaginary part\n ];\n \n result[k + N \/ 2] = [\n even[k][0] - w[0] * odd[k][0] + w[1] * odd[k][1], \/\/ Real part\n even[k][1] - w[0] * odd[k][1] - w[1] * odd[k][0] \/\/ Imaginary part\n ];\n }\n return result;\n }\n\n\n \/\/ Inverse FFT Implementation\n function inverseFastFourierTransform(input) {\n \/\/ Take the conjugate of the input (for inverse FFT)\n let conjugated = input.map(x => [x[0], -x[1]]);\n let result = fastFourierTransform(conjugated);\n\n \/\/ Take the conjugate again and normalize\n let normalized = result.map(x => [x[0] \/ input.length, x[1] \/ input.length]);\n\n return normalized;\n }\n\n\n \/\/ Helper function for FFT to zero pad the data to the next power of 2\n function zeroPad(arr, length) {\n let padded = arr.slice(); \/\/ Create a copy of the array\n while (padded.length < length) {\n padded.push(0);\n }\n return padded;\n }\n\n\n \/\/ Helper function for FFT to calculate the sum of squares\n function sumSquares(arr) {\n return arr.reduce((sum, val) => sum + val * val, 0);\n }\n\n\n \/\/ Pearson Modified Phase Invariant Cross-correlation function using FFT\n function fftCrossCorrelation(dataset1, dataset2) {\n let data1 = dataset1.data.map(d => d.y);\n let data2 = dataset2.data.map(d => d.y);\n\n if (data1.length === 0 || data2.length === 0) {\n console.error(\"Empty datasets\");\n return null;\n }\n\n \/\/ Zero padding to the next power of 2\n let N = Math.pow(2, Math.ceil(Math.log2(Math.max(1, data1.length * 2 - 1))));\n data1 = zeroPad([...data1], N);\n data2 = zeroPad([...data2], N);\n\n \/\/ Perform FFT on both datasets (convert real values to complex numbers)\n let X = data1.map(val => [val, 0]); \/\/ Real part, Imaginary part\n let Y = data2.map(val => [val, 0]);\n\n X = fastFourierTransform(X); \/\/ FFT of dataset 1\n Y = fastFourierTransform(Y); \/\/ FFT of dataset 2\n\n \/\/ Conjugate Y\n let conjugatedY = Y.map((val, i) => [val[0], -val[1]]);\n\n \/\/ Multiply X and conjugated Y (complex multiplication)\n let C = [];\n for (let i = 0; i < X.length; i++) {\n const realX = X[i][0];\n const imagX = X[i][1];\n const realY = conjugatedY[i][0];\n const imagY = conjugatedY[i][1];\n\n C.push([realX * realY - imagX * imagY, realX * imagY + imagX * realY]); \/\/ Complex multiplication\n }\n\n \/\/ Inverse FFT to get cross-correlation\n let crossCorrelation = inverseFastFourierTransform(C); \/\/ Apply inverse FFT to the cross-correlation\n\n \/\/ Calculate magnitudes of the result\n let magnitudes = crossCorrelation.map(val => Math.sqrt(val[0] * val[0] + val[1] * val[1]));\n\n \/\/ Find the maximum correlation\n let maxCorr = Math.max(...magnitudes);\n\n \/\/ Normalize by the product of the sum of squares of the data\n let normFactor = Math.sqrt(sumSquares(data1) * sumSquares(data2));\n\n return normFactor === 0 ? 0 : maxCorr \/ normFactor;\n }\n\n\n \/\/ Update Shifted (Modified Pearson \/ FFT) Correlation Label on Chart to display only selected Recordings\n function updateShiftedCorrelationLabel(chart, axis) {\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n const label = document.querySelector(`.shift-correlation-label[data-axis=\"${axis}\"]`);\n if (!label) return;\n\n label.style.display = 'block';\n\n if (visibleDatasets.length === 0) {\n label.textContent = `Shift Correlation: 0%`;\n } else if (visibleDatasets.length === 1) {\n label.textContent = `Shift Correlation: 100%`;\n } else {\n let correlationTotal = 0;\n let pairCount = 0;\n\n for (let i = 0; i < visibleDatasets.length - 1; i++) {\n for (let j = i + 1; j < visibleDatasets.length; j++) {\n\n const currentCorrelation = fftCrossCorrelation(visibleDatasets[i], visibleDatasets[j]);\n\n if (currentCorrelation !== null) {\n correlationTotal += currentCorrelation;\n pairCount++;\n }\n }\n }\n\n let correlation = pairCount === 0 ? null : correlationTotal \/ pairCount;\n label.textContent = `Shift Correlation: ${correlation ? (correlation * 100).toFixed(2) : 'N\/A'}%`;\n console.log(visibleDatasets); \/\/ Check if the datasets are properly filtered\n console.log(`Shift Correlation: ${correlationTotal}, pairCount: ${pairCount}`); \/\/ Debug correlation calculation\n }\n }\n\n\n \/\/ Pearson Correlation Formula\n function calculateShapeCorrelation(dataset1, dataset2) {\n try {\n const data1 = dataset1.data.map(d => d.y);\n const data2 = dataset2.data.map(d => d.y);\n const n = Math.min(data1.length, data2.length);\n \n if (n < 2) return null;\n \n const mean1 = data1.reduce((a, b) => a + b, 0) \/ n;\n const mean2 = data2.reduce((a, b) => a + b, 0) \/ n;\n \n let numerator = 0, denom1 = 0, denom2 = 0;\n for (let i = 0; i < n; i++) {\n const diff1 = data1[i] - mean1;\n const diff2 = data2[i] - mean2;\n numerator += diff1 * diff2;\n denom1 += diff1 ** 2;\n denom2 += diff2 ** 2;\n }\n \n const denominator = Math.sqrt(denom1 * denom2);\n const correlation = denominator === 0 ? null : numerator \/ denominator;\n \n console.log('Calculated Shape correlation:', correlation);\n return correlation;\n } catch (e) {\n console.error('Correlation Shape calculation error:', e);\n return null;\n }\n }\n\n\n \/\/ Update Shape (Pearson) Correlation Label on Chart to use only selected Recordings\n function updateShapeCorrelationLabel(chart, axis) {\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n const label = document.querySelector(`.shape-correlation-label[data-axis=\"${axis}\"]`);\n if (!label) return;\n\n if (visibleDatasets.length === 0) {\n label.style.display = 'block';\n label.textContent = `Shape Correlation: 0%`;\n } else if (visibleDatasets.length === 1) {\n label.style.display = 'block';\n label.textContent = `Shape Correlation: 100%`;\n } else {\n const visibleLength = visibleDatasets.length;\n let correlationTotal = 0;\n\n for (let i = 0; i < visibleLength - 1; i++) {\n for (let j = i + 1; j < visibleLength; j++) {\n correlationTotal += calculateShapeCorrelation(visibleDatasets[i], visibleDatasets[j]) || 0;\n }\n }\n\n const correlation = correlationTotal \/ (visibleLength * (visibleLength - 1) \/ 2);\n label.style.display = 'block';\n label.textContent = `Shape Correlation: ${(correlation * 100)?.toFixed(2)|| 'N\/A'}%`;\n }\n }\n\n\n \/\/ Update Table below charts to display only selected Recordings\n function updateTable(chartType, chart) {\n const tableContainer = document.getElementById(`${chartType}Table`);\n let html = '<table class=\"table table-bordered table-striped\"><thead><tr><th>Measurement Number<\/th>';\n\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n \/\/ Create table headers\n visibleDatasets.forEach(ds => {\n html += `<th>${ds.label}<\/th>`;\n });\n html += '<\/tr><\/thead><tbody>';\n\n \/\/ Find maximum data length\n const maxLength = Math.max(...visibleDatasets.map(ds => ds.data.length));\n \n \/\/ Create table rows\n for (let i = 0; i < maxLength; i++) {\n html += `<tr><td>${i + 1}<\/td>`;\n visibleDatasets.forEach(ds => {\n const value = ds.data[i] ? ds.data[i].y.toFixed(2) : '';\n html += `<td>${value}<\/td>`;\n });\n html += '<\/tr>';\n }\n \n html += '<\/tbody><\/table>';\n tableContainer.innerHTML = html;\n }\n\n\n \/\/ Define settings of the charts \n \/\/ - Allows for clicking the visibility of Recordings on the legend to update the table and correlations\n function getChartOptions(axis) {\n return {\n responsive: true,\n maintainAspectRatio: false,\n animation: false,\n scales: {\n x: {\n type: 'linear',\n title: { display: true, text: 'Measurement Number' },\n ticks: { stepSize: 1 }\n },\n y: { title: { display: true, text: 'Acceleration (mg)' } }\n },\n plugins: {\n legend: {\n onClick: function(evt, legendItem, legend) {\n const chart = legend.chart;\n const meta = chart.getDatasetMeta(legendItem.datasetIndex);\n meta.hidden = !meta.hidden;\n\n chart.update();\n if (axis !== true) {\n updateShiftedCorrelationLabel(chart, axis);\n updateShapeCorrelationLabel(chart, axis); \/\/ Only for axis charts\n }\n updateTable(axis === true ? 'merged' : axis, chart); \/\/ Update table for both axis and merged charts\n return false;\n }\n }\n }\n };\n }\n\n\n \/\/ Create the charts for x, y and z axes\n function createAxisChart(axis, obj) {\n const canvas = document.getElementById(`${axis}Chart`);\n destroyChart(axis); \/\/ Destroy previous chart before creating a new one\n\n const datasets = obj.recordings.map((rec, i) => ({\n label: `Recording ${i + 1}`,\n data: rec.data[axis].map((v, idx) => ({ x: idx + 1, y: v })),\n borderColor: colors[i % colors.length],\n tension: 0.1,\n hidden: false\n }));\n\n currentCharts[axis] = new Chart(canvas, {\n type: 'line',\n data: { datasets },\n options: getChartOptions(axis)\n });\n\n updateTable(axis, currentCharts[axis]);\n updateShiftedCorrelationLabel(currentCharts[axis], axis);\n updateShapeCorrelationLabel(currentCharts[axis], axis);\n }\n\n\n \/\/ Create the merged values chart\n function createMergedChart(obj) {\n const canvas = document.getElementById('mergedChart');\n destroyChart('merged');\n\n const selectElement = document.querySelector('.merged-select');\n if (!selectElement) return;\n\n const selectedRecordingId = selectElement.value;\n const recording = obj.recordings.find(r => r.ID === parseInt(selectedRecordingId));\n\n if (!recording) return; \/\/ Prevent errors if no valid selection\n\n const datasets = ['x', 'y', 'z'].map((axis, i) => ({\n label: `${axis.toUpperCase()} Values`,\n data: recording.data[axis].map((v, idx) => ({ x: idx + 1, y: v })),\n borderColor: colors[i],\n tension: 0.1,\n fill: false\n }));\n\n currentCharts.merged = new Chart(canvas, {\n type: 'line',\n data: { datasets },\n options: getChartOptions(true)\n });\n\n updateTable('merged', currentCharts.merged);\n }\n\n\n \/\/ Destroy the exisiting chart upon creation of a new chart (i.e. when switching between Actions)\n function destroyChart(axis) {\n if (currentCharts[axis]) {\n currentCharts[axis].destroy();\n currentCharts[axis] = null;\n }\n }\n\n\n \/\/ Listener for switching between Recordings on Merged Values chart\n document.addEventListener('change', function(e) {\n if (e.target.classList.contains('merged-select')) {\n const obj = jsonData.find(item => item.ID === currentObjectId);\n if (obj) createMergedChart(obj);\n }\n });\n\n\n \/\/ Listener for toggling Table on each charts\n document.addEventListener('click', function(e) {\n if (e.target.classList.contains('toggle-table')) {\n const chartType = e.target.getAttribute('data-chart');\n const table = document.getElementById(`${chartType}Table`);\n table.style.display = table.style.display === 'none' ? 'block' : 'none';\n }\n });\n<\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the … <a href=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" class=\"more-link\">Mwy<\/a><\/p>","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-4.php","meta":{"footnotes":""},"class_list":["post-14699","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"\n<title>Micro:bit Data Analyser - Technocamps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro:bit Data Analyser - Technocamps\" \/>\n<meta property=\"og:description\" content=\"JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the ... Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" \/>\n<meta property=\"og:site_name\" content=\"Technocamps\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Technocamps\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-03T16:37:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Technocamps\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 munud\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\",\"url\":\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\",\"name\":\"Micro:bit Data Analyser - Technocamps\",\"isPartOf\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#website\"},\"datePublished\":\"2025-03-03T16:05:44+00:00\",\"dateModified\":\"2025-03-03T16:37:44+00:00\",\"inLanguage\":\"cy\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#website\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"name\":\"Technocamps\",\"description\":\"Technocamps, Inspiring computational thinking\",\"publisher\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.technocamps.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cy\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\",\"name\":\"Technocamps\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cy\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png\",\"contentUrl\":\"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png\",\"width\":2136,\"height\":2136,\"caption\":\"Technocamps\"},\"image\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Technocamps\/\",\"https:\/\/x.com\/Technocamps\",\"https:\/\/www.linkedin.com\/company\/technocamps\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Micro:bit Data Analyser - Technocamps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/","og_locale":"en_US","og_type":"article","og_title":"Micro:bit Data Analyser - Technocamps","og_description":"JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the ... Read More","og_url":"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/","og_site_name":"Technocamps","article_publisher":"https:\/\/www.facebook.com\/Technocamps\/","article_modified_time":"2025-03-03T16:37:44+00:00","twitter_card":"summary_large_image","twitter_site":"@Technocamps","twitter_misc":{"Est. reading time":"14 munud"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/","url":"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/","name":"Micro:bit Data Analyser - Technocamps","isPartOf":{"@id":"https:\/\/www.technocamps.com\/en\/#website"},"datePublished":"2025-03-03T16:05:44+00:00","dateModified":"2025-03-03T16:37:44+00:00","inLanguage":"cy","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.technocamps.com\/en\/#website","url":"https:\/\/www.technocamps.com\/en\/","name":"Technocamps","description":"Technocamps, Inspiring computational thinking","publisher":{"@id":"https:\/\/www.technocamps.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.technocamps.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cy"},{"@type":"Organization","@id":"https:\/\/www.technocamps.com\/en\/#organization","name":"Technocamps","url":"https:\/\/www.technocamps.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"cy","@id":"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png","contentUrl":"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png","width":2136,"height":2136,"caption":"Technocamps"},"image":{"@id":"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Technocamps\/","https:\/\/x.com\/Technocamps","https:\/\/www.linkedin.com\/company\/technocamps\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/comments?post=14699"}],"version-history":[{"count":6,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699\/revisions"}],"predecessor-version":[{"id":14710,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699\/revisions\/14710"}],"wp:attachment":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/media?parent=14699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n JSON Data Visualization<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<\/head>\n<body>\n<div class=\"container mt-4\" style=\"min-width:850px; max-width: 2000px;\">\n <center>\n\n \n <div class=\"row mb-3 d-flex justify-content-end\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-2 d-flex justify-content-center\">\n <div class=\"row mb-3 d-flex\" style=\"background: white; position: relative; padding: 5px 10px 0px 6px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <div class=\"col-8 d-flex justify-content-start\" style=\"padding: 2px 0px 0px 4px;\">\n <a href=\"https:\/\/forms.gle\/T6tpnZmhXKUHx84U8\" style=\"text-decoration: none;\">\n <h2 style=\"font-family: verdana; font-size: 90%; color: blue; text-align: right;\">Adborth!<\/h2>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"row mb-3 justify-content-between\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-3\">\n <a href=\"https:\/\/www.technocamps.com\/cy\/\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/technocamps.png\" alt=\"Technocamps Logo and link to technocamps.com\" class=\"img-fluid d-block m-auto\" style=\"max-height: 55px;\">\n <\/a>\n <\/div>\n <div class=\"col-6\">\n <h1 style=\"font-family: courier new; font-size: 200%; color: black; text-align: center;\">micro:bit ML a CreateAI<br>Offeryn Dadansoddi Data<\/h1>\n <\/div>\n <div class=\"col-3\">\n <a href=\"https:\/\/microbit.org\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit-1.png\" alt=\"microbit Logo and link to microbit.org\" class=\"img-fluid d-block m-auto\" style=\"max-height: 55px;\">\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"row mb-3\" style=\"min-width:800px; max-width: 1500px;\">\n <div class=\"col-6\">\n <input type=\"file\" id=\"jsonFile\" class=\"form-control\" accept=\".json\">\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleLearnerHelp()\">Cymorth i Ddysgwyr<\/button>\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleTeacherHelp()\">Cymorth i Athrawon<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"learnerHelpSection\" class=\"mt-3\" style=\"display: none; text-align: left;\">\n <div class=\"border p-3 rounded mx-auto d-flex align-items-center\" style=\"min-width:800px; max-width: 1000px; background-color: #f8f9fa;\">\n <div class=\"row g-3 w-100\">\n\n \n <div class=\"col-md-3 border-end pe-3\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit_axes.png\" alt=\"Diagram demonstrating the x, y and z axes on a micro:bit\" class=\"img-fluid\" style=\"max-height: 300px;\">\n <\/div>\n\n \n <div class=\"col-md-9 ps-3 d-flex align-items-center\">\n <div class=\"accordion w-100\" id=\"learnerHelpAccordion\">\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#uploadData\" \n aria-expanded=\"false\" \n aria-controls=\"uploadData\">\n <b>Lanlwytho Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"uploadData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Cliciwch <i>Dewis Ffeil<\/i> a dewiswch y ffeil hoffech lanlwytho\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r ffeil cael ei lawrlwytho o naill ai'r <i>Offeryn micro:bit Machine Learning<\/i> \n neu gwefan <i>micro:bit CreateAI<\/i> a rhaid ei bod hi'n <i>ffeil<\/i> JSON!\n <\/li>\n <li class=\"mb-3\">\n Gallwch lawrlwytho hwn ar y gwefannau hyn trwy glicio ar y botwm dewislen (tri dot) a chlicio \n <i>Download all data samples<\/i>.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingSite\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingSite\">\n <b>Defnyddio'r Wefan Hon<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingSite\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Pan fyddwch chi'n agor ffeil, mae'r gweithredoedd a gofnodwyd gennych yn ymddangos fel botymau.\n <\/li>\n <li class=\"mb-3\">\n Pan fyddwch yn clicio ar unrhyw weithred, bydd 4 graff yn ymddangos:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r 3 graff cyntaf yn dangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o'r Recordiadau. Gallwch ddefnyddio'r rhain i benderfynu pa mor debyg yw eich Recordiadau!\n <\/li>\n <li class=\"mb-2\">\n Mae'r graff olaf yn dangos y cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o un Recordiad ar y tro. Mae gwymplen yn gadael i chi ddewis pa Recordiad i ymchwilio iddo.\n <\/li>\n <\/ul>\n <\/li> \n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingGraphs\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingGraphs\">\n <b>Eich Graffiau<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingGraphs\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <p>Mae gan bob un o'ch graffiau isod yr offer hyn:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Bydd clicio ar y Recordiadau ar frig pob graff yn gwneud iddynt ymddangos a diflannu. Gallwch ddefnyddio hwn i helpu i ganfod pa Recordiadau sy'n debyg.\n <\/li>\n <li class=\"mb-3\">\n Mae'r tri graff cyntaf (<i>x<\/i>, <i>y<\/i> a <i>z<\/i>) yn arddangos y <b>cydberthynas<\/b> o'r Recordiadau - mae hyn yn golygu pa mor debyg ydyn nhw. Wrth i chi wneud i'ch Recordiadau ymddangos\/diflannu bydd y rhifau hyn yn newid i ddangos y gydberthynas ar gyfer y Recordiadau y gallwch eu gweld! Mae hyn yn ddefnyddiol ar gyfer canfod pa Recordiadau sy'n debyg.\n <\/li>\n <li class=\"mb-3\">\n Bydd clicio <b>Toglo'r Tabl<\/b> yn gwneud i'r tabl o dan y graff ymddangos a diflannu. \n <\/li>\n <li class=\"mb-3\">\n Bydd hofran dros unrhyw bwynt yn dweud wrthych ei werth.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#understandingData\" \n aria-expanded=\"false\" \n aria-controls=\"understandingData\">\n <b>Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"understandingData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#learnerHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Mae eich model Dysgu Peirianyddol yn gweithio trwy ddod o hyd i batrymau yn eich Recordiadau - <b>ond mae hyn yn anodd!<\/b>\n <\/li>\n <li class=\"mb-3\">\n I ddod o hyd i batrymau mae angen i'ch Recordiadau fod <b>yn debyg<\/b>. Os yw'ch holl Recordiadau'n edrych yn wahanol iawn, yna bydd yn anodd iawn i'ch model ddod o hyd i batrymau (bydd yn dal i geisio dyfalu yn wael!). \n <\/li>\n <li class=\"mb-3\">\n <i>Ond<\/i>, os yw eich holl Recordiadau yr un peth yna does dim patrymau!\n <\/li>\n <li class=\"mb-3\">\n Mae hyn yn gwneud pethau'n anodd! Gall yr offeryn hwn eich helpu i ddadansoddi a gall eich helpu i wella eich model Dysgu Peirianyddol.\n <\/li>\n <li class=\"mb-3\">\n Mae'r graffiau yn ffordd dda o wirio a yw eich Recordiadau yn debyg gyda'ch llygaid. Os ydyn nhw'n edrych yn debyg yna mae'ch data'n dda. Os ydynt yn edrych yn wahanol iawn yna mae eich data <i>efallai<\/i> yn wael.\n <\/li>\n <li class=\"mb-3\">\n Mae'r cydberthnasau yn ffordd dda o wirio a yw eich Recordiadau yn debyg gyda <b>mathemateg!<\/b> <i>Cydberthynas<\/i> yn golygu pa mor debyg yw pethau - mae gan eich graffiau ddau gydberthynas:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Si\u00e2p<\/i><\/b> yn dweud wrthych pa mor debyg yw si\u00e2p eich Recordiadau - mewn geiriau eraill pa mor dda mae'r llinellau'n cyfateb. Os yw eich llinellau yr un fath bydd ganddynt <i>100%<\/i> gydberthynas, os yw eich llinellau yn hollol i'r gwrthwyneb bydd ganddynt <i>-100%<\/i> gydberthynas.\n <\/li>\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Syfliad<\/i><\/b> yn dweud wrthych pa mor debyg fyddai eich Recordiadau pe baent yn cael eu symud i'r chwith neu'r dde - mewn geiriau eraill pe baech yn eu gosod yn eu trefn orau ag y gallech. <b>Byddwch yn ofalus<\/b> gan nad yw'r gydberthynas hon yn poeni am si\u00e2p, felly gall y nifer fod yn uchel iawn hyd yn oed os nad yw'r Recordiadau yn edrych yn debyg iawn!\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"teacherHelpSection\" class=\"mt-3\" style=\"display: none; text-align: left;\">\n <div class=\"border p-3 rounded mx-auto d-flex align-items-center\" style=\"min-width: 800px; max-width: 1000px; background-color: #f8f9fa;\">\n <div class=\"row g-3 w-100\">\n\n \n <div class=\"col-md-3 border-end pe-3\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/microbit_axes.png\" alt=\"Diagram demonstrating the x, y and z axes on a micro:bit\" class=\"img-fluid\" style=\"max-height: 300px;\">\n <\/div>\n\n \n <div class=\"col-md-9 ps-3 d-flex align-items-center\">\n <div class=\"accordion w-100\" id=\"teacherHelpAccordion\">\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#uploadData\" \n aria-expanded=\"false\" \n aria-controls=\"uploadData\">\n <b>Lanlwytho Eich Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"uploadData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Cliciwch <b>Dewis Ffeil<\/b> a dewiswch y ffeil hoffech lanlwytho\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r ffeil cael ei lawrlwytho o naill ai'r <i>Offeryn micro:bit Machine Learning<\/i> \n neu gwefan <i>micro:bit CreateAI<\/i> a bod yn <b>ffeil<\/b> JSON!\n <\/li>\n <li class=\"mb-3\">\n Gallwch lawrlwytho hwn ar y gwefannau hyn trwy glicio ar y botwm dewislen (tri dot) a chlicio \n <i>Download all data samples<\/i>.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingSite\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingSite\">\n <b>Llywio'r Tudalen Hon<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingSite\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Pan agorir JSON, bydd pob un o'r gweithredoedd a gofnodwyd gan ddefnyddio'r offer Machine Learning neu CreateAI yn ymddangos fel botymau. Dangosir pob gweithred fel tab ar wah\u00e2n - h.y. ni ellir cymharu'r gweithredoedd \u00e2'r naill a'r llall.\n <\/li>\n <li class=\"mb-3\">\n Ar gyfer pob gweithred, bydd 4 graff yn ymddangos:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r 3 graff cyntaf yn dangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> yr holl Recordiadau - gellir defnyddio'r rhain i bennu cysondeb pob Recordiad, ac a yw unrhyw rai yn dra gwahanol. Dangosir system gyfesurynnol y micro:bit ar y chwith.\n <\/li>\n <li class=\"mb-2\">\n Mae'r graff olaf yn arddangos cyfesurynnau <i>x<\/i>, <i>y<\/i> a <i>z<\/i> o un Recordio ar y tro. Mae cwymplen yn eich galluogi i ddewis pa Recordiad i ymchwilio iddo.\n <\/li>\n <\/ul>\n <\/li> \n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#navigatingGraphs\" \n aria-expanded=\"false\" \n aria-controls=\"navigatingGraphs\">\n <b>Llywio'r Graffiau<\/b>\n <\/button>\n <\/h2>\n <div id=\"navigatingGraphs\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <p>Gellir ymchwilio i bob graff isod gan ddefnyddio\u2019r canlynol:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Bydd clicio ar bob Recordiad\/Echel <i>yn yr allwedd<\/i> o bob graff yn <b>toglo ei welededd<\/b> Gellir defnyddio hwn i helpu i ganfod pa Recordiadau sy'n gyson a pha rai sy'n allanolion.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <i>tri graff cyntaf<\/i> yn dangos <b>cydberthynas<\/b> y data. Dyma yw pa mor agos mae pob un o'r Recordiadau (ar gyfer y cyfesuryn penodol) yn cyfateb. Darperir hyn fel canran ar gyfer dealladwyedd. Bydd cyfuno gwelededd Recordiadau yn newid y gydberthynas i adlewyrchu'r data a ddewiswyd. Gall hyn hefyd helpu i ddod o hyd i allanolion.\n <\/li>\n <li class=\"mb-3\">\n Bydd clicio <b>Toglo'r Tabl<\/b> yn toglo'r tabl sy'n cynnwys gwerthoedd pob pwynt data o bob Recordiad\/Echelin gweladwy.\n <\/li>\n <li class=\"mb-3\">\n <b>Bydd Hofran<\/b> dros unrhyw bwynt yn dweud wrthych ei werth.\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\">\n <button class=\"accordion-button collapsed\" type=\"button\" \n data-bs-toggle=\"collapse\" \n data-bs-target=\"#understandingData\" \n aria-expanded=\"false\" \n aria-controls=\"understandingData\">\n <b>Deall y Data<\/b>\n <\/button>\n <\/h2>\n <div id=\"understandingData\" class=\"accordion-collapse collapse\" \n data-bs-parent=\"#teacherHelpAccordion\">\n <div class=\"accordion-body\">\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Er mwyn i Dysgu Peirianyddol weithio, rhaid i batrymau fod yn bresennol yn y data, ond <b>nid yw hon yn wyddoniaeth fanwl gywir!<\/b>\n <\/li>\n <li class=\"mb-3\">\n Bydd rhaid i'r data a gofnodwyd ar gyfer pob gweithred <i>fod yn weddol tebyg<\/i> er mwyn i batrymau cael eu canfod - os yw'r Recordiadau ar gyfer gweithred yn dra gwahanol yna bydd yn anodd iawn i'r model ddod o hyd i unrhyw batrymau realistig (er y bydd yn dal i geisio gan dychwelyd canlyniadau annisgwyl!). \n <\/li>\n <li class=\"mb-3\">\n <i>Fodd bynnag<\/i>, pe bai'r holl Recordiadau ar gyfer gweithred yn union yr un fath yna ni fyddai unrhyw batrymau i'w gweld (gan mai dim ond yr union batrwm hwnnw fyddai'n cael ei gofrestru fel y weithred honno).\n <\/li>\n <li class=\"mb-3\">\n Mae hwn yn gydbwysedd bregus, a gall yr offer ar y dudalen hon helpu i ddadansoddi eich Recordiadau a gall helpu i wella effeithiolrwydd eich modelau Dysgu Peirianyddol.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <b>graffiau<\/b> yn rhoi arwydd gweledol da i weld a yw data yn debyg. Os yw'r cromliniau'n edrych yn debyg yna mae'r data'n dda. Os oes patrymau hollol wahanol, yna mae'r data <i>yn debygol<\/i> yn wael.\n <\/li>\n <li class=\"mb-3\">\n Mae'r <b>cydberthynas<\/b> hefyd yn gallu rhoi arwydd mathemategol da i weld a yw data yn debyg. Rhoddir dau fesur o gydberthynas:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Si\u00e2p<\/i><\/b> yn diffinio pa mor dda y mae pob un o\u2019r Recordiadau yn cyfateb ar sail eu si\u00e2p (h.y. pa mor dda mae\u2019r llinellau\u2019n cyfateb). Bydd gan linellau sy'n cyfateb yn berffaith <i>100%<\/i> gydberthynas, bydd gan llinellau sy'n hollol i'r gwrthwyneb <i>-100%<\/i> gydberthynas. Nodwch <b>nad yw hwn yn<\/b> cymryd unrhyw atred (ar hyd yr echelin-x) i ystyriaeth, ac felly bydd yn rhoi gwerthoedd cydberthyniad isel i Recordiadau sy'n cael eu gwrthbwyso oddi wrth ei gilydd, ond sydd \u00e2 si\u00e2p union yr un fath. Mae hyn yn defnyddio'r <i>Cydberthynas Pearson<\/i>.\n <\/li>\n <li class=\"mb-2\">\n Mae'r <b><i>Cydberthynas Syfliad<\/i><\/b> yn diffinio pa mor dda y byddai pob un o'r Recordiadau yn cyfateb pe baent yn cael eu symud (gwrthbwyso) i'w haliniad gorau posibl. Mae hyn yn bychanu pwysigrwydd si\u00e2p (trwy gydberthyn yn \u00f4l amlder) a <i>dylai ei gymryd gyda gronyn o halen<\/i> (gan y gall gwerthoedd fod yn gamarweiniol o uchel). Mae hyn yn defnyddio'r <i>Cydberthynas Pearson Addasedig (Cyfnod Sefydlog)<\/i>.\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <center>\n <div id=\"objectList\" class=\"mt-3\" style=\"min-width:800px; max-width: 800px;\"><\/div>\n <\/center>\n \n \n <div id=\"charts\" class=\"container mt-4\" style=\"display: none; min-width: 800px; max-width: 2000px;\">\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-X<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"x\" style=\"background: white; position: relative; text-align: center; vertical-align: middle; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"x\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"x\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"xChart\"><\/canvas>\n <\/div>\n <div id=\"xTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-Y<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"y\" style=\"background: white; position: relative; text-align: center; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"y\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"y\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"yChart\"><\/canvas>\n <\/div>\n <div id=\"yTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-3 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd-Z<\/b><\/h2>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <div class=\"shape-correlation-label position-relative\" data-axis=\"z\" style=\"background: white; position: relative; text-align: center; max-width: 220px; min-width: 220px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shape Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-start\">\n <div class=\"shift-correlation-label position-relative\" data-axis=\"z\" style=\"background: white; position: relative; text-align: center; max-width: 210px; min-width: 210px; padding: 5px 5px 0px 5px; border-radius: 4px; border: 1px solid #dee2e6;\">\n Shift Correlation: 0.00%\n <\/div>\n <\/div>\n <div class=\"col-3 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"z\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div style=\"height: 400px;\">\n <canvas id=\"zChart\"><\/canvas>\n <\/div>\n <div id=\"zTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mb-3\" style=\"min-width: 800px; max-width: 2000px;\">\n <div class=\"card-header position-relative\">\n <div class=\"row\">\n <div class=\"col-6 d-flex justify-content-start\">\n <h2 style=\"font-size:120%; padding: 7px 5px 0px 5px\"><b>Gwerthoedd Cyfun<\/b><\/h2>\n <\/div>\n <div class=\"col-6 d-flex justify-content-end\">\n <button class=\"btn btn-sm btn-secondary toggle-table float-end\" data-chart=\"merged\">Toglo'r Tabl<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"chart-toggles-merged\"><\/div>\n <div style=\"height: 400px;\">\n <canvas id=\"mergedChart\"><\/canvas>\n <\/div>\n <div id=\"mergedTable\" class=\"chart-table mt-3\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/center>\n<\/div>\n\n\n<script>\n let jsonData = [];\n let currentCharts = { x: null, y: null, z: null, merged: null };\n let currentObjectId = null;\n const colors = ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff', '#ff9f40'];\n\n\n \/\/ Listen to Choose File Button and Load File\n document.getElementById('jsonFile').addEventListener('change', function(e) {\n const file = e.target.files[0];\n const reader = new FileReader();\n \n reader.onload = function(event) {\n jsonData = JSON.parse(event.target.result);\n renderObjectList();\n };\n \n reader.readAsText(file);\n });\n\n\n \/\/ Toggle the Learner Help Section visibility upon clicking Help Button\n function toggleLearnerHelp() {\n const learnerHelpSection = document.getElementById('learnerHelpSection');\n const teacherHelpSection = document.getElementById('teacherHelpSection');\n learnerHelpSection.style.display = learnerHelpSection.style.display === 'none' ? 'block' : 'none';\n teacherHelpSection.style.display = teacherHelpSection.style.display === 'block' ? 'none' : 'none';\n }\n\n\n \/\/ Toggle the Teacher Help Section visibility upon clicking Help Button\n function toggleTeacherHelp() {\n const teacherHelpSection = document.getElementById('teacherHelpSection');\n const learnerHelpSection = document.getElementById('learnerHelpSection');\n teacherHelpSection.style.display = teacherHelpSection.style.display === 'none' ? 'block' : 'none';\n learnerHelpSection.style.display = learnerHelpSection.style.display === 'block' ? 'none' : 'none';\n }\n\n\n \/\/ Create List of Actions Recorded in ML\n function renderObjectList() {\n const container = document.getElementById('objectList');\n container.innerHTML = jsonData.map(obj => `\n <button class=\"btn btn-primary w-100 mb-2\" \n onclick=\"showCharts(${obj.ID})\">\n ${obj.name}\n <\/button>\n `).join('');\n }\n\n\n \/\/ On Action Chosen Show All Charts\n function showCharts(objectId) {\n currentObjectId = objectId;\n const obj = jsonData.find(item => item.ID === objectId);\n document.getElementById('charts').style.display = 'block';\n renderRecordingDropdown(obj.recordings);\n createAllCharts(obj);\n }\n\n\n \/\/ Create Dropdown for Megred Chart\n function renderRecordingDropdown(recordings) {\n const mergedHTML = `\n <select class=\"form-select merged-select\">\n ${recordings.map((rec, i) => `\n <option value=\"${rec.ID}\">Recording ${i + 1}<\/option>\n `).join('')}\n <\/select>\n `;\n document.querySelector('.chart-toggles-merged').innerHTML = mergedHTML;\n }\n\n\n \/\/ Call for the creation of all Charts\n function createAllCharts(obj) {\n createAxisChart('x', obj);\n createAxisChart('y', obj);\n createAxisChart('z', obj);\n createMergedChart(obj);\n }\n\n\n \/\/ Perform the FFT recursively\n function fastFourierTransform(x) {\n const N = x.length;\n if (N <= 1) return x; \/\/ Base case, return if the size of the array is 1\n\n \/\/ Split the array into even and odd parts\n const even = fastFourierTransform(x.filter((_, index) => index % 2 === 0)); \/\/ Even index\n const odd = fastFourierTransform(x.filter((_, index) => index % 2 !== 0)); \/\/ Odd index\n\n const result = new Array(N);\n for (let k = 0; k < N \/ 2; k++) {\n const exp = Math.PI * 2 * k \/ N;\n const w = [Math.cos(exp), Math.sin(exp)]; \/\/ Complex number for the \"twiddle factor\"\n \n result[k] = [\n even[k][0] + w[0] * odd[k][0] - w[1] * odd[k][1], \/\/ Real part\n even[k][1] + w[0] * odd[k][1] + w[1] * odd[k][0] \/\/ Imaginary part\n ];\n \n result[k + N \/ 2] = [\n even[k][0] - w[0] * odd[k][0] + w[1] * odd[k][1], \/\/ Real part\n even[k][1] - w[0] * odd[k][1] - w[1] * odd[k][0] \/\/ Imaginary part\n ];\n }\n return result;\n }\n\n\n \/\/ Inverse FFT Implementation\n function inverseFastFourierTransform(input) {\n \/\/ Take the conjugate of the input (for inverse FFT)\n let conjugated = input.map(x => [x[0], -x[1]]);\n let result = fastFourierTransform(conjugated);\n\n \/\/ Take the conjugate again and normalize\n let normalized = result.map(x => [x[0] \/ input.length, x[1] \/ input.length]);\n\n return normalized;\n }\n\n\n \/\/ Helper function for FFT to zero pad the data to the next power of 2\n function zeroPad(arr, length) {\n let padded = arr.slice(); \/\/ Create a copy of the array\n while (padded.length < length) {\n padded.push(0);\n }\n return padded;\n }\n\n\n \/\/ Helper function for FFT to calculate the sum of squares\n function sumSquares(arr) {\n return arr.reduce((sum, val) => sum + val * val, 0);\n }\n\n\n \/\/ Pearson Modified Phase Invariant Cross-correlation function using FFT\n function fftCrossCorrelation(dataset1, dataset2) {\n let data1 = dataset1.data.map(d => d.y);\n let data2 = dataset2.data.map(d => d.y);\n\n if (data1.length === 0 || data2.length === 0) {\n console.error(\"Empty datasets\");\n return null;\n }\n\n \/\/ Zero padding to the next power of 2\n let N = Math.pow(2, Math.ceil(Math.log2(Math.max(1, data1.length * 2 - 1))));\n data1 = zeroPad([...data1], N);\n data2 = zeroPad([...data2], N);\n\n \/\/ Perform FFT on both datasets (convert real values to complex numbers)\n let X = data1.map(val => [val, 0]); \/\/ Real part, Imaginary part\n let Y = data2.map(val => [val, 0]);\n\n X = fastFourierTransform(X); \/\/ FFT of dataset 1\n Y = fastFourierTransform(Y); \/\/ FFT of dataset 2\n\n \/\/ Conjugate Y\n let conjugatedY = Y.map((val, i) => [val[0], -val[1]]);\n\n \/\/ Multiply X and conjugated Y (complex multiplication)\n let C = [];\n for (let i = 0; i < X.length; i++) {\n const realX = X[i][0];\n const imagX = X[i][1];\n const realY = conjugatedY[i][0];\n const imagY = conjugatedY[i][1];\n\n C.push([realX * realY - imagX * imagY, realX * imagY + imagX * realY]); \/\/ Complex multiplication\n }\n\n \/\/ Inverse FFT to get cross-correlation\n let crossCorrelation = inverseFastFourierTransform(C); \/\/ Apply inverse FFT to the cross-correlation\n\n \/\/ Calculate magnitudes of the result\n let magnitudes = crossCorrelation.map(val => Math.sqrt(val[0] * val[0] + val[1] * val[1]));\n\n \/\/ Find the maximum correlation\n let maxCorr = Math.max(...magnitudes);\n\n \/\/ Normalize by the product of the sum of squares of the data\n let normFactor = Math.sqrt(sumSquares(data1) * sumSquares(data2));\n\n return normFactor === 0 ? 0 : maxCorr \/ normFactor;\n }\n\n\n \/\/ Update Shifted (Modified Pearson \/ FFT) Correlation Label on Chart to display only selected Recordings\n function updateShiftedCorrelationLabel(chart, axis) {\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n const label = document.querySelector(`.shift-correlation-label[data-axis=\"${axis}\"]`);\n if (!label) return;\n\n label.style.display = 'block';\n\n if (visibleDatasets.length === 0) {\n label.textContent = `Shift Correlation: 0%`;\n } else if (visibleDatasets.length === 1) {\n label.textContent = `Shift Correlation: 100%`;\n } else {\n let correlationTotal = 0;\n let pairCount = 0;\n\n for (let i = 0; i < visibleDatasets.length - 1; i++) {\n for (let j = i + 1; j < visibleDatasets.length; j++) {\n\n const currentCorrelation = fftCrossCorrelation(visibleDatasets[i], visibleDatasets[j]);\n\n if (currentCorrelation !== null) {\n correlationTotal += currentCorrelation;\n pairCount++;\n }\n }\n }\n\n let correlation = pairCount === 0 ? null : correlationTotal \/ pairCount;\n label.textContent = `Shift Correlation: ${correlation ? (correlation * 100).toFixed(2) : 'N\/A'}%`;\n console.log(visibleDatasets); \/\/ Check if the datasets are properly filtered\n console.log(`Shift Correlation: ${correlationTotal}, pairCount: ${pairCount}`); \/\/ Debug correlation calculation\n }\n }\n\n\n \/\/ Pearson Correlation Formula\n function calculateShapeCorrelation(dataset1, dataset2) {\n try {\n const data1 = dataset1.data.map(d => d.y);\n const data2 = dataset2.data.map(d => d.y);\n const n = Math.min(data1.length, data2.length);\n \n if (n < 2) return null;\n \n const mean1 = data1.reduce((a, b) => a + b, 0) \/ n;\n const mean2 = data2.reduce((a, b) => a + b, 0) \/ n;\n \n let numerator = 0, denom1 = 0, denom2 = 0;\n for (let i = 0; i < n; i++) {\n const diff1 = data1[i] - mean1;\n const diff2 = data2[i] - mean2;\n numerator += diff1 * diff2;\n denom1 += diff1 ** 2;\n denom2 += diff2 ** 2;\n }\n \n const denominator = Math.sqrt(denom1 * denom2);\n const correlation = denominator === 0 ? null : numerator \/ denominator;\n \n console.log('Calculated Shape correlation:', correlation);\n return correlation;\n } catch (e) {\n console.error('Correlation Shape calculation error:', e);\n return null;\n }\n }\n\n\n \/\/ Update Shape (Pearson) Correlation Label on Chart to use only selected Recordings\n function updateShapeCorrelationLabel(chart, axis) {\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n const label = document.querySelector(`.shape-correlation-label[data-axis=\"${axis}\"]`);\n if (!label) return;\n\n if (visibleDatasets.length === 0) {\n label.style.display = 'block';\n label.textContent = `Shape Correlation: 0%`;\n } else if (visibleDatasets.length === 1) {\n label.style.display = 'block';\n label.textContent = `Shape Correlation: 100%`;\n } else {\n const visibleLength = visibleDatasets.length;\n let correlationTotal = 0;\n\n for (let i = 0; i < visibleLength - 1; i++) {\n for (let j = i + 1; j < visibleLength; j++) {\n correlationTotal += calculateShapeCorrelation(visibleDatasets[i], visibleDatasets[j]) || 0;\n }\n }\n\n const correlation = correlationTotal \/ (visibleLength * (visibleLength - 1) \/ 2);\n label.style.display = 'block';\n label.textContent = `Shape Correlation: ${(correlation * 100)?.toFixed(2)|| 'N\/A'}%`;\n }\n }\n\n\n \/\/ Update Table below charts to display only selected Recordings\n function updateTable(chartType, chart) {\n const tableContainer = document.getElementById(`${chartType}Table`);\n let html = '<table class=\"table table-bordered table-striped\"><thead><tr><th>Measurement Number<\/th>';\n\n const visibleDatasets = chart.data.datasets\n .filter((_, i) => !chart.getDatasetMeta(i).hidden);\n \n \/\/ Create table headers\n visibleDatasets.forEach(ds => {\n html += `<th>${ds.label}<\/th>`;\n });\n html += '<\/tr><\/thead><tbody>';\n\n \/\/ Find maximum data length\n const maxLength = Math.max(...visibleDatasets.map(ds => ds.data.length));\n \n \/\/ Create table rows\n for (let i = 0; i < maxLength; i++) {\n html += `<tr><td>${i + 1}<\/td>`;\n visibleDatasets.forEach(ds => {\n const value = ds.data[i] ? ds.data[i].y.toFixed(2) : '';\n html += `<td>${value}<\/td>`;\n });\n html += '<\/tr>';\n }\n \n html += '<\/tbody><\/table>';\n tableContainer.innerHTML = html;\n }\n\n\n \/\/ Define settings of the charts \n \/\/ - Allows for clicking the visibility of Recordings on the legend to update the table and correlations\n function getChartOptions(axis) {\n return {\n responsive: true,\n maintainAspectRatio: false,\n animation: false,\n scales: {\n x: {\n type: 'linear',\n title: { display: true, text: 'Measurement Number' },\n ticks: { stepSize: 1 }\n },\n y: { title: { display: true, text: 'Acceleration (mg)' } }\n },\n plugins: {\n legend: {\n onClick: function(evt, legendItem, legend) {\n const chart = legend.chart;\n const meta = chart.getDatasetMeta(legendItem.datasetIndex);\n meta.hidden = !meta.hidden;\n\n chart.update();\n if (axis !== true) {\n updateShiftedCorrelationLabel(chart, axis);\n updateShapeCorrelationLabel(chart, axis); \/\/ Only for axis charts\n }\n updateTable(axis === true ? 'merged' : axis, chart); \/\/ Update table for both axis and merged charts\n return false;\n }\n }\n }\n };\n }\n\n\n \/\/ Create the charts for x, y and z axes\n function createAxisChart(axis, obj) {\n const canvas = document.getElementById(`${axis}Chart`);\n destroyChart(axis); \/\/ Destroy previous chart before creating a new one\n\n const datasets = obj.recordings.map((rec, i) => ({\n label: `Recording ${i + 1}`,\n data: rec.data[axis].map((v, idx) => ({ x: idx + 1, y: v })),\n borderColor: colors[i % colors.length],\n tension: 0.1,\n hidden: false\n }));\n\n currentCharts[axis] = new Chart(canvas, {\n type: 'line',\n data: { datasets },\n options: getChartOptions(axis)\n });\n\n updateTable(axis, currentCharts[axis]);\n updateShiftedCorrelationLabel(currentCharts[axis], axis);\n updateShapeCorrelationLabel(currentCharts[axis], axis);\n }\n\n\n \/\/ Create the merged values chart\n function createMergedChart(obj) {\n const canvas = document.getElementById('mergedChart');\n destroyChart('merged');\n\n const selectElement = document.querySelector('.merged-select');\n if (!selectElement) return;\n\n const selectedRecordingId = selectElement.value;\n const recording = obj.recordings.find(r => r.ID === parseInt(selectedRecordingId));\n\n if (!recording) return; \/\/ Prevent errors if no valid selection\n\n const datasets = ['x', 'y', 'z'].map((axis, i) => ({\n label: `${axis.toUpperCase()} Values`,\n data: recording.data[axis].map((v, idx) => ({ x: idx + 1, y: v })),\n borderColor: colors[i],\n tension: 0.1,\n fill: false\n }));\n\n currentCharts.merged = new Chart(canvas, {\n type: 'line',\n data: { datasets },\n options: getChartOptions(true)\n });\n\n updateTable('merged', currentCharts.merged);\n }\n\n\n \/\/ Destroy the exisiting chart upon creation of a new chart (i.e. when switching between Actions)\n function destroyChart(axis) {\n if (currentCharts[axis]) {\n currentCharts[axis].destroy();\n currentCharts[axis] = null;\n }\n }\n\n\n \/\/ Listener for switching between Recordings on Merged Values chart\n document.addEventListener('change', function(e) {\n if (e.target.classList.contains('merged-select')) {\n const obj = jsonData.find(item => item.ID === currentObjectId);\n if (obj) createMergedChart(obj);\n }\n });\n\n\n \/\/ Listener for toggling Table on each charts\n document.addEventListener('click', function(e) {\n if (e.target.classList.contains('toggle-table')) {\n const chartType = e.target.getAttribute('data-chart');\n const table = document.getElementById(`${chartType}Table`);\n table.style.display = table.style.display === 'none' ? 'block' : 'none';\n }\n });\n<\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the … <a href=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" class=\"more-link\">Mwy<\/a><\/p>","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-4.php","meta":{"footnotes":""},"class_list":["post-14699","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"\n<title>Micro:bit Data Analyser - Technocamps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro:bit Data Analyser - Technocamps\" \/>\n<meta property=\"og:description\" content=\"JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the ... Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/\" \/>\n<meta property=\"og:site_name\" content=\"Technocamps\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Technocamps\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-03T16:37:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Technocamps\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 munud\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\",\"url\":\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\",\"name\":\"Micro:bit Data Analyser - Technocamps\",\"isPartOf\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#website\"},\"datePublished\":\"2025-03-03T16:05:44+00:00\",\"dateModified\":\"2025-03-03T16:37:44+00:00\",\"inLanguage\":\"cy\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#website\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"name\":\"Technocamps\",\"description\":\"Technocamps, Inspiring computational thinking\",\"publisher\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.technocamps.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cy\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\",\"name\":\"Technocamps\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cy\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png\",\"contentUrl\":\"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png\",\"width\":2136,\"height\":2136,\"caption\":\"Technocamps\"},\"image\":{\"@id\":\"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Technocamps\/\",\"https:\/\/x.com\/Technocamps\",\"https:\/\/www.linkedin.com\/company\/technocamps\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Micro:bit Data Analyser - Technocamps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/","og_locale":"en_US","og_type":"article","og_title":"Micro:bit Data Analyser - Technocamps","og_description":"JSON Data Visualization Feedback! micro:bit ML & CreateAIData Analysis Tool Learner Help Teacher Help Uploading Your Data Click Choose File and select the file you would like to upload. This file must be downloaded from either the micro:bit Machine Learning Tool or micro:bit CreateAI site and be a JSON file! You can download this on these sites by clicking the ... Read More","og_url":"https:\/\/www.technocamps.com\/cy\/microbit-data-analyser\/","og_site_name":"Technocamps","article_publisher":"https:\/\/www.facebook.com\/Technocamps\/","article_modified_time":"2025-03-03T16:37:44+00:00","twitter_card":"summary_large_image","twitter_site":"@Technocamps","twitter_misc":{"Est. reading time":"14 munud"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/","url":"https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/","name":"Micro:bit Data Analyser - Technocamps","isPartOf":{"@id":"https:\/\/www.technocamps.com\/en\/#website"},"datePublished":"2025-03-03T16:05:44+00:00","dateModified":"2025-03-03T16:37:44+00:00","inLanguage":"cy","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.technocamps.com\/en\/microbit-data-analyser\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.technocamps.com\/en\/#website","url":"https:\/\/www.technocamps.com\/en\/","name":"Technocamps","description":"Technocamps, Inspiring computational thinking","publisher":{"@id":"https:\/\/www.technocamps.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.technocamps.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cy"},{"@type":"Organization","@id":"https:\/\/www.technocamps.com\/en\/#organization","name":"Technocamps","url":"https:\/\/www.technocamps.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"cy","@id":"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png","contentUrl":"https:\/\/www.technocamps.com\/wp-content\/uploads\/TC-Marketing-Logo.png","width":2136,"height":2136,"caption":"Technocamps"},"image":{"@id":"https:\/\/www.technocamps.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Technocamps\/","https:\/\/x.com\/Technocamps","https:\/\/www.linkedin.com\/company\/technocamps\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/comments?post=14699"}],"version-history":[{"count":6,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699\/revisions"}],"predecessor-version":[{"id":14710,"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/pages\/14699\/revisions\/14710"}],"wp:attachment":[{"href":"https:\/\/www.technocamps.com\/cy\/wp-json\/wp\/v2\/media?parent=14699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}