Ενισχύστε τα διαγράμματα D3.Js με βαθμίδες SVG

Ο Nadieh Bremer θα είναι στο Δημιουργία Λονδίνου Τον Σεπτέμβριο, όπου θα αποδείξει πώς να πάρει SVG πέρα ​​από απλά σχήματα , χρησιμοποιώντας το JavaScript, CSS και d3.js για να κάνουν τις απεικονίσεις δεδομένων ακόμα πιο διασκεδαστικές και συναρπαστικές. Κάντε κράτηση τώρα στο εισιτήριό σας !

Το D3.JS έχει αναλάβει τον κόσμο της απεικόνισης των διαδραστικών δεδομένων. Ένας τεράστιος αριθμός παραδειγμάτων μπορεί να βρεθεί, ο καθένας προβάλλει τη δική του διασκεδαστική και χρήσιμη συστροφή στη βιβλιοθήκη. Βλέπετε, το D3 δεν είναι βιβλιοθήκη χαρτογράφησης, αλλά κάτι πολύ καλύτερα. Σας δίνει μόνο τα βασικά εργαλεία για να δημιουργήσετε απεικονίσεις δεδομένων, και να σας επιτρέψει να δημιουργήσετε πρακτικά οτιδήποτε μπορείτε να σκεφτείτε. Παρόλο που μερικές ιδέες μπορεί να χρειαστούν περισσότερο χρόνο από τους άλλους, θα φτάσετε εκεί τελικά. Και αυτή η ελευθερία είναι ακριβώς αυτό που αγαπώ για το D3.

Στο πυρήνα του, κάθε οπτικό D3 είναι χτισμένο από στοιχεία SVG. Για παράδειγμα, για κάθε DataPoint σε ένα διάγραμμα scatterplot, για να δημιουργήσετε ένα διάγραμμα ράβδων, ως άξονα, παράλληλες συντεταγμένες ή γράφημα κλίσης, ως ετικέτες και το εξαιρετικά χρήσιμο για σχεδόν όλα τα άλλα. Επιπλέον, η SVGS είναι ανεξάρτητη από την ανάλυση, φαίνονται εξαιρετικά σε οποιαδήποτε οθόνη ή επίπεδο ζουμ.

Ακόμα κι αν χρησιμοποιείτε μόνο svgs για τα σχήματα τους, μπορείτε να δημιουργήσετε υπέροχες απεικονίσεις. Ωστόσο, μπορούν να κάνουν πολύ περισσότερα - σκεφτείτε για παράδειγμα τα φίλτρα SVG. Σε αυτό το σεμινάριο, θα κάνουμε μια βαθιά κατάδυση σε μια συγκεκριμένη πτυχή και θα εξετάσουμε μερικούς διαφορετικούς τρόπους, μπορεί να εφαρμοστεί για να φωτίσει μια απεικόνιση. Επιτρέψτε μου να σας συστήσω στις κλίσεις SVG!

Βρείτε όλα τα αρχεία που χρειάζεστε για αυτό το σεμινάριο εδώ .

Γραμμικές κλίσεις

Μερικές φορές όταν δημιουργώ ένα διάγραμμα γραμμής με μια μόνο γραμμή, αισθάνεται λίγο πολύ άδειο και μπορεί να χαθεί σε λευκό φόντο. Για να το ξεχωρίσετε περισσότερο, τοποθετώ μια ελαφριά κλίση κάτω από αυτό χρησιμοποιώντας D3's d3.svg.area Λειτουργία, γεμάτη με βαθμίδα SVG (βλέπε σχήμα 1).

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

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

 VAR EarthGRadient = SVG.Append ("DEFS")
.Append ("lineargradient")
.attr ("id", "acegradient")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Οι τελευταίες δύο γραμμές του παραπάνω κώδικα ορίζουν τον τρόπο με τον οποίο πρέπει να τρέξει η κλίση. Σκεφτείτε το ως αόρατη γραμμή: x1 και y1 είναι οι αρχικές θέσεις της αόρατης γραμμής και του x2 και y2 Υποδείξτε το τελικό του σημείο, για να δώσετε την κατεύθυνση της κλίσης. Είναι συχνά πιο εύκολο να τα ορίσετε ως ποσοστά, αν και είναι δυνατό να χρησιμοποιήσετε ακριβείς τοποθεσίες pixel. Από προεπιλογή, οι θέσεις αναφέρονται στο πλαίσιο οριοθέτησης του στοιχείου πάνω στο οποίο εφαρμόζεται η κλίση. Θέλουμε η κλίση να τρέξει κάθετα, έτσι x1 και x2 θα πρέπει να είναι το ίδιο ( 0% είναι μια χαρά), y1 πρέπει να είναι 0% και y2 100% .

Τώρα μπορούμε να ορίσουμε τα χρώματα της κλίσης. Απαιτούνται τουλάχιστον δύο χρώματα για μια κλίση, αλλά μπορείτε να χρησιμοποιήσετε όσο θέλετε. Για κάθε χρώμα στην κλίση που προσθέτετε ένα να σταματήσει στοιχείο. Μέσα σε αυτό καθορίζετε τη σκιά με Σταματήστε το χρώμα , και τη θέση (κατά μήκος της αόρατης γραμμής) όπου θέλετε αυτό το χρώμα να είναι καθαρό (το ακριβές χρώμα) με αντισταθμίζεται .

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

Earebrient.Append ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", "# 21825c")
.attr ("stop-oface", 0,6).
Earebrient.Append ("STOP")
.attr ("offset", "80%")
.attr ("stop-color", "white")
.attr ("stop-oface", 0); 

Τώρα δημιουργείται η γραμμική κλίση, μπορούμε να δημιουργήσουμε ένα διάγραμμα περιοχής και να το γεμίσουμε με την κλίση. Για να το κάνετε αυτό, χρησιμοποιήστε URL (# κλίσης-αναγνωριστικό) Στο ύφος πλήρωσης, μαζί με το μοναδικό αναγνωριστικό που ορίσαμε νωρίτερα.

 SVG.Append ("Διαδρομή")
.Style ("γεμίστε", "URL (#Areagridient)")
.attr ("d", περιοχή της περιοχής (dataset)); 

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

Ένας ομαλός μύθος

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

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

Εδώ παρουσιάζουμε τη θερμοκρασία έξω (βλ. Σχήμα 2). Το χρώμα αλλάζει σταδιακά για να υποδείξει τη θερμοκρασία που πηγαίνει από χαμηλή έως υψηλή. Για να το δείξετε σε ένα μύθο, πρόκειται να δημιουργήσουμε ένα μακρύ ορθογώνιο και να το γεμίσουμε με μια κλίση που πηγαίνει από αριστερά προς τα δεξιά. Μπορούμε να επαναχρησιμοποιούμε την κλίση που δημιουργήσαμε για το γράφημα γραμμής μας, αλλά αναστρέψαμε κατά 90 μοίρες (έτσι x2 τώρα τρέχει 100% , αντί όχι y2 ). Αν και γενικά μια παλέτα ουράνιου τόξου δεν συνιστάται στην απεικόνιση των δεδομένων, οι άνθρωποι χρησιμοποιούνται για να βλέπουν πολύχρωμους χάρτες θερμοκρασίας και έχω επιλέξει εννέα χρώματα για να χρησιμοποιήσετε στο παράδειγμά μας.

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

 SVG.Append ("DEFS")
.Append ("lineargradient")
.attr ("id", "LegendGradientmulti")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.Επιλέξτε ("STOP")
.δεδομένα([
{Offset: "0%", Χρώμα: "# 2C7BB6"},
{Offset: "12,5%", Χρώμα: "# 00A6CA"},
{Offset: "25%", Χρώμα: "# 00CCBC"},
{Offset: "37,5%", Χρώμα: "# 90EB9D"},
{Offset: "50%", Χρώμα: "# ffff8c"},
{Offset: "62,5%", Χρώμα: "# f9d057"},
{Offset: "75%", Χρώμα: "# F29E2E"},
{Offset: "87,5%", Χρώμα: "# E76818"},
{Offset: "100%", Χρώμα: "# D7191C"}])
.Ener (). Προσάρτημα ("STOP")
.attr ("offset", λειτουργία (d) {επιστροφή d.offset;})
.attr ("stop-color", λειτουργία (d) {επιστροφή d.color;}); 

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

 svg.Append ("rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("Πλάτος", 500) .attr ("Ύψος", 20)
.Style ("γεμίστε", "URL (#legendgradientmulti)"); 

Τα διαγράμματα Αυτοί οι θρύλοι πάνε με την αναδημιουργία μετά την υπέροχη δουλειά του www.weather-radials.com Εμφάνιση της θερμοκρασίας στη Νέα Υόρκη ή το Πεκίνο το 2015. Η μέση θερμοκρασία κάθε μέρα υποδεικνύεται από μια έγχρωμη γραμμή και αυτές οι γραμμές είναι διατεταγμένες για να σχηματίσουν ένα κυκλικό γράφημα. Ο παρακάτω θρύλος εξηγεί τι σημαίνει κάθε χρώμα. Ένα γράφημα χρησιμοποιεί μια κλίση από το ένα χρώμα στο άλλο, και το άλλο εξελίσσεται μέσα από όλα τα εννέα χρώματα.

Διαβαθμίσεις βάσει δεδομένων

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

Έτσι, ας επιστρέψουμε στη δεκαετία του '90 και να μετατρέψουμε μια συλλογή επίπεδων κύκλων που αντιπροσωπεύουν τους πλανήτες στο δικό μας ηλιακό σύστημα σε σφαίρες 3D με ακτινικές κλίσεις (Σχήμα 4). Έχω δημιουργήσει ένα μικρό σύνολο δεδομένων που περιέχει το όνομα και τη διάμετρο του πλανήτη. Ο καθένας θα γενικευτεί από ένα χρώμα, το οποίο θα χρησιμοποιήσουμε για να δημιουργήσουμε μια μοναδική κλίση για κάθε πλανήτη.

 var gradientradial = svg.Append ("defs")
.Επιλέξτε ("RadialGradient")
.Data (πλανήτες)
.Ener (). Προσάρτημα ("RadialGradient")
.attr ("id", λειτουργία (d) {επιστροφή "κλίση-" + d.planet;})
.attr ("CX", "15%")
.attr ("CY", "50%")
.attr ("r", "85%"). 

Ο κώδικας είναι ελαφρώς διαφορετικός εδώ: αντί να προσθέσει πρώτα ένα στοιχείο κλίσης, τώρα προσθέτουμε αμέσως το πλανήτες dataset και μόνο μετά το εισαγω Δημιουργούμε ένα στοιχείο κλίσης (σε αυτή την περίπτωση ακτινοπρακτήριο ). Με αυτόν τον τρόπο δημιουργείται μια κλίση για κάθε σημείο του συνόλου δεδομένων. Κρατήστε το αναγνωριστικό κάθε σημείου μοναδικό, βασίζώντας το στα δεδομένα. Ο δείκτης Εγώ Συνήθως λειτουργεί, αλλά εδώ το όνομα του πλανήτη είναι ασφαλέστερο. Αυτό εξασφαλίζει ότι μπορούμε να έχουμε πρόσβαση στη σωστή κλίση αργότερα.

Μια ακτινική κλίση είναι ελαφρώς διαφορετική από ένα γραμμικό. Το δημιουργούμε με παρόμοιο τρόπο με έναν κύκλο SVG: προμηθεύουμε το κέντρο της κλίσης σε σχέση με τα όρια αντικειμένων στα οποία θα εφαρμοστεί, χρησιμοποιώντας cx και κυρία . Αυτές οι τιμές προεπιλογή σε 50% , που είναι το κέντρο του αντικειμένου.

Για να προσομοιώσετε την εμφάνιση ενός αστέρι που λάμπει στους πλανήτες από τη μια πλευρά, θα μετακινήσουμε το κέντρο της κλίσης προς τα αριστερά με τη ρύθμιση cx προς την 15% . Η ακτίνα της κλίσης (όπου μια στάση κλίσης του 100% πρέπει να τελειώσει) υποδεικνύεται από r . Προεπιλογώνει επίσης 50% , αλλά λόγω μας cx Offset, αυτό είναι τώρα 85% Έτσι γεμίζει ολόκληρο τον κύκλο.

Μπορούμε να χρησιμοποιήσουμε τα δεδομένα του πλανήτη για να προσαρτήσετε τις στάσεις χρώματος. Για να δημιουργήσετε την εμφάνιση μιας σφαίρας που ρίχνεται πάνω, το χρώμα στο 0% θα πρέπει να είναι ελαφρύτερο. Με τη χρήση d3.RGB (). Blormer (K) Δεν χρειάζεται να καθορίσω ένα ξεχωριστό χρώμα, καθώς το D3 θα κάνει αυτόν τον υπολογισμό για μένα. Η αξία κ Ορίζει πόσο αναπτήρα θέλω να γίνει το χρώμα. Γύρω 50% Ρυθμίζω το πραγματικό χρώμα στο σύνολο δεδομένων. Στην άκρη θέλω ένα χρώμα που είναι ελαφρώς πιο σκούρο, δίνοντας την εμφάνιση της σκιάς. Λογικά, υπάρχει επίσης ένα d3.rgb (). Darker (K) που μπορούμε να χρησιμοποιήσουμε.

 Gradientradial.Append ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", λειτουργία (d) {
Επιστρέψτε το D3.RGB (D.color) .Brighter (1); });
Gradientradial.Append ("STOP")
.attr ("offset", "50%")
.attr ("stop-color", λειτουργία (d) {επιστροφή d.color;});
Gradientradial.Append ("STOP")
.attr ("offset", "100%")
.attr ("stop-color", λειτουργία (d) {
Επιστρέψτε D3.RGB (D.color) .Darker (2.5). }) · 

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

 SVG.ELECTALL ("πλανήτες")
.Data (πλανήτες)
.Ener (). Προσάρτημα ("Κύκλος")
/ * Ορίστε τις ιδιότητες κλάσης, θέσης και ακτίνας ... * /
.Style ("γεμίστε", λειτουργία (d) {
Επιστροφή "URL (# κλίση-" + d.planet + ")"; }) · 

Έχω προσθέσει επίσης τον ήλιο, το οποίο έχει τη δική του ακτινική κλίση, αλλά έχω φύγει cx , κυρία και r Με την προεπιλεγμένη ρύθμιση του 50% Για να φανεί ότι ο ήλιος είναι λαμπερός από το κέντρο προς τα έξω.

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

Παίζοντας με τους προσανατολισμούς

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

Για να το δοκιμάσετε αυτό, ας κάνουμε ένα διάγραμμα χορδών D3 που δείχνει τις συνεργασίες μεταξύ των εκρηκτικών στο Marvel Cinematic Universe (Σχήμα 5). Οι χορδές που τρέχουν μεταξύ των έξι εκδικητών έχουν μέγεθος σύμφωνα με τον αριθμό των ταινιών στις οποίες εμφανίζονται και οι δύο. Θα γεμίσουμε αυτές τις χορδές με μια απλή γραμμική κλίση, αλλάζοντας από το χρώμα του Avenger στο άλλο.

Μια χορδή συνήθως δεν είναι ακριβώς οριζόντια ή κάθετη. Έτσι θα πρέπει να ορίσουμε το x1, x2 , y1 και y2 τιμές με βάση τις τοποθεσίες του εξωτερικού τόξου του κάθε εκδότες. Αυτά τα δεδομένα δεν είναι στο αρχικό μας σύνολο δεδομένων, αλλά αφού το παρέχουμε στο D3's d3.Layout.chord Λειτουργία, θα επιστρέψουμε ένα νέο σύνολο δεδομένων που περιέχει τις γωνίες έναρξης και του άκρου κάθε τόξου (όπως και d.source.Tartangle και d.target.endangle ). Αυτό είναι το σύνολο δεδομένων που προμηθεύουμε δημιουργώντας τις κλίσεις.

Πρέπει να γνωρίζουμε τις θέσεις pixel της αόρατης γραμμής που τρέχει από το ένα άκρο μιας χορδής στο άλλο. Αυτά στη συνέχεια χρησιμοποιούνται για να δώσουν το x1, .., y2 χαρακτηριστικά κάθε κλίσης. Μπορούμε να εφαρμόσουμε κάποια τριγωνομετρία χρησιμοποιώντας την ακτίνα του διαγράμματος χορδών και τη θέση στα μισά του δρόμου κατά μήκος του τόξου του καθετήρα του εκδότου για να επιστρέψετε αυτές τις θέσεις. Ο πλήρης τριγωνομετρικός τύπος έχει αφαιρεθεί από τον ακόλουθο κώδικα, αλλά θα το βρείτε μέσα το github repo που συνοδεύει αυτό το άρθρο .

Για να δημιουργήσετε ένα μοναδικό αναγνωριστικό για κάθε χορδή δημιουργούμε ένα συνδυασμό συμβολοσειράς της τιμής ευρετηρίου του Avenger σε κάθε άκρο μιας χορδής. D3 d3.Layout.chord πάντα θέτει ένα (από τους εκρηκτικούς) να πηγή και το άλλο στο στόχος , που κάνει ένα μοναδικό ζευγάρι. Αργότερα, όταν σχεδιάζετε τις χορδές, μπορούμε να χρησιμοποιήσουμε την ίδια τεχνική για να καλέσουμε τη σωστή κλίση.

 var grads = svg.Append ("defs"). Electall ("lineargradient")
.Data (Chord.chords ())
.Ener (). Προσάρτημα ("lineargradient")
.attr ("id", λειτουργία (d) {επιστροφή "gradientchord-" + d.source.
index + "-" + d.target.index; })
.attr ("Gradientunits", "Userspaceonuse")
// η θέση των εικονοστοιχείων ενός άκρου μιας χορδής
.attr ("x1", λειτουργία (d, i) {επιστροφή / * ... τριγωνομετρία με βάση
D.Source τιμές ... * /; })
.attr ("y1", λειτουργία (d, i) {επιστροφή / * ... * /})
// η τοποθεσία pixel του άλλου άκρου μιας χορδής
.attr ("x2", λειτουργία (d, i) {επιστροφή / * ... * /})
.attr ("y2", λειτουργία (d, i) {επιστροφή / * ... * /}); 

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

 Grads.Append ("STOP")
.attr ("offset", "0%")
.attr ("Χρώμα Stop-Color", Λειτουργία (D) {Επιστροφή χρώματα (D.Source.index).
});
Gradss.Append ("STOP")
.attr ("offset", "100%")
.attr ("stop-color", λειτουργία (d) {επιστροφή χρώματα (d.target.index);
}) · 

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

Στρογγυλίζω

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

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

Μην χάσετε τη σύνοδο του Nadieh, SVG πέρα ​​από τα απλά σχήματα, στη δημιουργία του Λονδίνου, 21-23 Σεπτεμβρίου. Κάνετε κράτηση τώρα !

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 280; Αγοράστε το εδώ !