De ce D3.js pentru vizualizarea datelor

Vizualizarea datelor pune în evidenţă diferenţa dintre numerele brute şi înţelegerea umană. Printre numeroasele instrumente disponibile, D3.js (Data-Driven Documents) se numără şi o bibliotecă JavaScript versatilă, de nivel scăzut, care oferă dezvoltatorilor control direct asupra Modelului de Obiect Document (DOM). Spre deosebire de bibliotecile de cartografiere de nivel înalt care oferă personalizare limitată, D3 vă permite să creaţi exact reprezentarea vizuală de care aveţi nevoie de nişte hărţi simple de bar până la hărţi geografice complexe şi diagrame de reţea. Modelul său de date cu caracter obligatoriu asigură că orice modificare a setului de date actualizează automat elementele vizuale, făcând-o ideală pentru tabloul interactiv şi analiza de date exploratorii. D3 este folosit de organizaţii majore pentru flexibilitatea, performanţa şi capacitatea sa de a gestiona diverse formate de date.

Concepte centrale ale D3.js

Pentru a valorifica D3 în mod eficient, trebuie să înțelegeți principiile sale fundamentale: selecții, legarea datelor, scale și SVG. D3 funcționează prin selectarea elementelor DOM, a datelor obligatorii pentru ei, și aplicarea transformărilor. Acest model este exprimat prin înlănţuire metodă și este cel mai bine ilustrat cu un exemplu simplu.

Selecţii şi date obligatorii

D3 folosește selectoare CSS pentru a viza elemente, apoi le atașează date. Metoda se unește cu o serie de valori cu noduri selectate, iar metoda creează noi elemente pentru orice puncte de date care nu au un nod COD corespunzător. Acest model de intrare-actual-ieșire vă permite să gestionați seturi de date dinamice eficient.

De exemplu, pentru a crea cercuri pentru un set de date:

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");

Scale și topoare

Datele brute se întinde adesea pe intervale care nu se orientează direct către coordonatele pixelilor. D3 furnizează scale[] care cartografiază un domeniu (valorile datelor) la o gamă (poziții pixel). Scalele comune includ , și . Axele sunt apoi generate utilizând sau . Împreună, scalele și axele formează fundamentul oricărei vizualizări cantitative.

Exemplu de scară liniară:

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);

Construirea de vizualizări interactive cu D3.js

Interactivitatea transformă diagramele statice în povești explorabile. D3 suportă manipulatorii de evenimente, tranziții și actualizări dinamice. Puteți adăuga vârfuri de instrumente, zoom, drag, filtrare și animații cu cheltuieli minime. Mai jos ne extindem pe vârfuri de instrumente și introduce alte caracteristici interactive comune.

Sfaturi de unelte și Highlighting

Tooltips oferă valori precise ale datelor pe hover. Folosind sistemul de evenimente D3, puteți crea o schimbare plutitoare care arată detalii. De exemplu, extinderea unei diagrame de bare cu vârfuri de instrumente a fost deja afișată în codul original; aici se adaugă și schimbare de culori pe hover:

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");
 });

Zoom și Pan

Pentru seturile de date mari sau datele din seriile temporale, zoomul și panarea utilizatorilor se concentrează pe regiunile de interes. Comportamentul D3 transformă sistemul de coordonate. Aplicați-l unui grup SVG care conține elementele vizuale.

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

svg.call(zoom);

Actualizări dinamice ale datelor

Tablourile interactive de bord au adesea nevoie de reîmprospătarea datelor fără a reîncărca pagina. Modelul de actualizare D3 se ocupă cu grațios adăugarea, eliminarea și modificarea elementelor. Cheia este de a re-run-unesc cu noile date și de a utiliza pentru noduri suplimentare.

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);
}

Tehnici avansate D3

Programe şi vizualizări geografice

D3 include module de configurare specializate pentru grafice complexe: creează date plăcinte/radiale, simulează fizica pentru graficele de rețea, proiecte cartografiază datele folosind GeoJSON. Aceste module reduc drastic codul necesar pentru vizualizarea sofisticată. De exemplu, crearea unei rețele dirijate de forță:

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

Tranziții și animații

Tranziţiile netede îmbunătăţesc experienţa utilizatorului. Animarea lui D3 se modifică în timp. Puteţi controla durata, uşurarea şi întârzierea. De exemplu, animarea barelor să crească:

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);

Cele mai bune practici pentru producția-gata D3

Optimizarea performanței

Pentru seturi mari de date (mii de puncte), manipularea directă a DOM devine lentă. Utilizarea canvas[ redând prin intermediul D3-canvas sau luând în considerare WebGL cu biblioteci precum punte.gl. Pentru vizualizări bazate pe SVG, reduce complexitatea DOM prin utilizarea grupe și evită actualizarea fiecărui element de pe fiecare cadru.Use debuited manipulatori de evenimente și selectori de cache.

Accesibilitate și responsabilitate

Vizualizările ar trebui să fie percepibile de către toți utilizatorii. A se furniza ] etichete pe elemente SVG, utiliza atribute ARIA, și să includă o masă pe bază de text ca un regres. Pentru design receptiv, dimensiunile SVG de bază pe lățimea containerului folosind și să asculte redimensiona evenimentele ferestrei cu D3.

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

Organizare cod

Chiar și într-o aplicație de o singură pagină, structurați codul D3 în module: unul pentru aducerea datelor, unul pentru scări/axe, unul pentru desen, și unul pentru interacțiuni. Utilizați module ES6 sau un pachet ca Webpack. Evitați amestecarea logica D3 cu cârlige-cadru de viață direct; în schimb, creați o clasă D3 pe care cadrul dvs. solicită.

Integrarea D3 cu cadrele moderne

Reacţionează, Angular, şi Vue gestiona propriile lor DOM. Pentru a evita conflictele, utilizaţi D3 numai pentru calcule (scale, forme) şi să cadrul redă SVG. Alternativ, utilizaţi un ambalaj dedicat ca sau . Cu toate acestea, pentru control deplin, puteţi utiliza în continuare D3 în interiorul (Reacţiune) sau (angular) cu o referinţă element rădăcină. Aceasta păstrează D3S cicluri de actualizare eficiente separate de re-renderi cadru.

Exemple reale și cazuri de utilizare

D3 alimentează multe proiecte de vizualizare de profil: ]D3 Gallery on Observable showcase sute de exemple, de la coroplete animate la cronologie interactivă. Organizaţii de ştiri precum The New York Times folosesc D3 pentru poveşti de date personalizate. În setările de întreprinderi, D3 permite borduri personalizate pentru date financiare sau pentru fluxuri de senzori IoT în timp real. Flexibilitatea sa înseamnă că puteţi combina mai multe tipuri de grafice într-o singură interfaţă coezivă.

Exemplu: Scatter interactiv cu vârfuri de unelte și perie

Imaginați-vă un set de date de 500 de puncte cu x, y și categorie. Folosind D3, puteți crea un complot scatter cu cercuri colorate pe categorii, un sfat de unealtă care să arate coordonatele exacte și o perie care să evidențieze punctele selectate. Structura de cod urmează modelele de mai sus. Interacțiunea pensulei ar arăta ca:

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);
 }
}

Resurse de învăţare şi paşi următori

Pentru a stăpâni D3, începe cu oficial D3.js documentație și tutorialele gratuite pe Observabil. Lucrați prin notebook-uri observabile, care oferă cod live pe care le puteți furculița. De asemenea, citi "Vizionalizare interactivă a datelor pentru Web" de Scott Murray pentru o introducere aprofundată. Practică prin recrea hărți clasice (bară, linie, împrăștiere) de la zero, apoi adăugați interactivitate. Experiment cu pentru hărțile copacilor sau pentru hărți.

Concluzie

D3.js rămâne standardul de aur pentru vizualizarea datelor interactive personalizate pe web. Curba de învățare abruptă este compensată prin flexibilitate, performanță și sprijin comunitar neegalat. Prin stăpânirea conceptelor sale de bază . Selecții, legături de date, scale și manipularea evenimentelor . Puteți construi vizualizări care transformă datele în perspicacitate. Fie că vă construiți un grafic simplu bar sau un panou complex multi-view de bord, D3 vă oferă instrumentele pentru a crea producție-rea gata, angajarea, și vizualizări accesibile. Începe mici, iterate, și de a folosi ecosistemul bogat de exemple pentru a ghida călătoria ta.