graphs framework examples ejemplos d3js d3.js processing visualization vector-graphics

d3.js - framework - jquery d3



Visualizador de datos principiante: ¿Aprende el procesamiento, d3.js u otro primero? (2)

Soy diseñador visual / info y analista de datos. Soy un experto en Illustrator. Quiero hacer la transición a la visualización dinámica de datos. Preferiblemente quiero utilizar mis archivos vectoriales y conectarlos a una base de datos. Habiendo dicho eso, quiero ser versado en la programación de visualización de datos.

¿Qué ruta? He probado el "procesamiento" a través de una lección introductoria; es similar a la lógica en Illustrator. Estoy considerando d3.js. Parece que el consenso es hacer una combinación de ''procesamiento'' y d3. Con qué programa debería comenzar (sabiendo que quiero utilizar mis archivos vectoriales).

¡Gracias de antemano!


Doy mi voto por d3js y compartiré mis consejos de aprendizaje. Yo era un principiante con d3.js cuando de repente tuve que implementar gráficos, widgets y material de visualización "agradable" (traducción: complicado).

¿Por qué d3? se ejecuta en todos los navegadores de esta época (IE9 +), no requiere instalación ni complementos ni configuraciones especiales, solo un par de líneas de código y listo. Y los teléfonos móviles también pueden ejecutarlo sin ningún esfuerzo adicional.

La curva de aprendizaje fue horrible, pero ahora que sé lo que hice mal, puedo compartir un mejor programa de aprendizaje para usted.

  1. Ve por los tutoriales de SVG. Olvídate de d3 y ve por lo básico ... Si no conoces el alfabeto, ¿cómo puedes escribir palabras y luego oraciones? ¡El tutorial de Mozilla me ayudó mucho! https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
  2. Ahora puedes buscar acción d3. No vaya a la documentación, vaya primero a los tutoriales. https://github.com/mbostock/d3/wiki/Tutorials
    Lo bueno es "Introducción", "Hagamos un gráfico de barras, partes I, II y III" y el más importante de todos "Patrón de actualización general, partes I, II y III".
  3. Ahora vea y analice los ejemplos, todos tienen código fuente y algunos comentarios.

De todos modos, todo depende de su nivel de competencia de JavaScript, DOM y SVG.


Recomiendo d3.js. Hay muchos ejemplos en la web a seguir.

Pero primero debe aprender los conceptos básicos de Javascript .

http://www.codecademy.com/tracks/javascript

http://www.w3schools.com/js/DEFAULT.asp

Una vez que tenga el nivel de principiante de Javascript, puede pasar a los tutoriales de d3.js.

https://github.com/mbostock/d3/wiki/Tutorials

Hice varios tutoriales interactivos sobre d3.js aquí:

https://www.youtube.com/playlist?list=PLRJOPJMJE3OTcg5TNV6ZdbIDbFITu2OXu

Actualización : he escrito nuevos tutoriales para principiantes para aprender Javascript y visualización de datos:

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2- funciones /

¡Que te diviertas!