Lemoncode TV

D3js + TypeScript

Cuando queremos hacer alguna gráfica y sólo queremos adornar nuestras ventanas, lo normal es que arranquemos por alguna suite de gráficas precocinadas.

Si nuestro cliente necesita algo más serio, nos va a pedir personalizaciones y mejoras que esos librerías de precocinados puede que no nos den, es hora de arremangarse y aprender d3js.

Manos a la obra

Como punto de partida tomamos un proyecto que tiene configurada la transpilación con TypeScript y el bundling lo realizamos con Webpack (podría valer cualquier otra configuración hecha con Webpack o el cli de turno), Este código lo tienes disponible en la siguiente url

Vamos a instalarnos d3js, aquí tenemos dos opciones:

• Podemos bajarnos d3js al completo y tirar de treeshaking para aligerar peso.
• También podríamos instalarnos sólo las partes que nos hagan falta, a esto lo llaman "custom modular bundle"

En nuestro caso para simplificar vamos a optar por la primera opción.

Primero instalamos la librerías de d3js

npm install d3 --save

Después instalamos los typings de TypeScript

npm install @types/d3 --save-dev

Vamos a trabajar con gráficos vectoriales (SVG).

SVG es un estándar que traen los navegadores web y te permiten pintar aplicando fórmulas matemáticas, de ésta manera puedes escalar una gráfica al tamaño que quieras y esta no se pixela.

Nos vamos al código, partimos de un html y un body, pasamos al index.ts, el que nos importamos la librería de d3js y utilizando d3 vamos a crear un SVG que cuelgue del body de la página:

• Para ello vamos a usar de lo selectores de d3js.
• Nos vamos al body de nuestro html y añadimos un svg
• Le damos un ancho y un alto así como un color de fondo para poder verlo en pantalla.

import * as d3 from "d3";

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .attr("style", "background-color: #FBFAF0");

Si ejecutamos podemos ver un rectangulo amarillo que nos indica que vamos por buen camino.

Una cosa que debemos de evitar con d3js es la de ir metiendo datos harcodeados (también conocidos como números mágicos, tales como ancho y alto de nuestra área de dibujo, margenes...), así que vamos a establecer estos datos como constantes en un sólo sitio, en un proyecto real nos podríamos plantear encapsular ésto en una función o clase y permitir que el usuario final pueda personalizar estos valores.

import * as d3 from "d3";

+ const svgDimensions = { width: 400, height: 400 };
+ const margin = { left: 5, right: 5, top: 10, bottom: 10 };
+ const chartDimensions = {
+  width: svgDimensions.width - margin.left - margin.right,
+  height: svgDimensions.height - margin.bottom - margin.top,
+ };

const svg = d3
  .select("body")
  .append("svg")
-  .attr("width", 400)
-  .attr("height", 400)
+  .attr("width", svgDimensions.width)
+  .attr("height", svgDimensions.height)
  .attr("style", "background-color: #FBFAF0");

Ahora podemos comprobar que en nuestro navegador aparece el svg que acabamos de crear.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.