Πώς ανέλυσα τις τάσεις προγραμματιστών με έναν συγκεντρωτικό πίνακα JavaScript και μια βιβλιοθήκη γραφημάτων

Γεια, κοινότητα dev!

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

Προκλήσεις

Από την αρχή, αντιμετώπισα μια πρόκληση να βρω ένα εργαλείο που θα μπορούσε να χειριστεί την επεξεργασία 100k εγγραφών κειμένου. Δεδομένου ότι είναι ένα τεράστιο σύνολο δεδομένων, το εργαλείο πρέπει να είναι ισχυρό και να χρησιμοποιεί όσο το δυνατόν λιγότερη μνήμη προγράμματος περιήγησης. Θα πρέπει να είναι απλό στη χρήση ταυτόχρονα. Ευτυχώς, βρήκα ένα στοιχείο περιστρεφόμενου πίνακα ιστού . Φαινόταν πολλά υποσχόμενο με την πρώτη ματιά και με βοήθησε να ολοκληρώσω όλες τις προθέσεις μου σχετικά με την αναφορά.

Πέρα από τις δυνατότητες αναφοράς, παρατήρησα ότι υποστηρίζει την ενσωμάτωση με βιβλιοθήκες χαρτών. Επέλεξα το FusionCharts. Ενσωματώνεται επίσης με διαφορετικά πλαίσια JavaScript και παρέχει εξελιγμένα γραφήματα. Χρησιμοποιώντας έναν συνδυασμό περιστρεφόμενου πίνακα και γραφήματος, κατάφερα να δημιουργήσω ένα μικροσκοπικό έργο για την ανάλυση δεδομένων και την οπτικοποίηση.

Στόχοι και στόχοι

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

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

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

Είμαι ενθουσιασμένος που θα μοιραστώ μαζί σας τη διαδικασία δημιουργίας ενός διαδραστικού πίνακα εργαλείων που διαθέτει λειτουργίες διάτρησης, μεταφοράς και απόθεσης και γραφήματος

Ας αρχίσουμε!

Εγκαταστήστε τις βιβλιοθήκες στο έργο σας

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

Εάν θέλετε να δημιουργήσετε πολλά γραφήματα, προσθέστε περισσότερα κοντέινερ για αυτά.

Ενσωματώστε έναν συγκεντρωτικό πίνακα

Προσθέστε ένα εργαλείο αναφοράς στο έργο σας και ορίστε τη βασική του διαμόρφωση:

var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true });

Για να μάθετε πώς να επεκτείνετε τις δυνατότητες του συγκεντρωτικού πίνακα με διάφορες ιδιότητες, μπορείτε να δείτε το άρθρο σχετικά με την κλήση API init.

Προετοιμάστε και εισαγάγετε τα δεδομένα

Ως σύνολο δεδομένων, έχω επιλέξει τα αποτελέσματα της έρευνας του προγραμματιστή. Περιέχει 195 MB ακατέργαστων δεδομένων κειμένου.

Ένας τρόπος φόρτωσης των δεδομένων σε έναν συγκεντρωτικό πίνακα είναι ο καθορισμός της λειτουργίας που επιστρέφει τα δεδομένα JSON. Αλλά καθώς δεν μπορώ να δείξω ολόκληρα τα δεδομένα σε μια επίδειξη CodePen λόγω των περιορισμών του στο μέγεθος κώδικα. Για να μην γεμίσω τον κώδικά μου, έχω φορτώσει ένα αρχείο στο CDN και έχω ορίσει μια διαδρομή στην πηγή δεδομένων μου:

dataSource: { filename: "surveyresults.csv" }

Ορίστε μια φέτα

Τακτοποιήστε τις ιεραρχίες στο πλέγμα - τοποθετήστε τις σε σειρές, στήλες και μέτρα. Επίσης, μπορείτε να προσθέσετε φίλτρα αναφοράς για να διατηρήσετε το πλέγμα σας καθαρό και να ταξινομήσετε τα δεδομένα για να δείτε πρώτα τις πιο σχετικές εγγραφές.

"slice": { "reportFilters": [{ "uniqueName": "Country" }, { "uniqueName": "Gender" } ], "rows": [{ "uniqueName": "DevType" }], "columns": [{ "uniqueName": "[Measures]" }], "measures": [{ "uniqueName": "Salary", "aggregation": "average" }], "sorting": { "column": { "type": "desc", "tuple": [], "measure": { "uniqueName": "Salary", "aggregation": "average" } } } }

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

Συνδέστε γραφήματα και περιστροφικό πλέγμα μαζί

Ας κάνουμε τα γραφήματα να εμφανίζουν τα δεδομένα από τον συγκεντρωτικό πίνακα. Για αυτό, επισυνάψτε ένα πρόγραμμα χειρισμού συμβάντων στο reportcompleteσυμβάν του Flexmonster. Ενεργοποιείται μόλις το περιστροφικό πλέγμα είναι έτοιμο να λειτουργήσει ως πάροχος δεδομένων.

Ο κωδικός έχει ως εξής:

reportcomplete: function() { pivot.off("reportcomplete"); createFusionChart(); }

Τώρα ας φτάσουμε στο μέρος ενός κώδικα που θα κάνει έναν πίνακα ελέγχου διαδραστικό.

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

Στο createFusionChart () , χρησιμοποιήστε τη μέθοδο getData () στην περιστροφική παρουσία πίνακα για να λάβετε τα δεδομένα από την τρέχουσα αναφορά ή το slice που χρειάζεστε. Αυτή η μέθοδος την προ-επεξεργάζεται στον δεδομένο τύπο γραφήματος και μεταβιβάζει τα δεδομένα στο callbackHandler και το updateHandler . Αυτοί οι χειριστές καθορίζουν τι συμβαίνει μόλις εμφανιστεί η αναφορά για πρώτη φορά ή όταν τα δεδομένα ενημερώνονται (φιλτραρισμένα, ταξινομημένα κ.λπ.). Στο callbackHandler , πρέπει να δημιουργήσετε ένα γράφημα και να τα στείλετε τα δεδομένα σε αυτό. Στο updateHandler , απλώς ορίστε τα ενημερωμένα δεδομένα στο γράφημα και δώστε τα ξανά.

Ζήτω! Το γράφημα και ο συγκεντρωτικός πίνακας αποδίδονται στην ίδια σελίδα. Τώρα το γράφημα εμφανίζει τα δεδομένα από το πλέγμα και αντιδρά σε τυχόν αλλαγές που εφαρμόζονται στην αναφορά.

Με παρόμοιο τρόπο, μπορείτε να προσθέσετε όσα γραφήματα χρειάζεστε.

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

Αυτό που έχω

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

δημογραφικά στοιχεία

Από το γράφημα φαίνεται εύκολα ότι οι περισσότεροι προγραμματιστές που συμμετείχαν στην έρευνα ζουν στις Ηνωμένες Πολιτείες, την Ινδία και τον Καναδά.

Κατοχή

Περισσότεροι από 18.000 ερωτηθέντες είναι μαθητές πλήρους φοίτησης:

Επιπλέον, περίπου 80 χιλιάδες προγραμματιστές λένε ότι κωδικοποιούν εκτός εργασίας στον ελεύθερο χρόνο:

Ήταν ενδιαφέρον να ανακαλύψουμε τους πιο κοινούς τύπους προγραμματιστών. Είναι προγραμματιστές back-end, full-stack και mobile:

Εκπαίδευση

Οι περισσότεροι από τους ερωτηθέντες έχουν τουλάχιστον πτυχίο:

More than 50.34K of developers majored in computer science, computer and software engineering:

More than 23K of developers learned to code within the past five years:

Frameworks, libraries, and tools

Let’s get to the most desired frameworks, libraries, and tools with which developers want to work in the next year:

As you see, .NET Core, Node.js, React and TensorFlow got the most votes.

Bringing it all together

Using developer-friendly APIs and guides of the pivot table and a charting library, I’ve managed to get a big picture of the trends in the developer community. I encourage you to dive deeper into data and share unique insights with your friends and teammates.

I hope this tutorial will inspire you to create your visualization project.

Thank you for reading!

Useful links

  • CodePen live demo
  • How to integrate Flexmonster with FusionCharts
  • FusionCharts: γκαλερί γραφημάτων