Το παρακάτω διαδραστικό παράδειγμα παρουσιάζει τον άμεσο συγχρονισμό μεταξύ ενός στοιχείου ελέγχου εισόδου (range slider) και μιας γραφικής απεικόνισης δεδομένων (pie chart). Αποτελεί έναν χώρο πειραματισμού όπου ο χρήστης μπορεί να μεταβάλλει μια αριθμητική τιμή και να παρατηρήσει ταυτόχρονα την οπτική της αναπαράσταση, κατανοώντας τη σχέση μεταξύ δεδομένων και γραφικών στοιχείων.

Το παράδειγμα βασίζεται στη χρήση CSS μεταβλητών (CSS variables) και JavaScript για την ενημέρωση του γραφήματος σε πραγματικό χρόνο. Η άσκηση αυτή αναδεικνύει βασικές έννοιες της διάδρασης ανθρώπου–υπολογιστή, όπως ο Άμεσος Χειρισμός (Direct Manipulation) και η Άμεση Οπτική Ανατροφοδότηση (Immediate Feedback). Καθώς ο χρήστης σύρει τον δείκτη, το σύστημα ανταποκρίνεται ακαριαία, εξαλείφοντας την ανάγκη για επιπλέον κουμπιά επιβεβαίωσης και ενισχύοντας την αίσθηση του ελέγχου. Το interface αξιοποιεί οπτικές μεταβάσεις (transitions) για να κάνει την αλλαγή των τιμών ομαλή, βελτιώνοντας την εμπειρία χρήστη και καθιστώντας την αλληλεπίδραση πιο φυσική και κατανοητή.

Στόχος του παραδείγματος Να κατανοηθεί πώς τα στοιχεία εισόδου (inputs) μπορούν να συνδεθούν δυναμικά με στοιχεία οπτικοποίησης (visualizations) χωρίς την ανάγκη επαναφόρτωσης της σελίδας. Το παράδειγμα προσομοιώνει περιβάλλοντα όπως dashboards οικονομικών δεδομένων, ρυθμίσεις παραμέτρων συστήματος ή εφαρμογές υγείας, όπου η οπτική αναπαράσταση ποσοστών και προόδου είναι κρίσιμη για την γρήγορη αντίληψη της πληροφορίας.

Άσκηση: Τροποποιήστε το παράδειγμα προσθέτοντας: Δυναμική αλλαγή χρώματος: Όταν το ποσοστό ξεπεράσει το 80%, το γράφημα και ο slider να γίνονται κόκκινα (ένδειξη κινδύνου/ορίου). Ένα πεδίο κειμένου (input type=”number”) που να είναι συγχρονισμένο με τον slider. Όταν ο χρήστης γράφει τον αριθμό, να ενημερώνεται ο slider και το γράφημα, και αντίστροφα (Bidirectional Binding). Επέκταση του γραφήματος ώστε να δείχνει περισσότερα από ένα τμήματα δεδομένων.

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