Framtida arbete - En jämförande studie mellan olika JavaScriptbibliotek för visualisering: Pres

Om mer tid och resurser kan läggas på detta eller liknande experiment skulle man kunna göra flera olika saker för att få mer kunskap om och mer insikt i olika JavaScriptbibliotek för statistiska diagram och grafer.

Till en början kan fler mätningar genomföras för ännu fler och säkrare resultat att basera analyser på. Då både själva utritningstiden och tiden för hela sidans laddning lagrats kan skillnaden i dessa undersökas vidare. Kanske kan man se om tiden för hela sidans laddning påverkas av datamängden som används för diagrammen eller kanske se om det finns andra, bättre, sätt att lagra och hämta data, istället för att använda en XML-fil.

I detta experiment lagrades mätresultat för själva utritningen av diagram, men också för tiden det tog att genomföra alla funktioner på sidan. Då denna studie riktar in sig på just utritningstider har inte mycket fokus lagts på tiden det tagit för hela sidan att laddas. Detta är något som skulle kunna undersökas vidare i framtida studier. Att exempelvis se om det finns kopplingar mellan utritningstid och laddningstid för hela sidan och att undersöka vilka funktioner som tar mest tid att genomföra kan vara intressant att arbeta vidare med.

Man kan även jämföra andra, liknande, JavaScriptbibliotek och genomföra mätningar och undersökningar av andra diagramtyper, exempelvis de som nämns i 2.2.2 Statistiska grafer och diagram. Utöver dessa kan även ytterligare experiment genomföras där grafer och diagram med mer interaktion undersöks och jämförs, exempelvis med animationer och förändringar i realtid alternativt där man kan interagera med diagrammen och välja vilken data som ska visas. Experimentet kan också genomföras med flera olika webbläsare för att se om det finns skillnader mellan dessa samt på olika enheter, såsom olika datorer, surfplattor och mobiler för att nämna några.

Experimentet kan även utökas till större datamängd, antingen med ytterligare data från Bolin Centre for Climate Reasearch (Bolin Centre for Climate Research 2018) då de fortsätter att mäta temperaturer i Stockholm och uppdatera sin hemsida med dessa, eller med något annat dataset.

I framtiden kan det vara intressant att arbeta vidare med prestanda för utritningar av grafer och diagram, kanske kan man även optimera befintliga bibliotek? Att fortsätta arbeta med att försöka få ännu bättre prestanda på renderingen kan bland annat börssidor och de som handlar med aktier dra nytta av. Att just börsen tas upp som exempel är för att även millisekunder kan göra oerhört stor skillnad där och det märks rätt tydligt när det handlar om att vinna eller förlora stora, eller små, mängder pengar.

Om fler personer kan involveras i studien kan både utvecklar- och programmerarperspektiv samt användarperspektiv undersökas. Att få med både utvecklar- och användarperspektiv kan leda till fördjupad förståelse av hur de olika JavaScriptbiblioteken fungerar och hur de används bäst. Om tillgång till testpersoner finns kan man även genomföra undersökningar där olika personers åsikter tas med i beräkningarna. Till exempel kan designpreferenser och användbarhet tas med i analys och utvärdering.

Utvecklingsmöjligheterna nämnda ovan kan antingen undersökas var för sig, exempelvis att endast ta med fler JavaScriptbibliotek i undersökningen, eller flera på samma gång. Ett exempel på det senare kan vara att göra fler mätningar med annan data som lagrats på något annat sätt samtidigt som utritningstider jämförs med tider för alla funktioner. I samma studie

kan även användares och programmerares synpunkter tas till vara och analyseras. Det finns flera olika vägar att gå och många av dem kan kombineras på olika sätt. Möjligheterna, om bara resurser finns, är näst intill oändliga.

Med resurser och med mycket tid att lägga på fortsatt arbete kan kanske funktionalitet från olika JavaScriptbibliotek slås samman till ett bibliotek eller så kan det till och med implementeras direkt i nästa version av HTML eller JavaScript, så att inga bibliotek längre behövs för detta.

Att hitta andra användningsmöjligheter för visualiseringen av statistiska grafer, visualisering i allmänhet och andra användningsområden för JavaScriptbibliotek är också möjliga vägar att fortsätta undersöka och forska vidare på. Kanske kan liknande tekniker användas för andra program, även till sådana funktioner som inte ligger på webben. Eventuellt kan liknande visualiseringar användas för att visa tågstatistik på stationer eller på själva tågen och för flyg eller bilar. Hur termometrar visar temperaturer eller hur värmen i en ugn kontrolleras kan eventuellt i framtiden även det visualiseras för att få en roligare och bättre bild av informationen och potentiella förändringar. Det som nämnts är eller skulle kunna vara delar av ett Smart Home-system och om mer tid läggs på att forska vidare kan möjligen JavaScriptbibliotek bli en del av denna nya utveckling utan att vara alltför komplicerat och kostsamt. I och med detta kan även skillnader mellan HD-skärmar och pixelskärmar som bara visar svart och vitt jämföras.

Om man sträcker sig ännu längre in i framtiden med eventuella kommande projekt kanske visualiseringar, likt de som tagits upp i detta arbete, kan användas i ännu större utsträckning såsom i moderna klockor, i nya modeller av glasögon som kan koppla upp sig mot webben eller möjligtvis för att visa information och statistik från datorer direkt på de berörda datordelarna. Det finns redan idag bilar som har en liten skärm i sig som visar upp information. Kanske kan även dessa i framtiden kopplas upp mot internet och göra så att mer information kan visas på skärmen, kanske kan information från och om bilen skickas till, och visas upp i, en mobil istället. Kanske kan det till och med gå så långt att självkörande bilar kan skapas där de använder sig av data både från bilen i sig och andra källor, och att denna information kan visas i en mobil som då både kan kontrollera bilen och samtidigt se statistik från resan.

Referenser

Aigner, W., Miksch, S., Müller, W., Schumann, H. & Tominski, C. (2008). Visual Methods for Analyzing Time-Oriented Data. IEEE Transactions on Visualization and Computer Graphics, 14(1), ss. 47-60. doi: 10.1109/TVCG.2007.70415

Ali, S.M., Gupta, N., Nayak, G.K. & Lenka R.K. (2016). Big Data Visualization: Tools and Challenges. 2016 2nd International Conference on Contemporary Computing and Informatics (ic3i), ss. 709-713. doi: 10.1109/IC3I.2016.7918044

Anttonen, M., Salminen, A., Mikkonen, T. & Taivalsaari, A. (2011). Transforming the web into a real application platform: new technologies, emerging trends and missing pieces. SAC '11 Proceedings of the 2011 ACM Symposium on Applied Computing, ss. 800-807. doi:

10.1145/1982185.1982357

Berndtsson, M., Hansson, J., Olsson, B. & Lundell, B. (2008). Thesis Projects: A Guide for Students in Computer Science and Information Systems. 2. ed., London: Springer.

Bolin Centre for Climate Research

https://bolin.su.se/data/stockholm/homogenized_daily_mean_temperatures.php [2018-02-17]

Cai, J.-Y., Nerurkar, A. & Wu, M.-Y. (1998). Making benchmarks uncheatable. Computer Performance and Dependability Symposium, 1998. IPDS '98. Proceedings, ss. 216-227.

doi: 10.1109/IPDS.1998.707724

Chart.js http://www.chartjs.org/ [2017-12-11]

Chart.js Scatter Chart http://www.chartjs.org/docs/latest/charts/scatter.html [2018-04-15]

Chartist.js http://gionkunz.github.io/chartist-js/ [2018-02-17]

Creative Commons 3.0 https://creativecommons.org/licenses/by/3.0/ [2018-02-17]

De Veaux, R.D., Velleman, P.F. & Bock, D.E. (2016). Stats: data and models. 4. ed., Harlow:

Pearson Education Limited.

EJS Chart http://www.ejschart.com/index.php [2018-05-24]

Fayyad, U., Grinstein, G. G. & Wierse, A. (red.) (2002). Information Visualization in Data Mining and Knowledge Discovery. San Francisco: Morgan Kaufmann.

GitHub Chart.js https://github.com/chartjs/Chart.js [2017-12-11]

GitHub Chartist.js https://github.com/gionkunz/chartist-js/blob/develop/LICENSE-MIT [2018-02-17]

GitHub EJS Chart https://github.com/EmpriseCorporation/EJSCharts [2018-05-24]

GitHub Examensarbete https://github.com/a15alica/examensarbete [2018-06-01]

GitHub Plotly https://github.com/plotly [2017-12-11]

GitHub Smoothie Charts

https://github.com/joewalnes/smoothie/blob/master/LICENSE.txt [2018-02-17]

Google Charts https://developers.google.com/chart/interactive/docs/gallery [2018-02-17]

Holtz, Y., David, L. & Ranwez, V. (2017). The genetic map comparator: a user-friendly application to display and compare genetic maps. Bioinformatics, 33(9), ss. 1387-1388.

doi: 10.1093/bioinformatics/btw816

Hostinger Tutorials HTML and HTML5 https://www.hostinger.com/tutorials/difference-between-html-and-html5 [2018-02-14]

Kerren, A., Jusufi, I. & Liu, J. (2014). Multi-Scale Trend Visualization of Long-Term Temperature Data Sets. I Proceedings of SIGRAD 2014, Visual Computing. Göteborg, Sverige, 12-13 juni 2014, ss. 91-94. URN: urn:nbn:se:lnu:diva-34226

Ladstädter, F., Steiner, A. K., Lackner, B. C., Pirscher, B., Kirchengast, G., Kehrer, J., Hauser, H., Muigg, P. & Doleisch, H. (2010). Exploration of Climate Data Using Interactive Visualization. Journal of Atmospheric and Oceanic Technology, 27(4), ss. 667-679. doi:

10.1175/2009JTECHA1374.1

Li, W., Eickhoff, C. & de Vries, A.P. (2014). Interactive Summarization of Social Media.

Proceedings of the 5th Information Interaction in Context Symposium, ss. 312-315. doi:

10.1145/2637002.2637050

McCoy, S. L., Austin, M. & Slughter, F. (2010). Visualization of the CreSIS Greenland data sets.

ACM SE '10 Proceedings of the 48th Annual Southeast Regional Conference, artikel nr. 97.

doi: 10.1145/1900008.1900135

Moberg, A., Bergström, H., Ruiz Krigsman, J. & Svanered, O. (2002). Daily Air Temperature and Pressure Series for Stockholm (1756-1998). Climatic Change, 53(1-3), ss. 171-212. doi:

10.1023/A:1014966724670

Plotly.js https://plot.ly/javascript/ [2017-12-11]

SCB Det här är statistik http://www.scb.se/hitta-statistik/sverige-i-siffror/det-har-ar-statistik/ [2018-03-30]

SCB Vad är statistik? http://www.scb.se/hitta-statistik/artiklar/2016/Vad-ar-statistik/

[2018-03-30]

SitePoint JavaScript Charting https://www.sitepoint.com/15-best-javascript-charting-libraries/ [2018-02-11]

SitePoint Top JavaScript https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/ [2018-02-10]

Smoothie Charts http://smoothiecharts.org/tutorial.html [2018-02-17]

Spence, R. (2014). Information visualization: an introduction. 3. ed., New York: Springer.

Takama, N., Niibori, M., Okamoto, S., Kamada, M. & Yonekura, T. (2012). Web-Based Tool for Programming Interactive Animations in Terms of State-Transition Diagrams. 2012 15th

International Conference on Network-Based Information Systems (NBiS), ss. 885-888.

doi: 10.1109/NBiS.2012.101

W3Schools HTML5 Canvas https://www.w3schools.com/html/html5_canvas.asp [2018-02-03]

W3Schools JavaScript https://www.w3schools.com/js/default.asp [2018-02-14]

Wohlin, C., Runeson, P., Höst, M., Ohlsson, M. C., Regnell, B. & Wesslén, A. (2012).

Experimentation in Software Engineering. Berlin: Springer.

Appendix A - Plotly.js - linjediagram

Linjediagram 1

Linjediagram 2

Linjediagram 3

Linjediagram 4

Appendix B - Plotly.js - punktdiagram

Punktdiagram 1

Punktdiagram 2

Punktdiagram 3

Punktdiagram 4

III

Appendix C - Plotly.js - stapeldiagram

Stapeldiagram 1

Stapeldiagram 2

Stapeldiagram 3

Stapeldiagram 4

Stapeldiagram 5

Stapeldiagram 6

Stapeldiagram 7

Appendix D - Google Charts - linjediagram

Linjediagram 1

Linjediagram 2

Linjediagram 3

Linjediagram 4

VII

Appendix E - Google Charts - punktdiagram

Punktdiagram 1

Punktdiagram 2

VIII

Punktdiagram 3

Punktdiagram 4

Appendix F - Google Charts - stapeldiagram

Stapeldiagram 1

Stapeldiagram 2

Stapeldiagram 3

Stapeldiagram 4

Stapeldiagram 5

Stapeldiagram 6

XII

Stapeldiagram 7

XIII

Appendix G - Chart.js – linjediagram

Linjediagram 1

Linjediagram 2

XIV

Linjediagram 3

Linjediagram 4

Appendix H - Chart.js - punktdiagram

Ej punktdiagram – felaktigt

Punktdiagram 1

XVI

Punktdiagram 2

Punktdiagram 3

XVII

Punktdiagram 4

XVIII

Appendix I - Chart.js - stapeldiagram

Stapeldiagram 1

Stapeldiagram 2

XIX

Stapeldiagram 3

Stapeldiagram 4

Stapeldiagram 5

Stapeldiagram 6

XXI

Stapeldiagram 7

XXII

Appendix J - Mätningsresultat - linjediagram

Linje 3 - Medelvärde med konfidensintervall

XXV

Linje 4 - Medelvärde med standardavvikelse

Linje 4 - Medelvärde med konfidensintervall

XXVI

Appendix K - Mätningsresultat – punktdiagram

Här presenteras resultaten för mätningarna som genomförs på punktdiagrammen. Notera att skalan (värdena på y-axeln i diagrammen) varierar mellan de olika diagrammen.

Punkt 1 - Medelvärde med standardavvikelse

Punkt 1 - Medelvärde med konfidensintervall

XXVII

0 50 100 150 200 250 300

Chart.js Google Charts Plotly.js

Tid (ms)

Punkt 2 - Medelvärde med standardavvikelse

0 50 100 150 200 250

Chart.js Google Charts Plotly.js

Tid (ms)

Punkt 2 - Medelvärde med konfidensintervall

XXVIII

Punkt 3 - Medelvärde med standardavvikelse

Punkt 3 - Medelvärde med konfidensintervall

XXIX

Punkt 4 - Medelvärde med standardavvikelse

Punkt 4 - Medelvärde med konfidensintervall

XXX

Appendix L - Mätningsresultat – stapeldiagram

Stapel 3 - Medelvärde med konfidensintervall

XXXIII

0 50 100 150 200 250

Chart.js Google Charts Plotly.js

Tid (ms)

Stapel 4 - Medelvärde med standardavvikelse

0 20 40 60 80 100 120 140

Chart.js Google Charts Plotly.js

Tid (ms)

Stapel 4 - Medelvärde med konfidensintervall

XXXIV

0 20 40 60 80 100 120 140 160

Chart.js Google Charts Plotly.js

Tid (ms)

Stapel 5 - Medelvärde med standardavvikelse

0 20 40 60 80 100 120 140

Chart.js Google Charts Plotly.js

Tid (ms)

Stapel 5 - Medelvärde med konfidensintervall

XXXV

Stapel 6 - Medelvärde med standardavvikelse

Stapel 6 - Medelvärde med konfidensintervall

XXXVI

Stapel 7 - Medelvärde med standardavvikelse

Stapel 7 - Medelvärde med konfidensintervall

Chart.js Google Charts Plotly.js

Chart.js - - -

Chart = Chart.js L = Linjediagram

Google = Google Charts P = Punktdiagram

Plotly = Plotly.js S = Stapeldiagram

Chart L1 Google L1 Plotly L1 Chart L2 Google L2 Plotly L2 Chart L3 Google L3 Plotly L3 Chart L4 Google L4 Plotly L4

Chart L1 - - - - - - - - - - -

-Chart L4 SANT SANT SANT SANT SANT SANT SANT SANT SANT - -

-Google L4 SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT -

-Plotly L4 SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT

-Chart P1 Google P1 Plotly P1 -Chart P2 Google P2 Plotly P2 -Chart P3 Google P3 Plotly P3 -Chart P4 Google P4 Plotly P4

Chart P1 - - - - - - - - - - -

-Chart P4 SANT SANT SANT SANT SANT SANT SANT SANT SANT - -

-Google P4 SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT -

-Plotly P4 SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT SANT

-XLI

Chart S1Google S1Plotly S1Chart S2Google S2Plotly S2Chart S3Google S3Plotly S3Chart S4Google S4Plotly S4Chart S5Google S5Plotly S5Chart S6Google S6Plotly S6Chart S7Google S7Plotly S7 Chart S1--------------------- Google S1SANT-------------------- Plotly S1SANTSANT------------------- Chart S2SANTSANTSANT------------------ Google S2SANTSANTSANTSANT----------------- Plotly S2SANTSANTSANTSANTSANT---------------- Chart S3SANTSANTSANTSANTSANTSANT--------------- Google S3SANTSANTSANTSANTSANTSANTSANT-------------- Plotly S3SANTSANTSANTSANTSANTSANTSANTSANT------------- Chart S4SANTSANTSANTSANTSANTSANTSANTSANTSANT------------ Google S4SANTSANTSANTSANTSANTSANTSANTSANTSANTSANT----------- Plotly S4SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT---------- Chart S5SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT--------- Google S5SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT-------- Plotly S5SANTSANTFALSKTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT------- Chart S6SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT------ Google S6SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT----- Plotly S6SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT---- Chart S7SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT--- Google S7SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT-- Plotly S7SANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANTSANT-

In document En jämförande studie mellan olika JavaScriptbibliotek för visualisering: Prestandamätning av JavaScriptbibliotek för statistiska grafer och diagram (Page 43-88)