Έγγραφα βάσει δεδομένων ή D3.js , είναι «μια βιβλιοθήκη JavaScript για χειρισμό εγγράφων με βάση δεδομένα». Εναλλακτικά, το D3.js είναι μια βιβλιοθήκη οπτικοποίησης δεδομένων. Αναπτύχθηκε από Μάικ Μποστόκ με την ιδέα να γεφυρωθεί το χάσμα μεταξύ της στατικής απεικόνισης δεδομένων, και διαδραστικό και κινούμενες απεικονίσεις δεδομένων.
Το D3 είναι ένα ισχυρή βιβλιοθήκη με έναν τόνο χρήσεων. Σε αυτό το σεμινάριο, θα συζητήσω μια ιδιαίτερα συναρπαστική εφαρμογή του D3: χαρτογράφηση. Θα αντιμετωπίσουμε τις κοινές προκλήσεις της δημιουργίας ενός χρήσιμου και ενημερωτικού χάρτη ιστού και θα δείξουμε πώς σε κάθε περίπτωση, το D3.js δίνει ικανοί προγραμματιστές JavaScript όλα όσα χρειάζονται φτιάξτε χάρτες κοίτα και νιώθεις όμορφα.
Το D3.js μπορεί να δεσμεύσει τυχόν αυθαίρετα δεδομένα σε ένα μοντέλο αντικειμένου εγγράφου (DOM) και, στη συνέχεια, μέσω της χρήσης JavaScript, CSS, HTML και SVG, να εφαρμόσει μετασχηματισμούς στο έγγραφο που καθοδηγούνται από αυτά τα δεδομένα. Το αποτέλεσμα μπορεί να είναι απλή έξοδος HTML ή διαδραστικά γραφήματα SVG με δυναμική συμπεριφορά όπως κινούμενα σχέδια, μεταβάσεις και αλληλεπίδραση. Όλοι οι μετασχηματισμοί και οι αποδόσεις δεδομένων πραγματοποιούνται από την πλευρά του πελάτη στο πρόγραμμα περιήγησης.
Στο απλούστερο, το D3.js μπορεί να χρησιμοποιηθεί για χειρισμό ενός DOM. Εδώ είναι ένα απλό παράδειγμα όπου το D3.js χρησιμοποιείται για την προσθήκη ενός στοιχείου παραγράφου σε ένα κενό σώμα εγγράφου, με κείμενο 'Hello World':
D3 Hello World d3.select('body').append('p').text('Hello World'); Η ισχύς του D3.js, ωστόσο, είναι στην ικανότητα οπτικοποίησης δεδομένων. Για παράδειγμα, μπορεί να χρησιμοποιηθεί για τη δημιουργία διαγράμματα . Μπορεί να χρησιμοποιηθεί για τη δημιουργία κινούμενα γραφήματα . Μπορεί να χρησιμοποιηθεί ακόμη και ενοποίηση και κίνηση διαφορετικών συνδεδεμένων γραφημάτων .
Αλλά το D3.js μπορεί να χρησιμοποιηθεί για πολύ περισσότερα από απλώς χειρισμό DOM ή για να σχεδιάσετε γραφήματα. Το D3.js είναι εξαιρετικά ισχυρό όταν πρόκειται για χειρισμό γεωγραφικές πληροφορίες . Ο χειρισμός και η παρουσίαση των γεωγραφικών δεδομένων μπορεί να είναι πολύ δύσκολος, αλλά η δημιουργία ενός χάρτη με D3.js είναι αρκετά απλή.
Ακολουθεί ένα παράδειγμα D3.js που θα σχεδιάσει έναν παγκόσμιο χάρτη με βάση τα δεδομένα που είναι αποθηκευμένα σε μορφή δεδομένων συμβατή με JSON. Απλώς πρέπει να ορίσετε το μέγεθος του χάρτη και τη γεωγραφική προβολή που θα χρησιμοποιήσετε (περισσότερα για αυτό αργότερα), να ορίσετε ένα στοιχείο SVG, να το προσθέσετε στο DOM και να φορτώσετε τα δεδομένα χάρτη χρησιμοποιώντας το JSON. Το στυλ χαρτών γίνεται μέσω CSS.
D3 World Map path { stroke: white; stroke-width: 0.5px; fill: black; } var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); var path = d3.geo.path() .projection(projection); var g = svg.append('g'); d3.json('world-110m2.json', function(error, topology) { g.selectAll('path') .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append('path') .attr('d', path) }); Σχετίζεται με: Προς ανανεώσιμα διαγράμματα D3.js Για αυτό το σεμινάριο D3.js, λάβετε υπόψη ότι η κατασκευή χαρτών λειτουργεί καλύτερα με δεδομένα μορφοποιημένα σε μορφές JSON, ιδιαίτερα GeoJSON και TopoJSON Προδιαγραφές.
Το GeoJSON είναι «μια μορφή κωδικοποίησης μιας ποικιλίας δομών γεωγραφικών δεδομένων». Έχει σχεδιαστεί για να αντιπροσωπεύει διακριτά αντικείμενα γεωμετρίας ομαδοποιημένα σε συλλογές χαρακτηριστικών ζευγών ονομάτων / τιμών.
Το TopoJSON είναι μια επέκταση του GeoJSON, το οποίο μπορεί να κωδικοποιήσει τοπολογία όπου οι γεωμετρίες «συρράπτονται μαζί από τμήματα κοινής γραμμής που ονομάζονται τόξα». Το TopoJSON εξαλείφει τον πλεονασμό αποθηκεύοντας σχεσιακές πληροφορίες μεταξύ γεωγραφικών χαρακτηριστικών και όχι απλώς χωρικών πληροφοριών. Ως αποτέλεσμα, η γεωμετρία είναι πολύ πιο συμπαγής και συνδυασμένη όπου οι γεωμετρίες μοιράζονται χαρακτηριστικά. Αυτό προκύπτει με 80% μικρότερο τυπικό αρχείο TopoJSON από το αντίστοιχο GeoJSON.
Έτσι, για παράδειγμα, δεδομένου ενός χάρτη με πολλές χώρες που συνορεύουν μεταξύ τους, τα κοινόχρηστα μέρη των συνόρων θα αποθηκευτούν δύο φορές στο GeoJSON, μία φορά για κάθε χώρα και στις δύο πλευρές των συνόρων. Στο TopoJSON, θα είναι μόνο μία γραμμή.
Σήμερα, οι πιο δημοφιλείς βιβλιοθήκες χαρτογράφησης είναι Χάρτες Google και Φυλλάδιο . Έχουν σχεδιαστεί για τη γρήγορη και εύκολη πρόσβαση σε 'χάρτες' στο Διαδίκτυο. Το 'Slippy maps' είναι ένας όρος που αναφέρεται σε σύγχρονους χάρτες ιστού που υποστηρίζονται από JavaScript και επιτρέπουν ζουμ και μετακίνηση γύρω από τον χάρτη.
ψηφιακά μέσα εναντίον γραφιστικής
Το φυλλάδιο είναι μια εξαιρετική εναλλακτική λύση στους Χάρτες Google. Πρόκειται για μια βιβλιοθήκη ανοιχτού κώδικα JavaScript σχεδιασμένη να δημιουργεί φιλικούς προς κινητά διαδραστικούς χάρτες, έχοντας κατά νου την απλότητα, την απόδοση και τη χρηστικότητα. Το Leaflet είναι το καλύτερο όταν αξιοποιεί τη μεγάλη ποικιλία χαρτών που βασίζονται σε ράστερ που είναι διαθέσιμοι στο Διαδίκτυο και φέρνει την απλότητα της εργασίας με χάρτες με πλακάκια και τις δυνατότητες παρουσίασής τους.
Το φυλλάδιο μπορεί να χρησιμοποιηθεί με μεγάλη επιτυχία όταν σε συνδυασμό με τις δυνατότητες χειρισμού δεδομένων του D3.js και για τη χρήση του D3.js για γραφικά που βασίζονται σε διανυσματικά. Ο συνδυασμός τους αναδεικνύει το καλύτερο και στις δύο βιβλιοθήκες.
Οι Χάρτες Google είναι πιο δύσκολο να συνδυαστούν με το D3.js, καθώς οι Χάρτες Google δεν είναι ανοιχτού κώδικα. Είναι δυνατή η χρήση Χάρτες Google και D3 από κοινού, αλλά αυτό περιορίζεται κυρίως στην επικάλυψη δεδομένων με D3.js σε χάρτες φόντου των Χαρτών Google. Η βαθύτερη ενσωμάτωση δεν είναι πραγματικά δυνατή, χωρίς πειρατεία.
Το ερώτημα για το πώς να προβάλλετε χάρτες της τρισδιάστατης σφαιρικής Γης σε δισδιάστατες επιφάνειες είναι ένα παλιό και περίπλοκο πρόβλημα . Η επιλογή της καλύτερης προβολής για έναν χάρτη είναι μια σημαντική απόφαση για κάθε χάρτη ιστού.
Στον παραπάνω οδηγό του παγκόσμιου χάρτη D3.js, χρησιμοποιήσαμε το Σφαιρικός Mercator σύστημα συντεταγμένων προβολής καλώντας d3.geo.mercator(). Αυτή η προβολή είναι επίσης γνωστή ως Web Mercator . Αυτή η προβολή διαδόθηκε από την Google κατά την εισαγωγή τους Χάρτες Google . Αργότερα, άλλες υπηρεσίες Ιστού υιοθέτησαν επίσης την προβολή, δηλαδή OpenStreetMap , Χάρτες Bing , Εδώ Χάρτες και MapQuest . Αυτό έχει κάνει το Spherical Mercator μια πολύ δημοφιλή προβολή για διαδικτυακούς ολισθηρούς χάρτες.
Όλες οι βιβλιοθήκες χαρτογράφησης υποστηρίζουν την προβολή Spherical Mercator από το κουτί. Εάν θέλετε να χρησιμοποιήσετε άλλες προβολές, θα πρέπει να χρησιμοποιήσετε, για παράδειγμα, το Proj4js βιβλιοθήκη, η οποία μπορεί να κάνει οποιαδήποτε μεταμόρφωση από το ένα σύστημα συντεταγμένων στο άλλο. Στην περίπτωση του Leaflet, υπάρχει ένα Φυλλάδιο Proj4 συνδέω. Στην περίπτωση των Χαρτών Google, δεν υπάρχει τίποτα.
τι κάνει ένας CFO σε μια startup
Το D3.js φέρνει χαρτογραφικές προβολές σε ένα εντελώς νέο επίπεδο με ενσωματωμένη υποστήριξη για πολλά διαφορετικά γεωγραφικές προβολές . Το D3.js μοντελοποιεί γεωγραφικές προβολές ως πλήρεις γεωμετρικούς μετασχηματισμούς, πράγμα που σημαίνει ότι όταν οι ευθείες γραμμές προβάλλονται σε καμπύλες, το D3.js εφαρμόζει διαμορφώσιμη προσαρμοστική δειγματοληψία σε υποδιαίρεση γραμμών και εξαλείφει τα αντικείμενα προβολής. ο Πρόσθετο Extended Geographic Projections D3 αυξάνει τον αριθμό των υποστηριζόμενων προβολών σε πάνω από 40. Είναι ακόμη δυνατό να δημιουργηθεί μια εντελώς νέα προσαρμοσμένη προβολή χρησιμοποιώντας d3.geo.projection και d3.geo.projectionMutator.
Όπως αναφέρθηκε προηγουμένως, ένα από τα κύρια πλεονεκτήματα του D3.js είναι η εργασία με διανυσματικά δεδομένα. Για να χρησιμοποιήσετε raster δεδομένα υπάρχει η επιλογή να συνδυάσετε το D3.js με το Leaflet. Αλλά υπάρχει επίσης μια επιλογή να κάνετε τα πάντα με τη χρήση μόνο του D3.js d3.geo.tile για να δημιουργήσω ολισθηροί χάρτες . Ακόμα και με μόνο D3.js μόνο, οι άνθρωποι κάνουν υπέροχα πράγματα με χάρτες ράστερ.
Μια από τις μεγαλύτερες προκλήσεις στην κλασική χαρτογραφία είναι γενίκευση χάρτη . Θέλετε να έχετε όσο το δυνατόν πιο λεπτομερή γεωμετρία, αλλά αυτά τα δεδομένα πρέπει να προσαρμοστούν στην κλίμακα του χάρτη που εμφανίζεται. Έχοντας πολύ υψηλή ανάλυση δεδομένων, αυξάνεται ο χρόνος λήψης και επιβραδύνεται η απόδοση, ενώ η πολύ χαμηλή ανάλυση καταστρέφει τις λεπτομέρειες και τις τοπολογικές σχέσεις. Οι ολισθηροί χάρτες που χρησιμοποιούν διανυσματικά δεδομένα μπορεί να αντιμετωπίσουν ένα μεγάλο πρόβλημα με τη γενίκευση χαρτών.
Μια επιλογή είναι να κάνετε εκ των προτέρων γενίκευση χάρτη: να έχετε διαφορετικά σύνολα δεδομένων σε διαφορετικές αναλύσεις και, στη συνέχεια, να εμφανίσετε το κατάλληλο σύνολο δεδομένων για την τρέχουσα επιλεγμένη κλίμακα. Αυτό όμως πολλαπλασιάζει τα σύνολα δεδομένων, περιπλέκει τη συντήρηση δεδομένων και είναι επιρρεπές σε σφάλματα. Ωστόσο, οι περισσότερες βιβλιοθήκες χαρτογράφησης περιορίζονται σε αυτήν την επιλογή.
Η καλύτερη λύση είναι να κάνετε τη γενίκευση χαρτών εν κινήσει. Και έρχεται και πάλι το D3.js, με τις ισχυρές δυνατότητες χειρισμού δεδομένων. Το D3.js επιτρέπει απλοποίηση γραμμής που πρέπει να γίνει στο πρόγραμμα περιήγησης .
Το D3.js δεν είναι εύκολο να κυριαρχήσει και έχει μια απότομη καμπύλη μάθησης. Είναι απαραίτητο να εξοικειωθείτε με πολλές τεχνολογίες, δηλαδή αντικείμενα JavaScript, τη σύνταξη jQuery chaining, SVG και CSS, και φυσικά API του D3 . Επιπλέον, κάποιος πρέπει να έχει λίγη δεξιότητα σχεδιασμού για να δημιουργήσει ωραία γραφικά στο τέλος. Ευτυχώς, το D3.js έχει μια μεγάλη κοινότητα και υπάρχουν πολλοί πόροι για τους οποίους μπορούν να ανακαλύψουν οι άνθρωποι. Ένα εξαιρετικό σημείο εκκίνησης για την εκμάθηση του D3 είναι αυτά τα μαθήματα .
Αν σας αρέσει να μαθαίνετε εξετάζοντας παραδείγματα, ο Mike Bostock έχει μοιραστεί περισσότερα από 600 παραδείγματα D3.js στην ιστοσελίδα του. Όλα τα παραδείγματα D3.js έχουν git repository για έλεγχο έκδοσης και είναι forkable, cloneable και σχόλια.
Εάν χρησιμοποιείτε το CartoDB, θα χαρείτε να το ακούσετε Το CartoDB κάνει τους χάρτες D3 ένα αεράκι .
Και για ένα μικρό μπόνους στο τέλος, εδώ είναι ένα από τα αγαπημένα μου παραδείγματα που δείχνουν τα καταπληκτικά πράγματα που μπορεί να κάνει η D3:
