ıllı Internet y Tecnologías de la Información (2018)

internet, Hosting, dominios, seo, antivirus, banco de imágenes, páginas web, tiendas online

[Enciclopedia Online Gratuita] Diccionario de Internet y Tecnologías de la Información y la Comunicación (TIC):

ıllı D3.js wiki: info, historia y vídeos

videos internet

salud  D3.js 


Los primeros navegadores de web aparecieron a inicios de la década de mil novecientos noventa. Eran en un inicio capaces de enseñar solo páginas estáticas: la única forma que los usuarios podían interaccionar con la página web era haciendo click en links y desplazando las páginas. Hubo muchos sacrificios para vencer semejantes restricciones. El más significativo fue la integración de JavaScript como el lenguaje para redactar algoritmos ejecutados en los navegadores de web. JavaScript gradualmente se transformó en el lenguaje estándar de hecho para crear páginas interactivas y es precisamente por esto que JavaScript fue elegido para redactar la librería D3.js.


Por otra parte, muchos estudiosos, ingenieros, y también interesados en otras ramas de la ingeniería ha estado por bastante tiempo en busca de herramientas que habiliten los navegadores web con presentaciones de datos. Hubo muchos proyectos con exactamente el mismo objetivo con niveles diferentes de éxito. Los más notables son las herramientas Prefuse, Bengala, y Protovis, los que pueden todos ser considerados como precursores directos de D3.js.


Prefuse fue un conjunto de herramientas de visualización creado en dos mil cinco que requería el empleo de Java para la creación de los infogramas, de un plug-in en el navegador para la visualización. Bengala fue un conjunto afín de herramientas creado en dos mil siete basado en ActionScript, el que requería un plug-in en Flash.


En dos mil nueve, basado en la experiencia en el desarrollo y empleo Prefuse y Bengala, el maestro Jeff Heer del conjunto de visualización de la Universidad de Stanford, su estudiante de doctorado Mike Boostock, y su estudiante de maestría Vadim Ogievetsky crearon Protovis, una librería de JavaScript para producir gráficos SVG desde datos. La librería ha recibido notable aceptación entre autores de infogramas y académicos.


En dos mil once, el desarrollo de Protovis fue interrumpido para centrar sacrificios en un nuevo proyecto, D3.js. Basado en las experiencias con Protovis, Boostock, así como Heer y Ogievetsky, desarrollaron D3.js para ofrecer un marco más expresivo que, al tiempo, se centra en estándares de la página web y da desempeño mejorado.


Embebido en una página de HTML, la librería D3.js usa funciones JavaScript predefinidas construidas para escoger elementos, crea objetos SVG, les da estilo, o bien agrega transiciones, efectos activos o bien les añade información. A estos objetos asimismo se les puede aplicar estilos usando CSS. Grandes conjuntos de datos pueden ser de forma fácil asociados a objetos SVG sencillamente con funciones de D3.js para producir textos extendidos o bien infogramas elaborados. Los datos pueden tener formatos variados, más en general JSON, CSV o bien geoJSON, si bien cuando hace falta, se puede redactar otras funciones JavaScript para la atrapa de otros formatos de datos.


El principio central del diseño de D3.js es habilitar al programador a fin de que utilice preferiblemente selectores al estilo de CSS para elegir elementos del Modelo de objeto del documento (DOM), entonces aplicar operadores para manipular los elementos escogidos de una forma afín a jQuery. Por servirnos de un ejemplo, con D3.js, se puede elegir todos y cada uno de los parágrafos HTML (segmentos de la manera

...

) y mudarles su color de texto, p. ej. a color lavanda (lavender): La selección puede estar basada en etiqueta (como en el ejemplo precedente), en clases, en identificadores, en atributos, o bien en localización en la jerarquía. Una vez los elementos son escogidos, se puede aplicar operaciones sobre ellos, incluyendo preguntar y mudar atributos, enseñar textos, y mudar estilos (como en el ejemplo precedente). Se puede asimismo añadir o bien suprimir elementos. Este proceso de crear, alterar y suprimir elementos HTML puede hacerse dependiente de los datos, lo que es el término básico de D3.js.

d3.selectAll("p")// Elegir de todos y cada uno de los elementos <p>.style("color","lavender")// Asignar al estilo "color" el valor "lavender".attr("class","squares")// Asignar al atributo "class" el valor "squares".attr("x",50);// Asignar al atributo "x" (situación horizontal) el valor 50px

Las transiciones dejan interpolar en el tiempo valores de atributos, lo que genera cambios visuales en los infogramas. El código siguiente va a hacer que todo parágrafo HTML (

...

) de la página cambie gradualmente su color al rosa:

d3.selectAll("p")// Escoger de todos y cada uno de los elementos <p>.transition("trans_1")// transición de nombre "trans_1".delay(0)// transición se empieza 0ms después de ser activada.duration(quinientos)// transición dura 500ms.ease("linear")// transición se anima con una progresión lineal....style("color","pink");// ... cara color:pink

Asociación de datos


En ejemplos más avanzados la carga de datos puede dirigir la creación de elementos. D3.js carga un juego de datos asociando a cada elemento un objeto SVG con propiedades (forma, colores, valores) y comportamientos (transiciones, acontecimientos) asociados.

// Datavardata=// Crear contenedor SVGvarsvg=d3.select("#hook").append("svg").attr("width",120).attr("height",120).style("fill","#D0D0D0");// Crear elementos SVGa partir de datossvg.selectAll("circle")// crear plantilla de círculo virtual.data(data)// asociar datos.enter()// para cada elemento de los datos....append("circle")// asociar círculo y datos semejantes que se asigna... .attr("id",function(d))// el id del círculo desde el país.attr("cx",function(d))// su situación horizontal conforme ingresos.attr("cy",function(d))// su situación vertical conforme la esperanza de vida.attr("r",function(d))// su radio conforme su población.attr("fill",function(d));// su color conforme el tono del país

El código SVG generado es la infografía desarrollada conforme los datos proporcionados.


Gestión de nodos basada en los datos


Una vez que un juego de datos es cargado en un documento, D3.js típicamente se usa siguiendo un patrón en donde se invoca una función de entrada .enter(), una actualización "tácita," y una función de salida .exit() para cada elemento del juego de datos asociado. Todos y cada uno de los métodos encadenados después del comando .enter() son llamados para cada elemento del conjunto de datos que no esté representado en la selección por un factor del DOM anteriormente elegido (con selectAll()). Del mismo modo, la función de actualización tácita es ejecutada sobre todos y cada uno de los nodos existentes que fueron elegidos para los que hay un factor pertinente en el juego de datos, y .exit() ejecuta para cada nodo existente escogido que no tenga un factor en el juego de datos. La documentación de D3.js da múltiples ejemplos de la manera como este patrón trabaja.


La empresa de infografía Datameer oficialmente emplea D3.js como su primordial tecnología, The New York Times produce ciertos de sus infogramas con D3.js. D3.js se emplea en el editor iD para alterar OpenStreetMap. D3.js ha sido ampliamente empleado para desarrollo de mapas, utilizando ficheros de entrada en GeoJSON y Topojson.


  ELIGE TU TEMA DE INTERÉS: 


autoayuda.es   Internet y Tecnologias 

Está aquí: Inicio > [ INTERNET ] > ıllı D3.js wiki: info, historia y vídeos

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Ver políticas