Raphael JS

Algunos comentarios sobre Raphael JS



En algunos proyectos previos he tenido que trabajar con algunas librerías Javascript que permiten explotar el mítico SVG de HTML5..

Data Driven Documents o simplemente d3js

http://d3js.org/

Es una excelente opción, de propósito general, y esa es su gran fortaleza, pues se puede hacer de todo, además hace un perfecto "bind" entre datos y objetos en pantalla. Es definitivamente mi favorito y perfecto para crear charts desde cero, aunque hay mucha base por ahí en github, por eso nunca empieza uno desde cero realmente.

Funciona en todos los navegadores decentes, eso excluye versiones antiguas de Internet Explorer, es decir anteriores a la 9 no funciona,

D3js genera y envía SVG directamente al navegador y realmente IE8 para abajo no entiende SVG,

Aunque hay algunos workarounds para ello no creo que valga la pena hacerlo.

He leido comentarios de que D3js es difícil de aprender, en primera instancia,  pues si, puede ser necesario leer un poco mas si solo vienes de Javascript.

D3js viene lleno de algoritmos ya listos para usar, uno de los mas impresionantes es el Force Layout, basta ver los ejemplos para querer aprender a usarlo de inmediato.

Son fan de d3js y por eso aparece en este artículo dedicado a Raphael JS

Raphael JS

http://raphaeljs.com/

Algo que por un tiempo consideré una curiosidad nada mas, tal vez porque el nombre no es muy atractivo, jaja.

Además no había tenido la necesidad de hacer un UI en Web donde el usuario pudiera crear ciertos objetos gráficos, hacer "drag and drop" con ellos, ver propiedades de cada uno....un UI estilo graficación vectorial, pues.

Pues con Raphael JS fue muy rápido, tiene todas las herramientas para hacerlo.

Raphael JS genera y envía SVG o VML al navegador, esto provoca que también funcione en Internet Explorer 6, 7 y 8....mmmm....si funciona, lo probé, de verdad...si funciona...increíble pero cierto.

Si bien puse d3js antes que Raphael JS, este artículo es mas que nada acerca de Raphael, pero d3js es un excelente punto de referencia.

No creo que sirvan para lo mismo pues Raphael te ayuda más a "dibujar" elementos mientras que d3js te ayuda más a ligar datos con los elementos.

Al final lo que quiero expresar aquí es lo grandioso que Raphael JS es, y en mi caso específico en poco tiempo se pudo lograr el objetivo gracias a esta libreria.

Aquí un pequeño ejemplo

 
// creamos el "paper" o canvas principal, en donde el parámetro "canvas" es un simple
// <div></div> dentro del código html
var paper = new Raphael("canvas", 800, 600);
 
var circle = paper.circle(120, 120, 50).attr({ fill: "#e0e0e0", stroke: "#000", opacity: 1 }),
 
// mas adelante puedes cambiar las propiedades de "circle"
// por ejemplo, cambiar el radio
circle.attr({r: 80 });
 
// o cambiarlo pero con una animacion fancy
 
circle.animate({r:80},500,"elastic");

Conociendo un poco de Javascript y de <svg> se pueden hacer cosas impresionantes. Puedes ver los ejemplos en el link de Raphael JS para darte una idea.

Excelente libreria Javascript


Dificultad: Intermedio

Debes conocer: Javascript, HTML, SVG

Similares:  d3js, paper.js, processing.js

Calificación general: 8 de 10

Lo usaría de nuevo: Definitivamente si