Απεικόνιση και χαρτογράφηση ενός hashtag σε real time ΔΑΒΒΕΤΑΣ ΑΘΑΝΑΣΙΟΣ ΤΕΙ ΑΘΗΝΑΣ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Χρήση του Twitter ως μέσο ενημέρωσης cs121018@teiath.gr
Εργαλεία Χρησιμοποιήθηκαν εργαλεία και βιβλιοθήκες ανοιχτού κώδικα όπως: Netbeans IDE 8.0.2 Glassfish server 4.1 MySQL D3.js Apache commons για REST API calls JSON simple 1.1 Λειτουργικό Debian based (Crunchbang plus plus)
Στόχος Απεικόνιση σε χάρτη ή σε υδρόγειο σφαίρα της κίνησης ενός hashtag μέσα σε μία εβδομάδα (complete) Απεικόνιση σε μπάρες την κίνηση ενός hashtag σε real time (complete) Πρόβλεψη ανερχόμενων hashtag (in progress) Απεικόνιση άποψης/συναισθημάτων μέσω text analysis των χρηστών για κάποιο hashtag/keyword (pending)
Λεπτομέρειες υλοποίησης Χρήση του μοντέλου MVC Χρήση REST services της εφαρμογής για τις κύριες δουλείες όπως η συλλογή δεδομένων από το twitter API και η επεξεργασία τους. Χρήση java bean για διεργασίες που αφορούν τον χρήστη Data visualization με την βιβλιοθήκη d3.js
Διάγραμμα μοντέλου Model (MySQLDB,javabeans,REST Services,Session) Updates View (HTML,d3.js,SVG) Manipulates Controller (Servlet) Sees User Uses
Twitter & hashtags Μέσο κοινωνικής δικτύωσης (social medium) τύπου microblog επιτρέπει στους χρήστες να ανεβάζουν ένα μικρό μήνυμα των 140 χαρακτήρων που ονομάζεται tweet Ετικέτα που χρησιμοποιείται στο twitter και σε άλλες υπηρεσίες έτσι ώστε οι χρήστες να μπορούν να βρουν πιο εύκολα μηνύματα επάνω σε ένα συγκεκριμένο θέμα ή περιεχόμενο Συντάσσεστε με τον εξής τρόπο #<λέξη ή φράση χωρίς κενά> Παράδειγμα : #fosscom2015,#fosscomm,#opensource κλπ
Διαδικασία απεικόνισης κίνησης(1) Ο χρήστης εισάγει στην εφαρμογή μας το όνομα του hashtag ή ένα keyword που τον ενδιαφέρει Κλήση στο API του twitter να μας δώσει τα tweets που περιέχουν το παραπάνω keyword ή hashtag Εύρεση χώρας προέλευσης χρηστών που ανέβασαν τα tweet Απεικόνιση τους σε χάρτη με χρήση του d3.js
Προβλήματα υλοποίησης Η μετατροπή του hashtag ή της λέξης κλειδί σε query για το twitter Εύρεση χώρας χρήστη/tweet Data Visualization
Επίλυση προβλημάτων(1/5) Η επίλυση του input querify έγινε με τον εξής τρόπο: Χρήση της java.net.urlencoder για την μετατροπή του input σε UTF-8 Παραμετροποίηση του servlet ώστε να κωδικοποιεί τους χαρακτήρες σε UTF-8 (setcharacterencoding( UTF-8 ) σε reponse και request) Χρήση της java.net.urldecoder για επαναφορά των αποτελεσμάτων σε μη query μορφή
Επίλυση προβλημάτων(2/5) Πρόβλημα στο Twitter api το πεδίο location/geo συνήθως null Χρήση του πεδίου location από το user/location Πρόβλημα το πεδίο location είναι user input άρα δεν είναι πάντα το ιδανικό για να καθορίσουμε την χώρα προέλευσης του tweet Παράδειγμα: ~ Worldwide ~, Anywhere, Neverland κλπ Abbreviations: NY,ABQ, AUS κλπ
Επίλυση προβλημάτων(3/5) Επίλυση των παραπάνω προβλημάτων με την χρήση του GeoNames.org API Αφού πρώτα κάνουμε sanitize το input ώστε να μην περιέχει σύμβολα και άλλους χαρακτήρες, ελέγχουμε από το API του GeoNames σε ποια χώρα ανήκει το user input Στην συνέχεια χτίζουμε το JSON response του service για επιστροφή.
Επίλυση προβλημάτων(4/5) Προβλήματα απεικόνισης όπως ποιος είναι ο καλύτερος τρόπος για να απεικονίσουμε την κίνηση σε μια χώρα Παράδειγμα : απεικόνιση tweet με σημεία Το πλήθος των tweet αυξανει κατα πολυ τα σημεια Χρήση τύπου choropleth ώστε με μάτια ο χρήστης να μπορεί να αντιληφθεί την κίνηση του hashtag
Απεικόνιση με σημεία https:// nucloud.co m/blog/mus cle-car-hotspotsinteractivedata-map/
Επίλυση προβλημάτων(5/5)
Διαδικασία απεικόνισης κίνησης(2) Αρχή Εισαγωγή λέξης κλειδί ή Hashtag από τον χρήστη Συλλογή και επεξεργασία των πεδίων location για κάθε χρήστη Σύνταξη και δημιουργιά JSON απάντησης απο το service Κλήση του twitter API για να μας δώσει τα tweets που περιέχουν την λέξη κλειδί Κλήση GeoNames.Org API για αναγνώριση τής χώρας κάθε χρήστη Απεικόνιση απάντησης με χρήση d3.js σε μορφη Choropleth map Τέλος
D3.js Javascript βιβλιοθήκη χειρίζεται έγγραφα με τρόπο τέτοιο που ταιριάζει στα δεδομένα που το τροφοδοτούμε Χρήση των HTML, CSS και SVG για επίτευξη του αποτελέσματος Data driven transformation https://github.com/mbostock/d3
GeoJSON Open standard format για την αναπαράσταση γεωγραφικών χαρακτηριστικών Χρησιμοποιεί σημεία, γραμμές και πολύγωνα καθώς και συλλογές από τα παραπάνω για την αναπαράσταση οποιουδήποτε χαρακτηριστικού Παράδειγμα: { "type": "Polygon", } "coordinates": [ ] [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
GeoJSON https://en.wikipedia.org/wiki/geojson
Παράδειγμα χρησης (1/3)
Παράδειγμα χρησης (2/3)
Παράδειγμα χρησης (3/3)
Μηχανισμός πρότασης hashtag (1/2) Χρήση του μηχανισμού πρότασης λέξεων κλειδιών στον χρήστη σύμφωνα με την τελευταία αναζήτηση του.
Μηχανισμός πρότασης hashtag (2/2) Εξετάζονται εξατομικευμένα οι τελευταίες αναζητήσεις του χρήστη. Στις αναρτήσεις που περιέχουν το hashtag της αναζήτησης του, ελέγχεται η ύπαρξη περισσοτέρων του ενός hashtag. Στην περίπτωση αυτή, τα επιπλέον αυτά hashtags είναι αυτά που εμφανίζονται ως recommended.
Σύνοψη Μπορούμε να αντιληφθούμε εξελίξεις όσον αφορά συγκεκριμένα θέματα μελετώντας απλά την κίνηση τους και συγκρίνοντας την real-time κίνηση με την κίνηση που είχε μέσα στην εβδομάδα. Μπορούμε να μάθουμε περισσότερες λεπτομέρειες για την λέξη κλειδί χρησιμοποιώντας τον μηχανισμό πρότασης καθώς και την πρόβλεψη λέξεων κλειδιών(in progress) Η επιλογή του τρόπου καθώς και των μηχανισμών απεικόνισης είναι εξίσου σημαντική με τα δεδομένα καθεαυτά για την καλύτερη αξιοποίηση τους.
Ευχαριστώ πολύ Ερωτήσεις;