Τίτλος εργασίας: Οπτικοποίηση δεδομένων χορηγιών (UK)
Ονοματεπώνυμο: Ευάγγελος Γεραμάνης
ΑΜ: Π2015107
Link στο αποθετήριο του κώδικα
Link στο branch του κώδικα του τελικού παραδοτέου, που περιλαμβάνει τις αλλαγές όλων των παραδοτέων
Σύνοψη
Για το μάθημα του ΣΤ’ εξαμήνου “Τεχνολογία Λογισμικού” μας δόθηκε η δυνατότητα να ασχοληθούμε με ένα project που είχε άμεση σχέση με το αντικείμενο του μαθήματος. Η οπτικοποίηση δεδομένων χορηγιών για το Ηνωμένο Βασίλειο μου κέντρισε αμέσως το ενδιαφέρον, καθώς οι υπόλοιπες επιλογές απαιτούσαν πιο πολύ χρόνο για την υλοποίηση των παραδοτέων, αλλά και μου φάνηκαν αρκετά πιο δύσκολες. Αν και δεν ασχολήθηκα όσο θα έπρεπε για να φέρω εις πέρας τους στόχους όλων των παραδοτέων, τουλάχιστον νομίζω πως έλαβα κάποιες στοιχειώδεις γνώσεις αναφορικά με τη Javascript, την Html, τη βιβλιοθήκη Data-Driven Documents (ή αλλιώς D3.js), καθώς και εμβάθυνα λίγο ακόμα στο Github και στη φιλοσοφία του “ανοικτού κώδικα”.
Εισαγωγή
Προκειμένου να ανταπεξέλθω στις απαιτήσεις του κάθε παραδοτέου, απαιτούνταν πρωτίστως η κατανόηση της πλατφόρμας του Github. Σε αυτήν την προσπάθεια συνέβαλε θετικά και το εργαστήριο του μαθήματος. Ειδικά για όσους φοιτητές/φοιτήτριες προέρχονταν από την κατεύθυνση των πληροφοριακών συστημάτων, σίγουρα νομίζω πως τους βοήθησε σε μεγάλο βαθμό το εν λόγω εργαστήριο στην εξοικείωσή τους με το Github. Αντίθετα δε, όσοι προερχόμασταν από την άλλη κατεύθυνση -αυτή των Ανθρωπιστικών και Κοινωνικών Επιστημών- νομίζω πως δε δυσκολευτήκαμε ιδιαίτερα όσον αφορά τη χρήση του Github, για τα πλαίσια της εργασίας. Στη συνέχεια προχώρησα στη μελέτη της βιβλιοθήκης D3 της Javascript, αφού αποτελούσε τη βάση για την υλοποίηση σχεδόν κάθε ζητούμενου.
Επιλογή εργαλείων και σχετικών έργων
Τα εργαλεία που χρησιμοποίησα ήταν το “ResponsiveVoice” για την text-to-speech λειτουργία. Η βιβλιοθήκη D3.js, από όπου άντλησα πληροφορίες από την πληθώρα παραδειγμάτων που υπήρχαν για να υλοποιήσω κάποια στοιχεία από τα παραδοτέα. Τέλος και πιο σημαντικό το Github που η χρήση του βεβαίως ήταν αναπόφευκτη προκειμένου να υλοποιηθεί το project.
Μέθοδος και τεχνικές ανάπτυξης
Αρχικά έγινε download τοπικά το αποθετήριο του κώδικα της εργασίας (έπειτα από συμβουλή του κ.Χωριανόπουλου για να εμφανίζονται απευθείας οι αλλαγές που θα εφαρμόζονταν στον κώδικα αποτυπωμένες να “τρέχουν” τοπικά). Για να επιτευχθεί η λειτουργικότητα σε τοπικό επίπεδο απαιτούνταν η ύπαρξη δύο βιβλιοθηκών (“jquery.min.js” και “d3.v3.min.js”). Σε αυτό το βήμα με βοήθησε πάρα πολύ ο Αστέριος (2015059). Στη συνέχεια εγκαταστάθηκαν όλα τα απαραίτητα εργαλεία (αυτά που αναφέρονται παραπάνω) για να είναι εφικτή η πραγματοποίηση των παραδοτέων.
Για το παραδοτέο 1 πραγματοποιήθηκαν οι ακόλουθοι στόχοι:
α) Για τα ζητούμενα στα οποία απαιτούνταν αλλαγές στο προσωπικό μας αποθετήριο πραγματοποιήθηκαν τα κάτωθι:
-
Ο σύνδεσμος της σελίδας με την εφαρμογή, καθώς και το url της εφαρμογής τροποποιήθηκε ώστε να μην καταλήγει σε ‘full-viz.html’ και να περιλαμβάνει το αντίστοιχο username. Για να επιτευχθεί αυτό, ενεργοποιήθηκαν τα gh-pages και η ονομασία του αρχείου ‘full-viz.html’ αλλάχθηκε σε ‘index.html’.
-
Τα χρώματα των κύκλων με τα δεδομένα των δωρεών και των δωρητών αλλάχθηκαν, καθώς και των 3 πεδίων της ομαδοποίησης ‘Split by party’.
-
Προστέθηκε ήχος κάθε φορά που γίνεται ‘κλικ’ σε μία επιλογή ομαδοποίησης των δεδομένων.
-
Προστέθηκε η δυνατότητα αναζήτησης στο ‘google’ με τα στοιχεία του δωρητή, εφόσον γίνει ‘κλικ’ πάνω σε έναν αντίστοιχο κύκλο.
-
Επεκτάθηκε η εφαρμογή, ώστε να ανταποκρίνεται και στις απαιτήσεις των ανθρώπων με περιορισμένη όραση, κάνοντας το ποντίκι να ενεργεί ως μεγεθυντικός φακός όταν περνάει πάνω από τις λέξεις. Επιπροσθέτως εμπλουτίστηκε και με την επιλογή της ακρόασης του ονόματος του δωρητή και του ποσού της δωρεάς όταν ο δείκτης του ποντικιού βρίσκεται πάνω από κάποιο κύκλο δεδομένων για τους ανθρώπους που δεν τους δίνεται η δυνατότητα να τα δουν.
-
Τέλος επεκτάθηκε η εφαρμογή με την προσθήκη της ομαδοποίησης των δεδομένων ‘Split by the amount of the donation’
β) Για τα ζητούμενα στα οποία απαιτούνταν αλλαγές (pull request) στο κοινό αποθετήριο του κώδικα παρατίθεται ο σχετικός σύνδεσμος από το merged pull-request:
Αναφορικά με το παραδοτέο 2:
α) Για τα ζητούμενα στα οποία απαιτούνταν αλλαγές στο προσωπικό μας αποθετήριο πραγματοποιήθηκαν τα κάτωθι:
-
Προστέθηκε η δυνατότητα όταν το ποντίκι περνάει μέσα από κάποιο κύκλο του γραφήματος να εμφανίζεται και να επεκτείνεται δυναμικά στο κάτω μέρος της ιστοσελίδας, η σειρά επισκεψιμότητας των εικόνων των δωρητών.
-
Η δημιουργία ενός ακόμα D3 γραφήματος για την απεικόνιση των ίδιων δεδομένων, καθώς και η απεικόνιση διαφορετικών δεδομένων με το διαθέσιμο, δοθέν, D3 γράφημα δεν υλοποιήθηκαν.
β) Για τα ζητούμενα στα οποία απαιτούνταν αλλαγές (pull request) στο κοινό αποθετήριο του κώδικα παρατίθενται οι σχετικοί σύνδεσμοι από τα merged pull-requests:
-
index.html, τροποποίηση της #position 009, ώστε το username να έχει ένα animation εμφάνισης
-
2015107.html, οπτικοποίηση των contributors του κεντρικού αποθετηρίου του κώδικα
Παρακάτω ακολουθούν ενδεικτικές οθόνες και animated gif
- Εδώ παρουσιάζονται οι αλλαγές στα χρώματα των κύκλων με τα δεδομένα, καθώς και των 3 πεδίων ομαδοποίησης του ‘split by party’.
- Παρακάτω διαφαίνεται η καινούρια ομαδοποίηση ‘split by the amount of the donation’ που προστέθηκε.
- Στη κάτωθι εικόνα είναι ορατή η σειρά επίσκεψης των κύκλων (δωρητών) του γραφήματος μέσα από τις εικόνες που εμφανίζονται
- Στο παρακάτω animated gif φαίνεται καλύτερα πως επιτυγχάνεται η δυναμική επέκταση των εικόνων των δωρητών
- Στο επόμενο gif απεικονίζεται το animation του username που ζητήθηκε στο 2ο παραδοτέο
- Στη συνέχεια ακολουθεί η σελίδα με την οπτικοποίηση των contributors του κεντρικού αποθετηρίου του κώδικα
- Εδώ εικονίζονται τα αποτελέσματα της αναζήτησης στο Google με το όνομα του δωτηρή, στο οποίο έγινε “κλικ”
- Τέλος παρατίθεται η λειτουργία του μεγεθυντικού φακού
Συμπεράσματα
Εν κατακλείδι, πιστεύω ακράδαντα ότι αποκόμισα αρκετά πράγματα από την όλη διαδικασία του Project. Κατ’αρχάς απέκτησα ακόμα μεγαλύτερη οικειότητα με το Github, κάτι το οποίο σίγουρα θα φανεί ωφέλιμο για το μέλλον. Επιπροσθέτως είχα μια ουσιαστική και αρκετά εποικοδομητική επαφή με τη Javascprit και τη βιβλιθήκη D3. Συγχρόνως πήρα μια ιδέα αναφορικά με τη διαδικασία ανάπτυξης/επέκτασης μίας ιστοσελίδας και πως αυτή χτίζεται βήμα - βήμα, έστω και χωρίς να εμβαθύνω ιδιαίτερα. Ωστόσο το πιο καίριο και ουσιώδες κομμάτι της όλης εργασίας για μένα ήταν η κατανόηση της σημαντικότητας του ανοικτού κώδικα για την εξέλιξη των εφαρμογών. Πριν από αυτήν την εργασία, δεν είχα συνειδητοποιήσει σε τι αποσκοπούν ακριβώς τα ανοικτού κώδικα προγράμματα, πέρα ίσως από τη δωρεάν χρήση τους. Αδιαμφισβήτητα λοιπόν, το τελικό “προϊόν” που παρουσιάζω επιδέχεται αμέτρητες αλλαγές και βελτιστοποιήσεις ακόμα.
Δικτυογραφία που χρησιμοποιήθηκε για την υλοποίηση της εργασίας:
Εργαλείο που χρησιμοποιήθηκε για τη μετατροπή του κειμένου σε φωνή
Σύνδεσμοι για τους πηγαίους κώδικες που χρησιμοποιήθηκαν για την υλοποίηση του 2ου παραδοτέου για τα ζητούμενα που αφορούσαν αλλαγές στο αποθετήριο του κώδικα με pull-request:
index.html και