Οπτικοποίηση δεδομένων με 1 δισ. Αναγνωρίσεις μουσικής Shazam

Ενώ ήμουν στο πανεπιστήμιο, εντάχθηκα στη Shazam ως προγραμματιστής ιστού μερικής απασχόλησης. Έμεινα στο Shazam για 5 ευχάριστα χρόνια. Αυτή η ανάρτηση αφορά ένα έργο hackday στο οποίο δούλευα. Το έργο περιλαμβάνει τη σχεδίαση ενός δισεκατομμυρίου αναγνωρισμών Shazam σε έναν κενό καμβά και στη συνέχεια την παρατήρηση του αποτελέσματος.

Αυτή η ανάρτηση αγγίζει επίσης τη διαδικασία που χρησιμοποίησα για να δημιουργήσω τα γραφικά.

Τι είναι η «αναγνώριση Shazam»

Σκεφτείτε μια αναγνώριση Shazam έτσι. Ανοίγετε το Shazam, την εφαρμογή για κινητά και το έχετε «ακούσει» για ένα κομμάτι μουσικής που παίζει στο παρασκήνιο. Η αναγνώριση είναι η επιτυχής αναγνώριση του τραγουδιού.

Δεδομένα τοποθεσίας

Ένας χρήστης μπορεί να επιλέξει να μοιραστεί τα δεδομένα τοποθεσίας του με το Shazam. Στη συνέχεια, η Shazam θέτει ορισμένα από τα ανώνυμα δεδομένα τοποθεσίας (γεωγραφικό πλάτος και μήκος) στη διάθεση των υπαλλήλων, ανάλογα με την περίπτωση χρήσης τους.

Η ανωνυμοποίηση δεδομένων τοποθεσίας για οπτικοποίηση ήταν μια υπέροχη εμπειρία. Μου δίδαξε πολλά σχετικά με την επεξεργασία μεγάλων συνόλων δεδομένων, οπτικοποιήσεις που λένε μια ιστορία και οπτικοποιήσεις που φαίνονται όμορφες αλλά δεν κάνουν τίποτα άλλο.

Η οπτικοποίηση

Ένα πράγμα που πρέπει να γνωρίζετε, όλες οι απεικονίσεις ακολουθούν αυτήν την ιδέα: Μια κουκκίδα αντιπροσωπεύει μια επιτυχημένη αναγνώριση. Οι κουκίδες απεικονίζονται σε ένα σύστημα γεωγραφικών συντεταγμένων Αυτό δεν είναι το ίδιο με τη λήψη ενός Χάρτη Google και στη συνέχεια τη σχεδίαση δεικτών τοποθεσίας πάνω του.

Έχω χρησιμοποιήσει το χρώμα για να κάνω διάκριση μεταξύ Android και iOS. Μπορείς να μαντέψεις ποιο είναι; Συμβουλή: Κοιτάξτε τις μεγάλες πόλεις. Ποιος τύπος συσκευής πιστεύετε ότι είναι διαδεδομένος εκεί;

  • Android : Κόκκινο
  • iOS : Μπλε

Αν κοιτάξετε προσεκτικά τους χάρτες κουκκίδων, μπορείτε να παρατηρήσετε σαφείς ορισμούς για τους δρόμους. Αυτό μπορεί να εξηγηθεί από επιβάτες που παίζουν μουσική Shazaming από ηχεία αυτοκινήτου.

Έκανα επίσης χάρτες με εναλλακτικά σχέδια χρωμάτων.

Διαδραστικοί χάρτες

Σκέφτηκα ότι θα ήταν διασκεδαστικό να οπτικοποιήσετε τον χάρτη διαδραστικά. Με τον ίδιο τρόπο θα σύρετε / κάνετε ζουμ σε έναν χάρτη Google, τι γίνεται αν θα μπορούσατε επίσης να σύρετε / ζουμ έναν χάρτη Shazam; Αυτό το στοιχείο διαδραστικότητας είναι αυτό που ενθαρρύνει τους ανθρώπους να χρησιμοποιούν, να εξερευνούν και να μαθαίνουν από τους χάρτες. Αντί να είναι απλώς κάτι στατικό που ποτέ δεν το επισκέπτεστε ξανά.

Για να το κάνω αυτό, χρειάζομαι να δημιουργήσω εκατομμύρια πλακίδια χάρτη. Για παράδειγμα, εδώ είναι μερικά πλακίδια του Λονδίνου, που λαμβάνονται από τους Χάρτες Google.

Κάθε πλακίδιο είναι μια ξεχωριστή εικόνα. Σημειώστε τα διαφορετικά επίπεδα ζουμ. Όπως μπορείτε να μαντέψετε, όταν σύρετε και κάνετε ζουμ σε έναν χάρτη Google, σας παρουσιάζει πολλές διαφορετικές εικόνες, οι εικόνες αναφέρονται ως πλακίδια χάρτη.

Εδώ είναι τα πλακάκια του χάρτη Shazam.

Συνολικά, δημιούργησα δεδομένα πλακιδίων αξίας άνω των 40 GB. Αυτό οφείλεται στο επίπεδο ζουμ που είχα καθορίσει. Ένα υψηλό επίπεδο ζουμ σημαίνει ότι όσοι βλέπουν τον χάρτη μπορούν να κάνουν ζουμ σε μεγαλύτερο επίπεδο.

Κατά την εξέταση των οπτικοποιήσεων με συναδέλφους, συνεχίζαμε να αναρωτιόμαστε: Ποιο «μέρος» βρισκόταν στη θέση των μεγάλων συστάδων. Για παράδειγμα, ήταν ένας χώρος μουσικής όπου οι άνθρωποι χρησιμοποιούσαν συχνά το Shazam;

Για να βοηθήσω να απαντήσω σε αυτήν την ερώτηση, είχα μια ιδέα: Τι γίνεται αν χρησιμοποιούσα μια υπηρεσία τοποθεσίας για να προσδιορίσω ποια μέρη είναι σήμερα παρόντα. Για να το κάνω αυτό, χρησιμοποίησα το API Χαρτών Google. Κάθε φορά που κάνετε κύλιση σε μια νέα τοποθεσία, ρωτάω το API Χαρτών Google για να θέσω την ερώτηση: Ποια μέρη βρίσκονται σε αυτήν την τοποθεσία;

Κατά τη χρήση αυτής της δυνατότητας, αρχίσαμε να συνειδητοποιούμε ότι συστάδες κουκκίδων θα ήταν συνήθως αποτέλεσμα: καφετέριες, νυχτερινά κέντρα, εμπορικά κέντρα, καταστήματα και άλλα.

Συγχρονίστηκα επίσης ένας χάρτης Mapbox (παρόμοιος με τους Χάρτες Google) έτσι ώστε να σύρετε και να κάνετε ζουμ στον χάρτη Shazam, ο άλλος «κανονικός» χάρτης θα κινείται επίσης. Αυτό σας επιτρέπει να προσδιορίσετε γρήγορα ποια γεωγραφική τοποθεσία κοιτάζετε αυτήν τη στιγμή

Ο κώδικας

Όπως με όλα όσα κάνω, επωφελούμαι μόνο από τη σκληρή δουλειά που κάνουν άλλοι στην κοινότητά μας. Όλη η πίστωση πηγαίνει στον Eric Fischer για την εξαιρετική δουλειά τους σε βάσεις δεδομένων. Εάν ακολουθήσετε τις οδηγίες σε αυτό το αποθετήριο Github, θα μπορείτε να κάνετε τις δικές σας οπτικοποιήσεις. Θα χρειαστείτε ένα σύνολο δεδομένων που αποτελείται από σημεία γεωγραφικού μήκους και γεωγραφικού πλάτους, μπορεί να βρείτε κάτι στο Github, για παράδειγμα, φοβερά-δημόσια-σύνολα δεδομένων.

Εάν καταλήξετε να το δοκιμάσετε: εδώ είναι μερικές σημειώσεις που έφτιαξα για τον εαυτό μου τις οποίες μπορεί να βρείτε χρήσιμες.

Πρώτον, χρειάζεστε μια μεγάλη λίστα με γεωγραφικά πλάτη και γεωγραφικά πλάτη. Ωστόσο, για να αποκτήσετε ακόμη και αυτά τα δεδομένα, ίσως χρειαστεί να κάνετε επιπλέον δουλειά. Στην περίπτωσή μου, το πήρα από ένα εσωτερικό API Shazam. Χρησιμοποίησα μια μονάδα κόμβου που ονομάζεται fast-csv για την ανάλυση δεδομένων. Η χρήση ροών με αυτόν τον τρόπο καθιστά απλή την ανάλυση μεγάλων δεδομένων (αξίας gigabyte).

csv.fromStream(stream,{headers : true}).on(‘data’, handleRecord);

Η λειτουργία handleRecord το κάνει:

function handleRecord(record) { const location = tag.location.latitude + ‘,’ + tag.location.longitude; console.log(location);}

Η έξοδος μοιάζει με:

lat,lon
-22.1028,166.1833
29.8075,-95.4113
51.2168,-0.8045
27.3007,-82.5221
20.5743,-100.3793
-36.0451,146.9267
26.7554,-81.4237

Σε αυτό το σημείο, μπορείτε να αρχίσετε να το συνδέετε σε χάρτες δεδομένων (υπάρχουν αναλυτικές οδηγίες στην τεκμηρίωση του έργου).

Μετά την τεκμηρίωση αρκετά, έφτασα σε ένα σημείο όπου θα μπορούσα να δημιουργήσω την τελική εικόνα. Για να δημιουργήσετε έναν χάρτη δεδομένων του Λονδίνου, καθορίστε το πλαίσιο οριοθέτησης ως συντεταγμένες τοποθεσίας που θέλετε να καταγράψετε:

./render -A -- output 14 51.641353 -0.447693 51.333508 0.260925 > london.png

Επειδή δημιούργησα τους ίδιους στατικούς χάρτες τόσο συχνά (όταν πειραματίζομαι με το χρώμα για παράδειγμα), αποφάσισα να γράψω σε ολόκληρη τη διαδικασία. Όντας προγραμματιστής ιστού, έκανα όλα αυτά στο Node.js, ωστόσο ένα απλό σενάριο Bash θα ήταν καλό. Πρώτα, έφτιαξα ένα αντικείμενο που περιείχε όλους τους χάρτες που ήθελα να αποδώσω.

Τότε ήταν μια περίπτωση κατασκευής της εντολής που είδατε νωρίτερα, αλλά για κάθε καταχώριση τοποθεσίας σε αυτό το μπλοκ JSON που βλέπετε στην παραπάνω εικόνα.

Παρουσίαση

Στο Shazam, υπήρχαν πολλές ημέρες χακαρίσματος. Τότε μετά από λίγους μήνες, ήταν μια μέρα επίδειξης. Παρουσιάσατε τη δουλειά της ημέρας χακαρίσματος την ημέρα επίδειξης. Δείχνοντας στους ανθρώπους αυτό το συγκεκριμένο έργο έγινε δεκτό.

Για εκείνους τους προγραμματιστές που δημιουργούν εφαρμογές γραμμής εντολών ή πηγαίνουν σε περιπέτειες αναδιαμόρφωσης κώδικα κατά τη διάρκεια των ημερών hack, σκεφτείτε ότι ένα κοινό ημέρας επίδειξης μπορεί να προτιμά περισσότερο οπτικά demos, παρά τεχνικά (αυτή ήταν η εμπειρία μου). Ένας τρόπος για αυτό είναι: blog σχετικά με το τι έχετε κάνει και μοιραστείτε τους πόρους μετά, παραλείποντας εντελώς μια ζωντανή επίδειξη. Ή ακόμα καλύτερα, μάθετε πώς μπορείτε να αποστάξετε τεχνικές έννοιες σε ένα μη τεχνικό κοινό, να εισαγάγετε περισσότερα γραφικά και να συνεχίσετε να προσφέρετε την επίδειξή σας σε ένα ζωντανό κοινό. Είναι πιο δύσκολο, αλλά πιο ικανοποιητικό.

Εικόνες υψηλής ανάλυσης των χαρτών δεδομένων

Σημείωση: Μπορείτε να μεγεθύνετε αυτές τις εικόνες με τη διεπαφή του Google Photos

  • Κόσμος - Παρατηρήστε ποιες χώρες / πόλεις έχουν υψηλή χρήση iOS
  • Ηνωμένο Βασίλειο - Παρατηρήστε τις πόλεις
  • Τορόντο
  • Σαν Φρανσίσκο
  • Παρίσι

συμπέρασμα

Είμαι ευγνώμων στη Shazam που μας ενθάρρυνε να μάθουμε νέες δεξιότητες και τεχνολογίες. Επίσης, ευχαριστώ τον Eric Fischer για την ανάπτυξη του έργου των βάσεων δεδομένων στην πρώτη θέση! Εάν έχετε πρόσβαση σε δεδομένα τοποθεσίας, σκεφτείτε τους πολλούς ενδιαφέροντες τρόπους οπτικοποίησής τους. Θα μπορούσατε επίσης να δοκιμάσετε να χρησιμοποιήσετε Tweets από το Twitter API, απλώς βεβαιωθείτε ότι έχουν συνημμένα δεδομένα τοποθεσίας.

Θέλετε να δείτε περισσότερα έτσι;

Ακολουθήστε με στο Twitter: @umaar και ενημερώστε με! Προσπαθώ να κάνω tweet πολλών πόρων ανάπτυξης ιστού.

Σας αρέσει και μοιραστείτε αν σας άρεσε να διαβάζετε το άρθρο μου και αφήνετε ένα σχόλιο με τις εμπειρίες σας στην οπτικοποίηση δεδομένων.