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;\">Feedback!<\/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\/en\/\">\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 & CreateAI<br>Data Analysis Tool<\/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()\">Learner Help<\/button>\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleTeacherHelp()\">Teacher Help<\/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>Uploading Your 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 Click <i>Choose File<\/i> and select the file you would like to upload.\n <\/li>\n <li class=\"mb-3\">\n This file must be downloaded from either the <i>micro:bit Machine Learning Tool<\/i> \n or <i>micro:bit CreateAI<\/i> site and be a <i>JSON<\/i> file!\n <\/li>\n <li class=\"mb-3\">\n You can download this on these sites by clicking the menu button (three dots) and clicking \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>Using This Site<\/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 When you open a file, the actions you recorded appear as buttons.\n <\/li>\n <li class=\"mb-3\">\n When you click on any action, 4 graphs will appear:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The first 3 graphs show the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates of all \n the Recordings. You can use these to decide how similar your Recordings are!\n <\/li>\n <li class=\"mb-2\">\n The final graph show the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates from one \n Recording at a time. A drop down list lets you select which Recording to investigate.\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>Your Graphs<\/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>Each of your graphs below has these tools:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Clicking on the Recordings at the top of each graph will make them appear and disappear. You can uses this to help find which Recordings are similar.\n <\/li>\n <li class=\"mb-3\">\n The first three graphs (<i>x<\/i>, <i>y<\/i> and <i>z<\/i>) display the <b>correlation<\/b> of the Recordings - this just means how similar they are. As you make your Recordings appear\/disappear these numbers will change to show the correlation for the Recordings you can see! This is helpful for finding which Recordings are similar.\n <\/li>\n <li class=\"mb-3\">\n Clicking <b>Toggle Table<\/b> will make the table under the graph appear and disappear. \n <\/li>\n <li class=\"mb-3\">\n Hovering over any point will tell you it's value.\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>Your 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 Your Machine Learning model works by finding patterns in your Recordings - <b>but this is tricky!<\/b>\n <\/li>\n <li class=\"mb-3\">\n To find patterns your Recordings need to be <b>similar<\/b>. If all your Recordings look very different then it will be very hard for your model to find patterns (it will still try and just be bad at guessing!). \n <\/li>\n <li class=\"mb-3\">\n <i>But<\/i>, if all your Recordings are the same then there are no patterns!\n <\/li>\n <li class=\"mb-3\">\n This makes things tricky! This tool can help you analyse and may help you improve your Machine Learning model.\n <\/li>\n <li class=\"mb-3\">\n The graphs are a good way of checking if your Recordings are similar with your eyes. If they do look similar then your data is good. If they look very different then your data <i>might be<\/i> bad.\n <\/li>\n <li class=\"mb-3\">\n The correlations are a good way of checking if your Recordings are similar with <b>maths!<\/b> <i>Correlation<\/i> just means how similar things are - your graphs have two correlations:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The <b><i>Shape Correlation<\/i><\/b> tells you how similar the shape of your Recordings is - in other words how well do the lines match up. If your lines are the same they will have <i>100%<\/i> correlation, if your lines are opposites they will have <i>-100%<\/i> correlation.\n <\/li>\n <li class=\"mb-2\">\n The <b><i>Shift Correlation<\/i><\/b> tells you how similar your Recordings would be if they were moved left or right - in other words if you lined them up as best as you could. <b>Be careful<\/b> as this correlation does not care about shape, so the number can be very high even if the Recordings don't look very similar!\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>Uploading Your 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 Click <b>Choose File<\/b> and select the file you would like to upload.\n <\/li>\n <li class=\"mb-3\">\n This file must be downloaded from either the <i>micro:bit Machine Learning Tool<\/i> \n or <i>micro:bit CreateAI<\/i> site and be in <b>JSON<\/b> format!\n <\/li>\n <li class=\"mb-3\">\n You can do this on these sites by clicking the menu button (three dots) and choosing \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>Navigating This Site<\/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 When a JSON is opened, each of the actions recorded using the Machine Learning or CreateAI tools will appear as buttons. \n Each action is displayed as a separate tab - i.e the actions cannot be compared with one and other.\n <\/li>\n <li class=\"mb-3\">\n For each action, 4 graphs appear:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The first 3 graphs display the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates of all \n the Recordings - these can be used to determine the consistency \n in each Recording, and whether any are drastically different. \n The coordinate system of the micro:bit is shown on the left.\n <\/li>\n <li class=\"mb-2\">\n The final graph displays the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates from a \n single Recording at a time. A drop down list allows you to \n select which Recording to investigate.\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>Navigating the Graphs<\/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>Each graph below can be investigated using the following:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Clicking on each Recording\/Axis <i>in the legend<\/i> of each graph will <b>toggle the visibility<\/b> of that Recording\/Axis. This can be used to help find which Recordings are consistent and which are outliers.\n <\/li>\n <li class=\"mb-3\">\n The <i>first three graphs<\/i> display the <b>correlation<\/b> of the data. This is essentially how well each of the Recordings (for the particular coordinate) match. This is provided as a percentage for understandability. Toggling the visibility of Recordings will alter the correlation to reflect the selected data. This can also help find outliers.\n <\/li>\n <li class=\"mb-3\">\n Clicking on <b>Toggle Table<\/b> will toggle the table containing the values of each datapoint of each visible Recording\/Axis.\n <\/li>\n <li class=\"mb-3\">\n <b>Hovering<\/b> over any datapoint will tell you it's value.\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>Understanding the 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 For Machine Learning to work, patterns must be present in the data, but <b>this is not an exact science!<\/b>\n <\/li>\n <li class=\"mb-3\">\n The data recorded for each action <i>must be relatively similar<\/i> for patterns to be found - if the Recordings for an action are wildly different then it will be very hard for the model to find any realistic patterns (though it will still try and return unexpected results!). \n <\/li>\n <li class=\"mb-3\">\n <i>However<\/i>, if all the Recordings for an action were identical then there would be no patterns to observe (as only that exact pattern would be registered as that action).\n <\/li>\n <li class=\"mb-3\">\n This is a fragile balance, and the tools on this page can help analyse your Recordings and may help improve the effectiveness of your Machine Learning models.\n <\/li>\n <li class=\"mb-3\">\n The <b>graphs<\/b> provide a good visual indication of whether data is similar. If the curves look similar then the data is good. If there are wildly different patterns then the data is <i>likely<\/i> bad.\n <\/li>\n <li class=\"mb-3\">\n The <b>correlations<\/b> can also provide a good mathematical indication of whether data is similar. Two measures of correlation are given:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The <b><i>Shape Correlation<\/i><\/b> defines how well each of the Recordings match based on their shape (i.e. how well do the lines match up). Lines that match perfectly will have <i>100%<\/i> correlation, lines that are perfect opposites will have <i>-100%<\/i> correlation. Note that this <b>does not<\/b> take any offset (along the x-axis) into account, and therefore will give Recordings that are offset from each-other, but have an identical shape, low correlation values. This uses the <i>Pearson Correlation<\/i>.\n <\/li>\n <li class=\"mb-2\">\n The <b><i>Shift Correlation<\/i><\/b> defines how well each of the Recordings would match if they were shifted (offset) to their best possible alignment. This massively downplays the importance of shape (by correlating by frequency) and <i>should be taken with a grain of salt<\/i> (as values may be misleadingly high). This uses the <i>Modified Pearson Correlation (Phase Invariant)<\/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>X Values<\/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\">Toggle Table<\/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>Y Values<\/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\">Toggle Table<\/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>Z Values<\/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\">Toggle Table<\/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>Merged Values<\/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\">Toggle Table<\/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>\n","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\/en\/microbit-data-analyser\/\" class=\"more-link\">Read More<\/a><\/p>\n","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\/en\/microbit-data-analyser\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\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\/en\/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=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\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\":\"en-GB\",\"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\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\",\"name\":\"Technocamps\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@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\/en\/microbit-data-analyser\/","og_locale":"en_GB","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\/en\/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":{"Estimated reading time":"14 minutes"},"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":"en-GB","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":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.technocamps.com\/en\/#organization","name":"Technocamps","url":"https:\/\/www.technocamps.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@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\/en\/wp-json\/wp\/v2\/pages\/14699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/comments?post=14699"}],"version-history":[{"count":6,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages\/14699\/revisions"}],"predecessor-version":[{"id":14710,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages\/14699\/revisions\/14710"}],"wp:attachment":[{"href":"https:\/\/www.technocamps.com\/en\/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;\">Feedback!<\/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\/en\/\">\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 & CreateAI<br>Data Analysis Tool<\/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()\">Learner Help<\/button>\n <\/div>\n <div class=\"col-3\">\n <button class=\"btn btn-info w-100\" onclick=\"toggleTeacherHelp()\">Teacher Help<\/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>Uploading Your 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 Click <i>Choose File<\/i> and select the file you would like to upload.\n <\/li>\n <li class=\"mb-3\">\n This file must be downloaded from either the <i>micro:bit Machine Learning Tool<\/i> \n or <i>micro:bit CreateAI<\/i> site and be a <i>JSON<\/i> file!\n <\/li>\n <li class=\"mb-3\">\n You can download this on these sites by clicking the menu button (three dots) and clicking \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>Using This Site<\/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 When you open a file, the actions you recorded appear as buttons.\n <\/li>\n <li class=\"mb-3\">\n When you click on any action, 4 graphs will appear:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The first 3 graphs show the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates of all \n the Recordings. You can use these to decide how similar your Recordings are!\n <\/li>\n <li class=\"mb-2\">\n The final graph show the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates from one \n Recording at a time. A drop down list lets you select which Recording to investigate.\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>Your Graphs<\/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>Each of your graphs below has these tools:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Clicking on the Recordings at the top of each graph will make them appear and disappear. You can uses this to help find which Recordings are similar.\n <\/li>\n <li class=\"mb-3\">\n The first three graphs (<i>x<\/i>, <i>y<\/i> and <i>z<\/i>) display the <b>correlation<\/b> of the Recordings - this just means how similar they are. As you make your Recordings appear\/disappear these numbers will change to show the correlation for the Recordings you can see! This is helpful for finding which Recordings are similar.\n <\/li>\n <li class=\"mb-3\">\n Clicking <b>Toggle Table<\/b> will make the table under the graph appear and disappear. \n <\/li>\n <li class=\"mb-3\">\n Hovering over any point will tell you it's value.\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>Your 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 Your Machine Learning model works by finding patterns in your Recordings - <b>but this is tricky!<\/b>\n <\/li>\n <li class=\"mb-3\">\n To find patterns your Recordings need to be <b>similar<\/b>. If all your Recordings look very different then it will be very hard for your model to find patterns (it will still try and just be bad at guessing!). \n <\/li>\n <li class=\"mb-3\">\n <i>But<\/i>, if all your Recordings are the same then there are no patterns!\n <\/li>\n <li class=\"mb-3\">\n This makes things tricky! This tool can help you analyse and may help you improve your Machine Learning model.\n <\/li>\n <li class=\"mb-3\">\n The graphs are a good way of checking if your Recordings are similar with your eyes. If they do look similar then your data is good. If they look very different then your data <i>might be<\/i> bad.\n <\/li>\n <li class=\"mb-3\">\n The correlations are a good way of checking if your Recordings are similar with <b>maths!<\/b> <i>Correlation<\/i> just means how similar things are - your graphs have two correlations:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The <b><i>Shape Correlation<\/i><\/b> tells you how similar the shape of your Recordings is - in other words how well do the lines match up. If your lines are the same they will have <i>100%<\/i> correlation, if your lines are opposites they will have <i>-100%<\/i> correlation.\n <\/li>\n <li class=\"mb-2\">\n The <b><i>Shift Correlation<\/i><\/b> tells you how similar your Recordings would be if they were moved left or right - in other words if you lined them up as best as you could. <b>Be careful<\/b> as this correlation does not care about shape, so the number can be very high even if the Recordings don't look very similar!\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>Uploading Your 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 Click <b>Choose File<\/b> and select the file you would like to upload.\n <\/li>\n <li class=\"mb-3\">\n This file must be downloaded from either the <i>micro:bit Machine Learning Tool<\/i> \n or <i>micro:bit CreateAI<\/i> site and be in <b>JSON<\/b> format!\n <\/li>\n <li class=\"mb-3\">\n You can do this on these sites by clicking the menu button (three dots) and choosing \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>Navigating This Site<\/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 When a JSON is opened, each of the actions recorded using the Machine Learning or CreateAI tools will appear as buttons. \n Each action is displayed as a separate tab - i.e the actions cannot be compared with one and other.\n <\/li>\n <li class=\"mb-3\">\n For each action, 4 graphs appear:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The first 3 graphs display the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates of all \n the Recordings - these can be used to determine the consistency \n in each Recording, and whether any are drastically different. \n The coordinate system of the micro:bit is shown on the left.\n <\/li>\n <li class=\"mb-2\">\n The final graph displays the <i>x<\/i>, <i>y<\/i> and <i>z<\/i> coordinates from a \n single Recording at a time. A drop down list allows you to \n select which Recording to investigate.\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>Navigating the Graphs<\/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>Each graph below can be investigated using the following:<\/p>\n\n <ul class=\"mb-0\">\n <li class=\"mb-3\">\n Clicking on each Recording\/Axis <i>in the legend<\/i> of each graph will <b>toggle the visibility<\/b> of that Recording\/Axis. This can be used to help find which Recordings are consistent and which are outliers.\n <\/li>\n <li class=\"mb-3\">\n The <i>first three graphs<\/i> display the <b>correlation<\/b> of the data. This is essentially how well each of the Recordings (for the particular coordinate) match. This is provided as a percentage for understandability. Toggling the visibility of Recordings will alter the correlation to reflect the selected data. This can also help find outliers.\n <\/li>\n <li class=\"mb-3\">\n Clicking on <b>Toggle Table<\/b> will toggle the table containing the values of each datapoint of each visible Recording\/Axis.\n <\/li>\n <li class=\"mb-3\">\n <b>Hovering<\/b> over any datapoint will tell you it's value.\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>Understanding the 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 For Machine Learning to work, patterns must be present in the data, but <b>this is not an exact science!<\/b>\n <\/li>\n <li class=\"mb-3\">\n The data recorded for each action <i>must be relatively similar<\/i> for patterns to be found - if the Recordings for an action are wildly different then it will be very hard for the model to find any realistic patterns (though it will still try and return unexpected results!). \n <\/li>\n <li class=\"mb-3\">\n <i>However<\/i>, if all the Recordings for an action were identical then there would be no patterns to observe (as only that exact pattern would be registered as that action).\n <\/li>\n <li class=\"mb-3\">\n This is a fragile balance, and the tools on this page can help analyse your Recordings and may help improve the effectiveness of your Machine Learning models.\n <\/li>\n <li class=\"mb-3\">\n The <b>graphs<\/b> provide a good visual indication of whether data is similar. If the curves look similar then the data is good. If there are wildly different patterns then the data is <i>likely<\/i> bad.\n <\/li>\n <li class=\"mb-3\">\n The <b>correlations<\/b> can also provide a good mathematical indication of whether data is similar. Two measures of correlation are given:\n <ul class=\"ms-4 mt-2\">\n <li class=\"mb-2\">\n The <b><i>Shape Correlation<\/i><\/b> defines how well each of the Recordings match based on their shape (i.e. how well do the lines match up). Lines that match perfectly will have <i>100%<\/i> correlation, lines that are perfect opposites will have <i>-100%<\/i> correlation. Note that this <b>does not<\/b> take any offset (along the x-axis) into account, and therefore will give Recordings that are offset from each-other, but have an identical shape, low correlation values. This uses the <i>Pearson Correlation<\/i>.\n <\/li>\n <li class=\"mb-2\">\n The <b><i>Shift Correlation<\/i><\/b> defines how well each of the Recordings would match if they were shifted (offset) to their best possible alignment. This massively downplays the importance of shape (by correlating by frequency) and <i>should be taken with a grain of salt<\/i> (as values may be misleadingly high). This uses the <i>Modified Pearson Correlation (Phase Invariant)<\/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>X Values<\/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\">Toggle Table<\/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>Y Values<\/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\">Toggle Table<\/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>Z Values<\/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\">Toggle Table<\/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>Merged Values<\/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\">Toggle Table<\/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>\n","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\/en\/microbit-data-analyser\/\" class=\"more-link\">Read More<\/a><\/p>\n","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\/en\/microbit-data-analyser\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\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\/en\/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=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\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\":\"en-GB\",\"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\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.technocamps.com\/en\/#organization\",\"name\":\"Technocamps\",\"url\":\"https:\/\/www.technocamps.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@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\/en\/microbit-data-analyser\/","og_locale":"en_GB","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\/en\/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":{"Estimated reading time":"14 minutes"},"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":"en-GB","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":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.technocamps.com\/en\/#organization","name":"Technocamps","url":"https:\/\/www.technocamps.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@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\/en\/wp-json\/wp\/v2\/pages\/14699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/comments?post=14699"}],"version-history":[{"count":6,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages\/14699\/revisions"}],"predecessor-version":[{"id":14710,"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/pages\/14699\/revisions\/14710"}],"wp:attachment":[{"href":"https:\/\/www.technocamps.com\/en\/wp-json\/wp\/v2\/media?parent=14699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}