d3js-demo

Este tutorial está escrito en ES5, para ofrecer un buen soporte a distintos navegadores.
Sin embargo, en esta rama, puedes estudiar los mismos ejemplos traducidos a ES6. :sparkles:
D3 + ES6 = 💞

Descripción

Este repositorio almacenará los archivos del demo sobre D3.js. 😀
El objetivo de esta presentación es comprender los conceptos esenciales de esta librería,
mediante la construcción guiada de un sencillo —pero siempre fiel— diagrama de barras.

Contenido

Nombre	Descripción
README.md	this.
index.html	Documento base del demo.
style.css	Hoja de estilos principal.
snippet01.js	Breve repaso de JavaScript.
snippet02.js	Primeros pasos con D3.js.
snippet03.js	Enter, update, exit.
snippet04.js	Escalas, colores.
snippet05.js	Ejemplo: mapa de Santiago.
data/	Datos para el ejemplo final.

Requisitos

Es recomendable que los participantes de este demo lleven sus computadores
con un full-featured editor de texto —como Atom— y un navegador moderno.
De preferencia, la última versión de Mozilla Firefox o de Google Chrome.

Lanzar un web server

Para trabajar con el ejemplo del mapa de forma local, es posible que necesites un servidor web ad hoc.
Por motivos de seguridad, algunos navegadores (e.g. Chrome) no cargarán ciertos archivos locales.
Y por lo tanto, en este contexto, el navegador no querrá abrir los datos ubicados en este archivo.
Luego, la idea es invocar un sencillo web server que sea capaz de servir archivos locales vía HTTP.

¿Cómo?

Nos podemos servir de las “baterías incluidas” de Python 3 (usualmente conocido como Python)
que tienen lo suficiente para crear un servidor. De hecho, sólo nos bastará con seguir dos pasos. :relieved:

1. 🐍 Ejecuta este elegante one-liner.

   $ python3 -m http.server [port]

   Nota: el parámetro port permite especificar un puerto alternativo (por defecto, abrirá el 8000).

2. 🦊 Abre tu navegador favorito y ve hacia http://localhost:8000.

Alternativas a Python

Pero espera, sinceramente, ¿por qué querrías una alternativa a Python? 😨
Porque, si no lo tienes instalado en tu computador, puedes bajarlo desde aquí.

De acuerdo. No seguiré insistiendo. Si realmente prefieres utilizar algo distinto de Python,
veamos, entonces, cómo lograr esto con dos herramientas: con Ruby y también con Node.js.

Ruby 2.3+

De manera similar a Python, sólo necesitarás escribir una breve línea de código.

$ ruby -r 'un' -e 'httpd' [-- --port <port>] # por defecto, abre el puerto 8080.

Y si no tienes tiempo para escribir tanto, acá te dejaré una opción más concisa.

$ ruby -run -ehttpd [-- -p<port>]

Node.js

No es sencillo lanzar un servidor web en Node.js, sin utilizar alguna librería third-party.
Por ejemplo, una de ellas es http-server; sin embargo, deberás escribir dos comandos.

$ npm install -g http-server # ojo: esto instalará 'http-server' de forma global.
$ http-server [-p <port>]    # por defecto, abre el puerto 8080.

Referencias

• Thinking with joins — Mike Bostock
• Let’s make a bar chart — Mike Bostock

Licencias

• El código de este repositorio está bajo el Mozilla Public License v2.0.
• El documento santiago.geojson fue adaptado a partir del archivo encontrado en este repositorio.