1 of 103

COMPONENTES

REUTILIZABLES

CON D3.JS

Cómo dejé de copiar y pegar gráficos

Data Visualization Society - Madrid

2 of 103

Código y enlaces en:

​

github.com/datairahub/d3js-components-workshop

​

Preguntas e improperios a:

​

twitter.com/Saigesp

3 of 103

Santi Espinosa (yo)

​

Desarrollador web especializado en datos

4 of 103

5 of 103

6 of 103

CÓMO LLEGUÉ HASTA AQUÍ

7 of 103

8 of 103

9 of 103

10 of 103

11 of 103

Madrid

Valencia

12 of 103

13 of 103

14 of 103

REFACTOR TIME

15 of 103

16 of 103

17 of 103

18 of 103

19 of 103

20 of 103

21 of 103

22 of 103

23 of 103

24 of 103

25 of 103

26 of 103

27 of 103

​

​

Ahora necesitamos tres arcos

​

​

28 of 103

​

​

Ahora necesitamos tres arcos

​

Y que el tamaño cambie si el usuario gira el móvil

​

29 of 103

​

Y que se actualicen los datos al darle a un botón

​

Ahora necesitamos tres arcos

​

Y que el tamaño cambie si el usuario gira el móvil

​

30 of 103

​

Y que se actualicen los datos al darle a un botón

​

Ahora necesitamos tres arcos

​

Y que el tamaño cambie si el usuario gira el móvil

​

Y que cuando hagas click te lleve a esta página

31 of 103

Y un tooltip distinto para cada uno

​

Y que se actualicen los datos al darle a un botón

​

Ahora necesitamos tres arcos

​

Y que el tamaño cambie si el usuario gira el móvil

​

Y que cuando hagas click te lleve a esta página

32 of 103

​

​

Y…

​

33 of 103

REFACTOR

34 of 103

35 of 103

36 of 103

37 of 103

38 of 103

39 of 103

​

​

Problema:

​

Programación funcional

​

​

40 of 103

f(x)

output

input

Programación funcional

41 of 103

createArcChart()

drawArcs()

etc

container

data

width

height

42 of 103

createArcChart()

drawArcs()

etc

container

data

width

height

43 of 103

​

​

Solución:

​

Programación orientada a objetos (OOP)

​

​

44 of 103

OOP

drawArcs()

constructor()

update()

data

​

width

​

height

​

size

​

etc

45 of 103

46 of 103

REFACTOR TIME II

47 of 103

48 of 103

49 of 103

50 of 103

51 of 103

52 of 103

53 of 103

54 of 103

55 of 103

CÓMO

56 of 103

QUÉ

57 of 103

58 of 103

59 of 103

60 of 103

61 of 103

62 of 103

63 of 103

64 of 103

+ tooltip

65 of 103

+ tooltip

+ anotaciones

66 of 103

+ tooltip

+ filtros

+ anotaciones

67 of 103

+ tooltip

+ filtros

+ resize

+ anotaciones

68 of 103

+ tooltip

+ filtros

+ clicks

+ resize

+ anotaciones

69 of 103

+ tooltip

+ filtros

+ hovers

+ clicks

+ resize

+ anotaciones

70 of 103

+ tooltip

+ animaciones

+ filtros

+ hovers

+ clicks

+ resize

+ anotaciones

71 of 103

+ tooltip

+ animaciones

+ filtros

+ hovers

+ clicks

+ resize

+ anotaciones

+ ejes

72 of 103

+ tooltip

+ animaciones

+ filtros

+ hovers

+ clicks

+ resize

+ anotaciones

+ ejes

+ títulos de ejes

73 of 103

​

​

Y…

​

74 of 103

75 of 103

QUÉ

76 of 103

[qué]

77 of 103

CÓMO EL

[qué]

78 of 103

QUÉ GRÁFICOS

79 of 103

80 of 103

81 of 103

82 of 103

QUÉ OPCIONES

83 of 103

84 of 103

85 of 103

86 of 103

87 of 103

QUÉ SE CALCULA

88 of 103

89 of 103

90 of 103

QUÉ SE ACEPTA

91 of 103

92 of 103

93 of 103

94 of 103

95 of 103

LA LIBRERÍA DE GRÁFICOS PERFECTA

ES UNA TRAMPA

96 of 103

librerías de gráficos

librerías de gráficos

librería de gráficos

librerías de gráficos

97 of 103

98 of 103

CONCLUSIONES

​

Cada proyecto requiere gráficos específicos

​

Componetizar es una apuesta de tiempo

​

Solo gana (y aprende) quien arriesga

99 of 103

FIN

100 of 103

github.com/datairahub/d3js-components-workshop

101 of 103

github.com/datairahub/d3js-components-workshop

102 of 103

github.com/datairahub/d3js-components-workshop

103 of 103

MUCHAS GRACIAS