D3.js Force Layout implementation

A few months ago Darío (@druellan) and me worked on a project based on interactive infographics where D3.js was the JavaScript library of choice to build those visualizations.

Here you can see some short screencasts of our first development sessions. We used Force Layout and Drag’n Drop. 

Some testing and debugging in action for you.

D3.js: Debugging with Chrome Dev Tools

D3.js: More debugging with Chrome Dev Tools

A bit more advanced: In action!

Heat maps – Visualizando datos en mapas de calor

Un heat map (o mapa de calor) es una representación gráfica de datos en dos dimensiones, donde los valores individuales son representados por colores.

Un heat map simple provee un resumen visual inmediato de la información desplegada.

En nuestra actividad, a menudo se nos presentan oportunidades muy interesantes de poder trabajar con heat maps, y tratamos de aprovecharlas para aprender, sumar capacidades de desarrollo y herramientas de trabajo a nuestros equipos.

Como nuestro mejor currículum vitae es nuestro trabajo, comparto un screencast con algunas pruebas de concepto basadas en sets de datos abiertos, en las cuales geolocalizamos y desplegamos diferentes valores sobre un mapamundi. de forma tal que según la densidad de estos valores, se genere el heat map.

También sacamos provecho de GeoJSON como formato mediante el cual codificamos las estructuras de datos (que son simplemente puntos con valores referenciados mediante latitud y longitud).

ViosMaps – SVG Interactive Maps (Opensourced!)

ViosMaps

Now “opensourcing” another project started a few days ago: ViosMaps.

ViosMaps is a development aimed to help you create and render vector maps divided into regions (created in the SVG format), setting metadata and managing the interactions in an easy way.

The project started as a humble attempt to render and manage interactions with each region or province for the maps of Italy and Argentina.

The idea behind opensourcing ViosMaps is to be able to teamwork with developers around the world to share ideas and knowledge, generalize the codebase (by better modularization) and to add many great functionalities we can discuss about. It would be very nice if we also write good documentation encouraging more developers to use this resource as a library for their own projects.

Some examples

ViosMaps – Vector Interactive OpenSource Maps (SVG based interactive maps)

Ajustando un sitio en dispositivos con Android: Chrome remote debugging

Ajustando un sitio en dispositivos móviles con Android

Una interesante técnica que nos permite realizar el “fine-tuning” de los sitios para su visualización correcta en dispositivos móviles con sistema operativo Android 4.0 o superior, es el debug remoto. 

Consiste en la ejecución de las Herramientas de Desarrollo (Developer Tools) desde el navegador Google Chrome en su versión de escritorio, utilizándolo como “panel de inspección” de la ejecución de un sitio que se esté desplegando en Google Chrome para Android.

Para lograrlo, debemos tener instalado Android SDK, pues utilizamos la herramienta adb (Android Debug Bridge), así como también Chrome en su versión de escritorio, y también Chrome en el dispositivo Android.

Google explica con detalle este asunto. Les propongo intentarlo si tienen un móvil o tableta con Android 4.x a mano. Les aseguro que vale la pena.

Fuente: Remote Debugging – Google Developers