Regalos de carnaval para sandro

Hice 2 arreglos en sandro.

• Cambié la forma de usar rhino y ahora puede procesar archivos grandes de javascript de nuevo. Eso hace que ande d3 en el server nuevamente.
• Ahora los archivos .js que usa sandro tienen que estar encodeados en utf-8, permitiendo escribir en el código cosas como ( ͡° ͜ʖ ͡°).

Happy hacking,
Aureliano.

Projecto de ejemplo de sandro

Acabo de hacer público el projecto taleca. Ahí uso sandro para hacer una visualización de algunos datos que se usaron en el Hackatón de agro de la Fundación Sadosky. Es un ejemplo simple pero muestra cómo usar el general update pattern para hacer una visualización de d3 en sandro.

Te propongo que saquemos a sandro de las penumbras,
Aureliano.

Utilidades para d3 en sandro

Estoy trabajando en sandro, y surgen cosas interesantes. Ahora empecé a hacer utilidades para d3. Lo más interesante es que hice un método que encapsula y da entidad al General Update Pattern de d3 e hice que los nodos updateados tengan que sí o sí ser hijos del nodo referenciado (en vez de cualquier descendiente), para evitar un montón de bugs que se dan eligiendo nodos.

Para usarlo en sandro es así:
define(["sandro/nadaMas/d3", function(d3h) {
  // Acá hay código tuyo, que hace aSelection
  aSelection.call( d3h.gupChildren, {
    tag: "line", // nombre del tag de la entidad a insertar (obligatorio)
    klass: "aClass", // nombre de la clase de las entidades insertadas (optional, sin clase si no está escrita)
    values: [1,2,3,4], // datos para la visualización (función o array, igual que en d3)
    key: function(d,i) {.....}, // key para los datos, opcional. Funciona igual que en d3
    onEnter: function(s, defaultOnEnter) {....}, // acciones a tomar con la selección de los nodos nuevos. Opcional. Si no es seteada solo hace append de los nodos y les setea la clase si querés hacer eso y algo más defaultOnEnter(s) hace eso y devuelve la selección para seguir operando.
    onUpdate: function(s, defaultOnUpdate) {.....}, // acciones a tomar sobre la selección de los nodos modificados (tanto agregados, como cambiados). Opcional.
    onExit: function(s, defaultOnExit) {.....}, // acciones a tomar con la selección de los nodos que no matchean con los nuevos datos. Opcional. Si no es seteada solo hace remove. Si querés hacer eso y algo más defaultOnExit(s) hace eso y devuelve la selección para seguir operando.
    onUpdateOld: function(s, defaultOnUpdateOld) {.....} // Igual que onUpdate pero solo aplica a los nodos viejos
  })
  // Y acá más código
}
Si quieren, pueden usar el código as-is si usan requirejs, o adaptarlo un toque y usarlo en el browser como más les plazca. Pero, si quieren usarlo en el server también, la mejor forma que conozco es que usen sandro.

Espero que les guste!

Como lo hice yo

Estuve avanzando y empecé un módulo nuevo en sandro. Se llama comoLoHiceYo en honor a la canción de Sandro con el mismo nombre y tiene las configuraciones "opinionated" que hacen falta para unir cosas y que sea fácil compartir código entre cliente y server. Antes era posible, ahora es una pavada.
Éste es el código de una página de ejemplo que corre un pedacito en el cliente y otro en el server. Primero en el server, app/endpoint/clientCode.js es así:
define([], function() {
  return function(params) {
    var d3 = params.d3
    var startClientJs = params.startClientJs
   
    d3.select("body").append("div").text("Generated on the server")
    startClientJs("app/shared/clientCode")
  }
})
Y para el cliente está app/shared/clientCode.js:
define(["external/d3"], function(d3) {
  d3.select("body").append("div").text("Generated on the client")
})
Ya se empieza a ver que hay un montón de cosas que se pueden hacer en los dos lados. En este ejemplo, uso d3 tanto en el cliente como en el server para manipular el DOM.
¿Querés usar sandro? Decime y te ayudo.

Novedades en sandro

Tengo varias novedades de sandro. La primera es que separé el desarrollo del site de la biblioteca. Para eso hice el proyecto sandro-lib, donde tiene el proyecto sandro y sus tests. Por lo tanto, el proyecto queda así:

• sandro: Site principal. Corre los tests. En un futuro va a tener toda la documentación. Es el primer site hecho en sandro y siempre va a usar la última versión. Si tenés alguna duda sobre cómo hacer algo, podés mirar el código acá.
• sandro-lib: Biblioteca de base para hacer sites con sandro
• domino: Port del proyecto domino para correr en sandro

La segunda es que hice mi primer visualización en d3 corriendo en el server, como parte de las cosas que hice en el Hackaton de la fundación Sadosky sobre agro. Lo siento, no tengo commit de esto por ahora.

La tercera es que cambié la forma de exponer los scripts que se ejecutan en el cliente. Ahora hay una acción del módulo alFinal que expone los scripts, tomando por parámetro una función que decide si un módulo puede ser expuesto dado el nombre de su recurso. Acá el ejemplo de cómo anda:
      router = c.camino()
      router.register(c.prefixPath("/js"), alFinal.jsCode({
        published: function(resource) {
          resource = "" + resource
          return (
            resource.startsWith("/sandro/") ||
            resource.startsWith("/app/shared/") ||
            resource.startsWith("/external/")
          )
        },
        prefix: "/js"
      }))
Muchos avances en muy poco tiempo. Espero poder seguir así,
Aureliano

D3 en sandro

Basándome en la integración a sandro de domino, y el módulo comoTeDire, ¡hice andar d3 en el server en sandro! Con esto espero que podamos generar SVGs y visualizaciones indistintamente en cliente y server, y también quiero basar el sistema de templating de sandro en eso.
¿Alguien quiere financiar el proyecto? ¡Ya sandro hace cosas que ningún otro framework hace!

Selección de los hijos

En este post no estoy proponiendo al hijo del Kun para la selección de fútbol sino que quiero mostrar una solución a un problema puntual en d3. Hace un tiempito postié cómo hacer para hacer un selector de CSS que busque solo en los hijos de un nodo. El objetivo era hacer más robustas las selecciones de nodos en los gráficos que hago con d3. Lamentablemente ese truco no anda con un montón de browsers, pero encontré otro mucho más simple. Si queremos una selección con todos los nodos hijos de la selección actual, lo más fácil es hacer:

my_selection.selectAll(function() { return this.childNodes })

Al final era bastante fácil. No entiendo porqué esto no está en ningún lado. Casi siempre cuando uso selectAll quiero obtener los hijos de los nodos de la selección actual.

Happy hacking,
Aureliano.

CSS selector, hijo de un nodo

Update: Lo probé en Firefox 24 y no anda. La funcionalidad está implementada pero no está habilitado en la configuración por defecto (https://developer.mozilla.org/en-US/docs/Web/CSS/:scope).

En un montón de bibliotecas para el browser, como d3 o jquery podemos usar selectores de CSS para elegir nodos que son descendientes de un conjunto de nodos dado. Esta funcionalidad, casi siempre está basada en el método elem.querySelectorAll(css_selector). Hoy descubrí algo muy interesante de este método. Hay una pseudo-clase de css que se llama :scope y cuando es usada en el selector del método de arriba refiere al elem sobre el que se hizo la consulta.
Ésta pseudo-clase, la podemos usar para elegir a los hijos de un elemento que cumplan cierta condición. Por ejemplo, elem.querySelectorAll(":scope > .klass") busca todos los elementos hijos (y solo hijos, no nietos) de elem que tienen klass como clase.
Como las bibliotecas que mencioné al principio usan esto en sus entrañas, también se puede usar en las mismas cuando buscás nodos. Por ejemplo, en d3 sería algo así: my_selection.selectAll(":scope > g").
Happy hacking,
Aureliano.
PD: La información original sobre cómo hacer esto la saqué de acá.
PD2: Lo probé con d3 en mi Chrome y anda. La documentación de Firefox también dice que anda, pero no lo probé. El resto de los browsers son un misterio para mi. Si lo prueban en otros contextos, avisen.

D3 tips and tricks

Hace un tiempito que descubrí una fabulosa biblioteca que sirve para hacer visualizaciones y muchas más cosas, que se llama d3. Les recomiendo fuertemente que si quieren hacer cosas para browsers modernos le den una ojeada. Y buscando ejemplos y documentación sobre la misma encontré un libro on-line que me gustó, llamado D3 tips and tricks. En particular, me llamó la atención lo grosas que quedan las tablas cuando las hacés usando d3.


Happy hacking,
Aureliano.