Esta semana estuvimos junto a Alvaro Liuzzi y Maxi Ponz creando unas visualizaciones para Chequeado.com.
Se pueden ver en http://chequeado.com/debatechequeado/
Algunas de las tecnologías que me ayudaron a crear la página:
- Las secciones con altura de 100% y arrastre completa por sección, vínculos desde el menú y algunos detalles más gracias a FullPage.js
- Las visualizaciones de círculos con gravedad al centro y arrastre realizado gracias a las librerías d3.js, geniales y llenas de documentación.
- El filtro de Bloques de datos chequeables y el de videos fue realizado con Isotipe. En el de videos se sumó la posibilidad de un filtro exclusivo por temática pero con un OR por candidato para lograr el versus. Básicamente se va actualizando un array de filtros y luego se inicializa el isotipe con una función como filtro y el array como parámetro.
- La nube de Tags trae por ajax los discursos completos y parciales de los candidatos, es cierto, fue una tentación filtrar las palabras y hacerlo estático... pero no. Los colores se toman de un array con d3.scale.ordinal().range. Me baso en esta nube de tags: https://www.jasondavies.com/wordcloud/
- Los tags que aparecen flotando abajo de los círculos y las palabras fueron hechos utilizando Tipsy, sumando algún parche para que anduviera bien en firefox.
Espero que le sirva a alguno!
No hay comentarios.:
Publicar un comentario