An advertising spot depicting studies with animation
Βιβλίων γνώσεων boostrap
εισαγωγή
το Boostrap δεν αποτελεί μόνο ένα σκελετό που έχει μέσα του το css, html, javascript αλλά και ως ένα ολοκληρωμένο portfolio. Πέρα το πόσο εύκολο είναι στην χρήση, μας δίνει επιπλέον την δυνατότητα να γράφουμε τον κωδικό μας με πιο συντομία.
δυνατά σημεία
οι δυνατότητες
πλεονεκτήματα
Συμπέρασμα
πηγές
Ένα χρήσιμο εργαλείο για την παρουσίαση δεδομένων d3.js
Τι πιο ευχάριστο είναι από το να βλέπουμε την πρόοδο της εργασίας μας σε παραστάσεις που μπορούμε να της κατανοήσουμε εύκολα. Πρώτα ας μάθουμε τι είναι ακριβώς το d3.js και σε τι είναι χρήσιμο.
τι είναι το d3.js και πως χρησιμοποιείτε
Aναφέρετε σε μια βιβλιοθήκη της javascript, με αυτή την γλώσσα μπορούμε να απεικονίσουμε τα δεδομένα μας και να παίρνουν μορφή. Το d3.js βασίζεται σε δυο γλώσσες προγραμματισμού όπως το css και την Html5 και στα γραφικά το λεγόμενο scalable vector graphics. Tα αρχικά δικαιολογούν την λειτουργία του, data driven documents, αφού η χρήση του γίνεται καθαρά για πληροφοριακούς λόγους. Ένα γράφημα του d3.js μπορεί να βοηθήσει στο να καταλάβουμε καλύτερα τα δεδομένα παρά σε απλά νούμερα. Το D3.js μας δίνει την δυνατότητα να το βλέπουμε ως όμορφες παραστάσεις.
Oι οργανώσεις, εταιρίες προσπαθούν να συλλέξουν και να κάνουν ανάλυση των δεδομένων, αντιμετωπίζουν την μεγάλη πρόκληση με ποιόν τρόπο θα γίνει χρήσιμη η πληροφόρηση των δεδομένων, ενώ το έργο των προγραμματιστών είναι στο να παρουσιάσουν τα δεδομένα σε λίστες και πίνακες. Eδώ ήρθε να λύση το πρόβλημα της παρουσιάσεις των δεδομένων το d3.js διότι οπτικοποιεί τα δεδομένα ώστε να γίνει περισσότερο κατανοητό για όλους. Οι απεικονίσεις μπορεί να γίνει σε γραφική μορφή δηλαδή σε ραβδογράμμα, γραφήματα πίτας.
Απαραίτητη προϋπόθεση είναι να γνωρίζουμε και από csv file, πρέπει υποχρεωτικά διότι από εκεί θα αντλήσουμε δεδομένα ώστε να τα παρουσιάσουμε. Πριν το html πρέπει να υπάρχει το κατάλληλο script του d3.js για να γίνει η αναφορά του, η οποία είναι, <script src = “https://d3js.org/d3.v4.min.js”></script>. Ύστερα κωδικοποιούμε το svg, οπότε ότι αλλαγές χρειάζονται κοιτάμε το script του d3.js και του svg.
Τα πλεονεκτήματα
Οι γραφικές παραστάσεις σε όποια μορφή και είναι, όταν είναι με σαφήνεια και απαντούν τις ερωτήσεις του κοινού, όποια και αν είναι τότε απεικονίζει μια ιστορία, μια οπτική εικόνα. Το μαγικό εργαλείο των δημοσιογράφων γραφιστών αυτό είναι του New York Times, οι οποίοι με διακριτικότητα και κομψότητα παρουσιάζουν τα δεδομένα χωρίς υπερβολική διακόσμηση. Το New York Times ξέρει να διατηρεί το οπτικό με ένα άρθρο. Πίσω από κάθε οπτικό, η μεγάλη ποικιλία του χαρτοφυλακίου της δείχνουν μια ευεξία και μια εξαιρετική τεχνική ικανότητα.
Συνδυασμός της d3.js με άλλες γλώσσες
Είναι δυνατό να συνδυαστεί και με άλλες γλώσσες όπως με την Αngular αλλά προκειμένου να συνδυαστεί, πρέπει ο προγραμματιστής να γνωρίζει πολύ καλά την d3.js και σίγουρα δεν είναι ότι πιο εύκολο. Όταν ο προγραμματιστής έχει ήδη εγκαταστήσει το Node.js και το npm τα πράγματα φαίνονται πιο εύκολα διότι θα χρειαστεί μόνο το command line, το οποίο βρίσκεται σε όλα τα windows, χρησιμοποιείται για να δώσουμε εντολές. Με γνώμονα αυτό για αυτό μπορούμε να στείλουμε το Angular CLI, στέλνουμε το Angular project, το οποίο είναι, npm install -g @angular/cli, ύστερα δημιουργούμε την καινούργια εφαρμογή, με την εντολή, ng new angular-d3.
Για να καλωσορίσουμε το d3.js πρέπει να δώσουμε την εξής εντολή, npm install d3 && npm install @types/d3 –save-dev, στην συνέχεια πρέπει να προσθέσουμε τα λεγόμενα συστατικά ή όπως λέγονται components με την γραμμή εντολών φυσικά.
Πέρα από το csv file που μπορούμε να χρησιμοποιήσουμε, έχουμε την δυνατότητα και με το json file ώστε να αντλήσουμε και από εκεί πληροφορίες. Δεν είναι τυχαίο γιατί στο ngOnInit() method βάζουμε το d3.json () μέθοδο.
Συμπέρασμα
Το d3.js είναι ένα χρήσιμο εργαλείο για τους προγραμματιστές το οποίο απαιτεί και τεχνικές ιδιότητες. Οι σωστή χρήση του οδηγεί σε θετικά αποτελέσματα διότι με το εργαλείο αυτό κάνουμε τους οποιοδήποτε αναγνώστη να κατανοήσει ένα γράφημα με μόνο μια οπτική εικόνα. Η παρουσιάσει των δεδομένων παίζει βασικό ρόλο από το πως θα τα απεικονίσουμε οπότε δεν είναι αρκετό μόνο οι βασικές γνώσεις αλλά και το πως τα παρουσιάζουμε. Το παράδειγμα της New York Times αποτελεί ένα από τα καλύτερα πρότυπα.
Πηγές
https://en.wikipedia.org/wiki/D3.js,
Rock content writer, 10 things you can learn from the New York Times data visualization, updated on april 29/2020,
Data visualization in Angular using D3.js
languaggeprogram 