¿Cómo hacer un buen diagrama de dispersión (gráfico de burbujas)?

Este gráfico del New York Times utiliza D3 (abreviatura de Documentos controlados por datos), además de un toque de lienzo HTML5 para mejorar el rendimiento. D3 es probablemente lo mejor para las visualizaciones interactivas.

NYT usa D3 para la mayoría de sus visualizaciones interactivas, que tienden a ganar la mayoría de los premios , e incluso contrató al autor de D3, Mike Bostock , como editor de gráficos. A veces incluso usan D3 para generar gráficos vectoriales en un navegador que luego transfieren a Illustrator para usarlos en la impresión .

D3 es una biblioteca de javascript que dibuja formas SVG* e incluye un montón de características muy sofisticadas y fáciles de visualizar.

Dicho esto, este gráfico en particular es inusual porque usa una mezcla de SVG de D3 más lienzo HTML5 para los círculos, probablemente porque el lienzo HTML5 funciona mejor con montones, montones de formas. Este es un ejemplo más típico de un gráfico basado en burbujas D3 del NYTimes: Cuatro formas de dividir la propuesta presupuestaria de Obama para 2013 .

Además de un rendimiento a veces lento con un gran número de formas, los inconvenientes de D3 son:

• El realmente grande (solución difícil a continuación): D3 (en realidad, cualquier SVG) no funciona en absoluto en Internet Explorer 8 o anterior , por lo que dependiendo de la demografía de su audiencia, alrededor del 5% al ​​25% de las personas pueden no ver nada. en absoluto
• Debe sentirse cómodo codificando en javascript . Dicho esto, los documentos y el soporte disponibles son muy buenos. Muchas personas en la comunidad D3 son primero diseñadores o estadísticos, luego programadores, por lo que no es una curva de aprendizaje demasiado dolorosa. Si eres un diseñador interesado en aprender codificación interactiva y javascript, probablemente sea un buen lugar para comenzar.

Puede solucionar el problema de Internet Explorer utilizando D34Raphael , una variante modificada de D3 que empuja la salida D3 a través de Raphael , que es una biblioteca de javascript para dibujar vectores interactivos en cualquier navegador desde IE6 en adelante (no funciona en teléfonos Android antiguos pero funciona en prácticamente todo lo demás).

D34Raphael es más difícil y no está tan bien documentado. ¡No empieces aquí! Es algo para intentar una vez que domines el D3 normal y te sientas seguro con Javascript.

*SVG en el navegador es ligeramente diferente a HTML5 Canvas: en pocas palabras, es mejor para hacer formas vectoriales que son interactivas, pero consumen más memoria. El lienzo HTML5 dibuja píxeles en el lienzo y luego los olvida (a menos que use algún marco como Fabric.js ), SVG dibuja formas vectoriales que son elementos a los que puede vincular fácilmente eventos como divs.

En general, SVG es mejor para gráficos con mucha interactividad con cada elemento, HTML5 es mejor para gráficos con una gran cantidad de elementos que tienen un comportamiento simple (esta página contiene enlaces a algunos buenos ejemplos) .

Como dijo Scott, todo el gráfico está hecho con lienzo HTML5.

Aquí hay un buen tutorial sobre cómo hacer algo similar (¡y no necesita ningún software!): Cree un gráfico de burbujas interactivo con lienzo HTML5

Además, Zingchart es una herramienta gratuita que puede descargar y usar.

Y aquí hay una buena lista de complementos de javascript para diagramas y gráficos . Tienen un poco de todo, pero algunos de ellos se pueden adaptar para gráficos de burbujas (¿gRafael tal vez?). ¡Buena suerte!

Consulte morris.js http://oesmith.github.com/morris.js/