Cum să adăugați diagrame pe site-ul dvs. WordPress folosind D3.js

S-ar putea să fiți familiarizați cu termenul „vizualizare de date”, deoarece a devenit mai popular, atât ca practică, cât și ca traseu de carieră. Există un motiv pentru care acest domeniu emergent este în plină desfășurare – este important să aflăm în mod constant mai multe despre utilizatorii noștri, precum și să le arătăm datele pentru a susține afirmațiile noastre.

Când datele sunt prezentate într-un mod curat și profesionist, le face ușor de înțeles și interpretat. În cele mai multe cazuri, utilizatorii tăi sunt persoane vizuale, așa că ce modalitate mai bună de a ilustra datele decât cu diagrame? D3.js, denumit și Documente bazate pe date, este o modalitate excelentă de a adăuga diagrame pe site-ul dvs. WordPress.

De ce D3?

Această bibliotecă îi ajută pe designeri să prezinte date pe web. Posibilitățile sunt nesfârșite, ceea ce face din aceasta o bibliotecă foarte populară. De la simplu la complex la orice altceva, D3 poate fi personalizat pentru a reda aproape orice tip de diagramă. Se joacă frumos cu tehnologiile web standard, poate manipula DOM-ul, este super flexibil, iar diagramele pot fi personalizate exact după bunul plac.

Până acum, cel mai probabil ați întâlnit grafică vectorială scalabilă, adesea denumită SVG. Acesta este tipul de format pe care îl creează biblioteca D3. SVG-urile sunt grozave deoarece sunt de dimensiuni mici, scalabile și independente de rezoluție.

Pentru a fi clar, această soluție nu este livrată cu nicio diagramă pre-construită din cutie - va trebui să vii cu propria ta! Aruncă o privire la galeria D3 și poți vedea multe exemple grozave care să te inspire.

Ca soluție Open Source, nu trebuie să vă faceți griji cu privire la licențiere și costuri. Pentru că este Open Source, dezvoltarea este în desfășurare. Pentru a fi la curent cu cea mai recentă versiune, puteți bifurca D3 pe Github.

Realizarea unei diagrame D3 simplă

Acum că știm cât de grozav este D3, să construim ceva. Vom realiza o diagramă de gogoașă simplă, care va acoperi conceptele de bază ale D3.

Pasul unu: adăugați scripturile pe site-ul dvs

În primul rând, va trebui să adăugați scriptul D3 pe site-ul dvs. WordPress. Site-ul web d3 îl are disponibil pentru descărcare sau vă puteți conecta direct la cea mai recentă versiune. Veți observa că folosesc versiunea redusă pentru acest tutorial. D3 este în mod natural destul de mic ca dimensiune, dar minimizat este încă puțin mai mic, la doar 148 KB.

În continuare, veți crea un nou fișier JavaScript în care se află scriptul grafic personalizat. Dați fișierului un nume ușor de recunoscut, astfel încât să fie ușor de găsit.

Este foarte important ca scriptul D3 să fie apelat înaintea JavaScript-ului specific diagramei. Dacă lucrurile nu sunt numite în ordinea corectă, graficele nu vor fi redate. (Știu asta din experiență personală și, dacă nu îl înțelegi imediat, probabil că vei petrece mult timp încercând să repari lucrurile care nu sunt stricate.)

Aceste scripturi ar trebui adăugate pe site-ul dvs. după eticheta body de închidere. Când inspectați pagina, asigurați-vă că arată cam așa:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Rețineți că calea fișierului dvs. poate fi diferită de aceasta, în funcție de structura fișierului dvs.

Pasul doi: adăugați scripturi pentru a crea diagrama

Nu veți atinge deloc fișierul d3.js , lucrând doar în fișierul dvs. grafic specific. În acest caz, se numește charts.js .

Să descompun lucrurile bucată cu bucată. Mai întâi, creați-vă variabila și stabiliți de ce aveți nevoie în funcție. Voi numi această variabilă donut .

var donut = (function(one) {
})();

În interiorul bretelelor, veți adăuga informațiile despre mărime.

var width = 400,

height = 400,

radius = 200

Apoi, definiți-vă culorile. Ce zici de o diagramă gri și albastră? Prima culoare listată aici este un gri deschis, care va fi culoarea implicită. A doua este culoarea albastră care va reprezenta datele.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Veți avea nevoie de câteva date pentru a testa acest lucru, așa că să le adăugăm în continuare. Pentru acest tutorial, datele sunt codificate, dar puteți utiliza și date din foile de calcul și date dinamice cu D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Acum puteți adăuga mai multe detalii care ajută la definirea modului în care este redată diagrama.

Arcul definește raza interioară. Imaginează-ți raza exterioară a diagramei – vei dori ca aceasta să fie destul de groasă, așa că scăderea a 100 ar trebui să fie suficientă.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Acest lucru creează containerul SVG și #donut este ceea ce veți viza pe pagina dvs. pentru a reda efectiv diagrama. Aici veți începe să vă vedeți culorile de la pasul de mai sus.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Cod terminat

Doar în cazul în care doriți să comparați ceea ce aveți cu eșantionul, aici este fragmentul de cod complet.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Văzând graficul

Va trebui să creați o pagină sau o postare nouă, astfel încât să puteți „apela” diagrama gogoși pentru a o vedea efectiv. Asigurați-vă că sunteți în modul de editare text.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Caseta de vizualizare și raportul de aspect la diagrama de dimensiuni

Există ceva în plus în eticheta SVG, care este viewBox și preserveAspectRatio . Acesta nu a fost generat de D3 și este total opțional. Este posibil să aveți o altă metodă preferată de dimensionare, dar aceasta tinde să funcționeze bine și ajută la receptivitatea diagramelor.

Mai ales în acest caz, fiindcă dorim să păstrăm o formă perfect rotundă, setarea unui raport de aspect va asigura că SVG-ul se adaptează. Aici intervine viewBox -ul. Avantajul viewBox -ului este că definește modul în care toate măsurătorile și coordonatele utilizate în interiorul SVG ar trebui să fie scalate pentru a se potrivi în spațiul disponibil. Dacă utilizați și 400 ca măsurătoare, iată o explicație rapidă despre cum să păstrați forma circulară.

Avem două valori de 400 care sunt aceleași; motivul pentru aceasta este că imaginea se scalează corect. Cu viewBox="0 0 400 400" , creăm un sistem de coordonate pentru grafic. Are 400 de unități lățime și 400 de unități înălțime. Lățimea și înălțimea graficului SVG stabilește zona vizibilă, iar setarea unei viewBox de vizualizare vă permite să specificați că graficele dvs. se pot întinde pentru a se potrivi într-un anumit container (cel mai probabil fereastra de vizualizare în mod implicit, care este partea din pagina web pe care utilizatorul o poate întinde). vezi în prezent).

Mai este puțin pentru că, chiar și cu viewBox -ul definit, tot nu se va scala perfect. Nu va fi distorsionat, ceea ce este un lucru bun, dar există mai mult în ecuație. Faceți cunoștință cu wingman, preserveAspectRatio . Nu are efect decât dacă există un viewBox care definește raportul de aspect al imaginii. Scara va fi ajustată pentru a păstra raportul de aspect, astfel încât să vă puteți păstra diagrama perfect circulară. Când includeți preserveAspectRatio , planificați cazuri în care viewBox nu se potrivește cu raportul de aspect al portului de vizualizare sau al containerului în care se află diagrama. În cele mai multe cazuri, în mod implicit, imaginea se va scala până când se potrivește atât la înălțime, cât și la lățime, dar se centrează în orice spațiu suplimentar. Am inclus preserveAspectRatio="xMidYMid" , care îi spune browserului să centreze graficul în fereastra de vizualizare în ambele direcții.

Cea mai importantă concluzie este să știi că graficul nu va fi tăiat și că este scalabil. Cheia pentru a înțelege cu adevărat acest lucru este să experimentați cu valorile. O modalitate bună de a face acest lucru este să vedeți ce se întâmplă atunci când valorile sunt modificate și cum se leagă cu fereastra.

Suport browser și d3

Sunt șanse să utilizați un browser modern, dar merită menționat dacă trebuie să acceptați browsere mai vechi. În general, suportul pentru browser este excelent și probabil că nu veți întâmpina probleme, dar D3.js nu funcționează bine cu browsere mai vechi precum IE8.

Crearea unei diagrame simplă este o modalitate excelentă de a fi în funcțiune cu D3.js. Cunoașterea elementelor de bază și familiarizarea cu diagramele de pornire D3 vă vor fi de mare ajutor pe măsură ce vă proiectați datele și treceți la mai multe tipuri de diagrame. De la simplu la complex, opțiunile de design sunt infinite.

Cum a ieșit graficul tău? Spune-ne în comentarii!

Ce urmeaza?

Descărcați această carte electronică pentru o listă cu cele mai recomandate plugin-uri pentru dezvoltatori! Am descoperit că toate aceste plugin-uri sunt ușor de utilizat, nu sunt prea grele de performanță pe site-ul dvs. și sunt de-a dreptul de încredere.

Ești gata să instalezi noul tău plugin favorit? Click mai jos!