Χρήση Javascript για τη δημιουργία διαδραστικών οπτικοποιήσεων δεδομένων με D3.js

Γιατί D3.js για την οπτικοποίηση δεδομένων

Η οπτικοποίηση δεδομένων γεφυρώνει το χάσμα μεταξύ των πρώτων αριθμών και της ανθρώπινης κατανόησης. Ανάμεσα στα πολλά εργαλεία που διατίθενται, D3.js (Data-Driven Documents) ξεχωρίζει ως μια ευέλικτη, χαμηλής στάθμης JavaScript βιβλιοθήκη που δίνει στους προγραμματιστές άμεσο έλεγχο πάνω από το πρότυπο αντικειμένου εγγράφου (DOM). Σε αντίθεση με τις βιβλιοθήκες γραφικών υψηλής στάθμης που προσφέρουν περιορισμένη προσαρμογή, D3 σας επιτρέπει να βιοτεχνήσετε ακριβώς την οπτική αναπαράσταση που χρειάζεστε ⁇ από απλά διαγράμματα bar μέχρι σύνθετους γεωγραφικούς χάρτες και διαγράμματα δικτύου. Το μοντέλο δεδομένων διασφαλίζει ότι οποιαδήποτε αλλαγή στο σύνολο δεδομένων σας ενημερώνει αυτόματα τα οπτικά στοιχεία, καθιστώντας το ιδανικό για διαδραστικά ταμπλό και διερευνητική ανάλυση δεδομένων. D3 χρησιμοποιείται από μεγάλους οργανισμούς για την ευελιξία, την απόδοση και την ικανότητά του να χειρίζεται ποικίλες μορφές δεδομένων.

Βασικές έννοιες του D3.js

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

Επιλογές και Δεσμεύσεις Δεδομένων

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

Για παράδειγμα, για να δημιουργήσετε κύκλους για ένα σύνολο δεδομένων:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

Κλίμακες και τσεκούρια

Τα ακατέργαστα δεδομένα συχνά καλύπτουν εύρος που δεν χαρτογραφούν απευθείας στις συντεταγμένες εικονοστοιχείων. Η D3 παρέχει κλίμακες[ που χαρτογραφούν έναν τομέα (τιμές δεδομένων) σε ένα εύρος (θέσεις εικονοστοιχείων). Οι κοινές κλίμακες περιλαμβάνουν , ] και . Στη συνέχεια, οι άξονες δημιουργούνται χρησιμοποιώντας [ ή . Μαζί, κλίμακες και άξονες αποτελούν το θεμέλιο κάθε ποσοτικής οπτικοποίησης.

Παράδειγμα γραμμικής κλίμακας:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

Κατασκευή διαδραστικών οπτικοποιήσεων με D3.js

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

Εργαλειοθήκες και τονισμός

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

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

Ζουμ και Παν

Για μεγάλα σύνολα δεδομένων ή δεδομένα χρονοσειράς, ζουμ και πανάρισμα βοηθούν τους χρήστες να επικεντρωθούν σε περιοχές ενδιαφέροντος. [[LFT:11]] Η συμπεριφορά του D3 μεταμορφώνει το σύστημα συντεταγμένων.

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

Δυναμικές ενημερώσεις δεδομένων

Τα διαδραστικά ταμπλό συχνά χρειάζεται να ανανεώνουν τα δεδομένα χωρίς να επαναφορτώνουν τη σελίδα. Το μοτίβο ενημέρωσης του D3 χειρίζεται χαριτωμένα την προσθήκη, την αφαίρεση και την τροποποίηση στοιχείων. Το κλειδί είναι να επανεκκινήσετε το join με τα νέα δεδομένα και τη χρήση [[LFT:13]] για επιπλέον κόμβους.

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

Προηγμένες τεχνικές D3

Διατάξεις και Γεωγραφικές Οπτικοποιήσεις

Η D3 περιλαμβάνει εξειδικευμένες ενότητες διάταξης για σύνθετα διαγράμματα: δημιουργεί δεδομένα πίτας/ακτινοβολίας, προσομοιώνει τη φυσική για τα γραφικά του δικτύου, έργα χαρτογραφούν δεδομένα χρησιμοποιώντας το GeoJSON. Αυτές οι ενότητες μειώνουν δραστικά τον κώδικα που απαιτείται για εξελιγμένες οπτικοποιήσεις. Για παράδειγμα, δημιουργώντας ένα δυναμικό-κατευθυνόμενο δίκτυο:

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

Μεταβολές και κινούμενες εικόνες

Οι ομαλές μεταβάσεις βελτιώνουν την εμπειρία του χρήστη. Το D3 [[LFT:19]] αναμειγνύει τις αλλαγές στο χρόνο. Μπορείτε να ελέγξετε τη διάρκεια, τη χαλάρωση και την καθυστέρηση. Για παράδειγμα, την ενεργοποίηση των ράβδων για την ανάπτυξη:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

Βέλτιστες πρακτικές για την παραγωγή-έτοιμος D3

Βελτιστοποίηση απόδοσης

Για μεγάλα σύνολα δεδομένων (χιλιάδες σημεία), η άμεση χειραγώγηση του DOM γίνεται αργή. Χρήση [[LFT:0]]] canvas[[LFT:1]] απόδοση μέσω D3-canvas ή να εξετάσει [WebGL[[LFT:3]] με βιβλιοθήκες όπως το deck.gl. Για SVG-based visuals, να μειώσει την πολυπλοκότητα του DOM χρησιμοποιώντας [[LFT:21] ομάδες, και να αποφύγει την ενημέρωση κάθε στοιχείου σε κάθε πλαίσιο. Χρησιμοποιήστε [[[LFT:4]] αποκηρύχθηκαν[[LFT:5]] φορείς εκμετάλλευσης γεγονότων και επιλογείς cache.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}