D3.js (v.5) - Primul proiect

Crearea unui proiect de la zero pentru D3.js v.5

Daniel Turcu

5 minute read

Initialele Data Driven Documents dau numele librariei D3.js si este utilizata in aplicatiile de vizualizare a datelor. Cu alte cuvinte, poate genera grafice, grafuri, harti folosind standardele web (SVG, Canvas, HTML). D3.js nu doar genereaza grafice pentru placerea ochiului, dar pot fi si interactive pentru cei curiosi sa afle mai multe informatii chiar din grafic.

Deci avem o librarie capabila sa manipuleze DOM-ul pentru reprezentari vizuale si interactive a datelor.

Despre proiect

Vom dezvolta de la zero un proiect capabil sa genereze grafice D3.js. Ma astept sa aveti cunostinte de baza despre JavaScript si sa stiti cate ceva despre D3.js. Nu este un articol care ne invata bazele D3.js ci un articol in care vrem sa construim un mediu de dezvoltare pentru D3.js.

Windows, Linux, Mac nu conteaza sistemul de operare pe care il aveti. Trebuie sa aveti instalat NodeJS si Google Chrome. Vom folosi apoi un webserver local pentru a servi aplicatia noastra catre browser. Deasemenea sa aveti instalat un IDE precum Visual Studio Code sau orice alt editor preferat.

Prima versiune ES5

In prima versiune vom utiliza JavaScript ES5 (intr-un alt articol vom crea un proiect ES6/Webpack/Babel). Practic nu avem mare lucru de facut, importam libraria D3, configuram un server web local pentru incarcarea paginii in browser si suntem gata de lucru.

Putem importa libraria direct din CDN-uri sau chiar folosind NodeJS

CDN-uri importate direct in index.html

https://d3js.org/d3.v5.min.js https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js https://unpkg.com/d3@5.7.0/dist/d3.js

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 ES5 Starter</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h1> D3 Starter Project </h1>
    <svg></svg>

    <script src="/src/app.js"></script>
  </body>
</html>

Ca sa utilizam libraria local, vom folosi NodeJS:

Incepem prin a initializa un proiect nou:

> npm init

Raspundem la intrebarile primite (pentru package name folosim litere mici si fara spatii, celelalte intrebari le lasam cu valorile implicite)

package name: (00_01b_es5) d3js-es5-starter
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Instalam modulul D3:

> npm i d3

Observam ca se creeaza un nou folder node_modules iar in el avem libraria d3 (inclusiv modulele d3, in caz ca nu vrem sa incarcam toata libraria in aplicatie).

Asa ca putem rescrie index.html astfel:

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 ES5 Starter</title>
    <script src="node_modules/d3/dist/d3.min.js"></script>
  </head>
  <body>
    <h1> D3 Starter Project </h1>
    <svg></svg>

    <script src="/src/app.js"></script>
  </body>
</html>
  • tag-ul svg va contine graficul generat

Instalam un server web local

Vom folosi Visual Studio Code in acest exemplu; instalam extensia Live Server:

  1. Deschidem tab-ul Extensions (CTRL+SHIFT X)

  2. Tastam in Search Bar: live server

“VSCode Live Server Extension Install”

  • Reincarca Visual Studio Code, dupa instalarea extensiei

Acum avem un server web la indemana (click dreapta pe fisierul index.html):

“Open with Live Server”

  • de fiecare data cand modificam fisierele sursa, Live Server-ul va reincarca automat pagina in browser si modificarile sunt reflectate automat (fara sa fim nevoiti sa facem manual refresh de pagina - F5).

Cream primul grafic

Cream fisierul app.js si app.css intr-un nou director src:

/* src/app.css */

.d3zone {
    background-color: #eaf3ff;
}


// src/app.js

var width = 350;
var height = 150;

var chart = d3.select('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'd3zone');

var data = [75, 100, 55, 80, 20, 30, 65, 50, 90];
var barw = (width / data.length);
var barChart = chart.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('fill', '#2188b9')
    .attr('y', function(d) {
        return height - d
    })
    .attr('height', function(d) {
        return d;
    })
    .attr('width', barw - 5)
    .attr('transform', function (d, i) {
            return 'translate('+ barw * i + ',' +'0)';
    });

Rezultatul codului de mai sus este un bar chart simplu:

“D3 Simple Bar Chart”

Nu este scopul articolului curent sa invatam D3, dar vom face cateva observatii asupra codului:

  • chart.selectAll('rect') va crea un array de rectangulare (initial este un array gol)

    • daca am fi avut deja noduri rect acestea ar fi facut parte din array-ul initial, si valoarea nu ar fi fost suprascrisa de datele noastre.

    • puteti verifica asta punand urmatorul cod in index.html (inlocuiti nodul svg existent):

    <svg>
    <rect fill="#ccff33" y="0" height="150" width="34" transform="translate(0,0)"></rect>
</svg>

“selectAll() with existing rect nodes”

  • se vede acum ca prima valoare din array-ul de date (75) nu a mai suprascris elementul rect deja existent (primul bar din grafic care are valoarea 150)

  • .data(data) - datele care vor dicta graficul

  • .enter() - va verifica datele curente si elementele deja existente in DOM (selectAll()) si creeaza o mapare. In cazul nostru nu avem deja elemente in DOM, asa ca datele dicteaza aspectul final al svg-ului.

  • append('rect') - pentru fiecare element din data (care nu este deja in DOM) va fi adaugat un rectangular

  • attr() - folosind attr() dictam aspectul fiecarui element (aspectul formei de dreptunghi din svg)

    • y - dupa ce-l calculam, y va impinge bar-ul in jos astfel incat sa fie aliniate pe axa x. x si y sunt calculate de la coltul stanga sus.

    • parametrul d - parametrul d furnizeaza valoarea curenta din array-ul de date

    • transform (css3) ne ajuta sa pozitionam dreptunghiurile de-a lungul axei x

Concluzie

Am creat un mediu de dezvoltare simplu pentru a putea crea grafice cu D3 si JavaScript ES5. Deasemenea orice modificare din Visual Studio Code este reflectata automat in browser.

Puteam evita utilizarea NodeJS folosind, in index.html, link-urile CDN. Insa avem planuri cu acest proiect si pe viitor. Intr-un alt articol, vom lua proiectul curent si-l vom configura sa folosim D3 impreuna cu ES6+. Vom face asta cu ajutorul Webpack si Babel.

comments powered by Disqus