Datan visualisointi HTML5-sovelluksessa

Tekijä: Lahti Asko Työn nimi: Datan visualisointi HTML5-sovelluksessa Tutkintonimike: Insinööri (AMK) Tietotekniikka Asiasanat: Datan visualisointi, HTML5, JavaScript, Web-ohjelmointi Opinnäytetyön aiheena oli korjata ja parantaa toimeksiantajan aiempaa datan visualisointisovellusta. Tavoitteena oli tehdä sovelluksesta aiempaa suorituskykyisempi ja selkeämpi sekä muokata koodia selkeämmäksi jatkokehitystä varten. Toimeksiantajana oli Collapick Company Oy. Työssä käsitellään muotojen piirtämistä HTML5-sovellukseen käyttämällä grafiikkakirjastoja ja kertoa miten alkuperäisen sovelluksen ongelmia ratkaistiin ja mistä koodia piti muokata selkeämmäksi. Alkuperäisen sovelluksen ratkaistavat ongelmat liittyivät kuvaajaan ja sen rajoitetusta piirtämislogiikasta, jolloin uusien ominaisuuksien ja parannusten kehittäminen oli vaikeaa. Lisäksi kuvaajan piirtämiseen käytetty grafiikkakirjasto Kinetic.js oli vanhentunut. Koodia muokattiin ja vaihdettiin grafiikkakirjasto Konva.js:ään, jotta pystyttiin lisäämään kuvaajaan uusia ominaisuuksia. Kuvaajaan lisättiin työn aikana mahdollisuus skaalata tarkasteltavaa aluetta ja valitsemaan sen sisällä olevia dataelementtejä. Kuvaajan piirtämislogiikassa oli myös pari suorituskykyongelmaa, jotka saatiin ratkaistua. Lopputuloksesta tuli apuväline ohjelmoinnin jatkamiselle, jotta ohjelmoijilta säästyisi aikaa ja he voisivat jatkokehityksen aikana muokata siitä tarkoituksenmukaisemman.ABSTRACT Author: Lahti Asko Title of the Publication: Data visualization in HTML5 application Degree Title: Engineer, Information Technology Keywords: Data visualisation, HTML5, JavaScript, Web-programming The subject of the thesis was to fix and improve the commissioner’s earlier data visualization application. The aim was to make the application more efficient and distinct than before, as well as edit the code clearer for further development. The work was commissioned by Collapick Company Oy. The work focuses on drawing shapes to the HTML5-application using specific javascript framework and tells how problems from the original application were solved and where the code had to be edited to be clearer. The problems of the original application were related to the canvas and its limited drawing logic when creating new features and fixes became difficult. Additionally, the graphic library Kinetic.js used to draw into the canvas was outdated. The code was modified and the graphic library was changed to Konva.js so that it was possible to add new features to the canvas. The visible area scaling was added to the canvas and also the possibility to select data elements inside it. There were also a few performance issues in the draw logic of the canvas that were solved. The final result of the thesis was a tool for continuing programming so time should be saved from the programmers and they can further develop it to be more appropriate