Gráficos Anotados

Sabemos que una imagen vale más que mil palabras. En algunas ocasiones, una imagen puede valer también más que mil líneas de código, pues nos permite hacernos una visión de conjunto del bosque antes de que nos perdamos por las ramas de la implementación, y ayudarnos a formular hipótesis de trabajo que aprovechan la habilidad innata del cerebro humano para encontrar regularidades en el desorden de los sentidos.

Apoyarnos en charts financieros no puede más que beneficiarnos si continuamos siendo estrictos  para la validación de dichas hipótesis y el backtesting de nuestras estrategias, y también con puede resultar un gran apoyo para compartir conceptos y resultados con un público más amplio.

Interactividad Básica

Vimos en un artículo anterior cómo utilizar Plotly para proporcionar interactividad a los gráficos e incluso añadimos una clase a nuestra librería pyalgoext para generarlos más cómodamente a partir de nuestros backtests.

Una operación muy común durante la fase de evaluación consiste en dibujar sobre los charts, realizar anotaciones, colocar líneas de tendencia y, en general, aumentar el gráfico original con comentarios, y ciertamente siempre podemos imprimir el gráfico directamente para trabajar con papel y boli, o bien hacer una captura de pantalla y usar un programa de diseño para dibujar encima suyo, desde el vetusto Paint hasta algo tan avanzado como Photoshop.

Ahora bien, al realizar esas operaciones perderemos la interactividad del gráfico, relegando a un contexto estático una pieza que originariamente era mucho más dinámica, lo cual es una lástima porque de hecho Plotly cuenta de por sí con capacidades para insertar anotaciones, líneas y formas en los charts via código.

Interactividad Aumentada

Lo que vamos a crear a continuación es un pequeño adaptador que permita exponer esa funcionalidad en el interfaz de nuestros gráficos, de manera que no resulte necesario que nuestros analistas financieros tengan conocimientos ni de programación ni de diseño gráfico para poder añadir sus ideas a la hora de analizar los gráficos.

Esta función que formará parte de nuestra clase iplots.py consta del siguiente código:

def augment(filename):
    dir = os.path.dirname(__file__)
    with open(dir + "/iplots_1.js", "r") as f:
        script_1 = f.read()
    with open(dir + "/iplots_2.js", "r") as f:
        script_2 = f.read()
    with open(filename, 'r') as f:
        text = f.read()
    m = re.findall("Plotly.newPlot\(\"([0-9a-zA-Z\-]*)\",", text)
    if len(m) == 0:
        return
    text = text.replace('{"linkText": "Export to plot.ly", "showLink": true}', script_1)
    script_2 = script_2.replace("[PLOTID]", m[0])
    text = text.replace("", "" % script_2)
    with open(filename, 'w') as f:
        f.write(text)
    url = 'file://' + os.path.abspath(filename)
    webbrowser.open(url)

La función augment se encarga de extraer el identificador único del gráfico en cuestión de Plotly.newPlot, e insertar dos scripts dentro de la página HTML para aumentar el chart original a través de la potente API JavaScript de Plotly. También se podría operar de una forma más externa, pero este acercamiento viene justificado por el deseo de:

  • Mantener todo el código contenido en un sólo archivo HTML, mucho más portable.
  • No vernos obligados a recrear el gráfico con una nueva llamada Plotly.newPlot con sus hooks correspondientes, que sería un derroche de recursos, sino manipularlo mediante llamadas a Plotly.update.

Ahora podemos utilizarlo de una manera muy sencilla: crear el chart original con plot (incluyendo un parámetro auto_open=False para evitar que se nos muestre directamente) y luego pasar la ruta del archivo a augment. Veamos un ejemplo adaptando el archivo que descarga los precios de cotización de la criptomoneda Ethereum, CryptoVizAug.py.

py.plot([viz], filename=filename, auto_open=False)
iplots.augment(filename)

Ejemplo con Un Sólo Plot

Screen Shot 2017-09-27 at 12.40.03 AM
Gráfico Interactivo de la Cotización del Ethereum (ETH)

Este es el chart que obtendrá al ejecutar el código (pulse sobre la imagen para verlo en vivo). Además de poder editar el título y todos los ejes del gráfico, lo más importante es que ahora la barra de herramientas incluye tres botones con nuevas funcionalidades:

Añadir Anotaciones

Screen Shot 2017-09-27 at 12.40.03 AM copy

Pulse en “Add Annotations” para activar la función, y luego sobre la línea del gráfico para insertar una anotación. Cada vez que pulse sobre la línea incluirá una nueva anotación hasta que pulse de nuevo sobre el botón para desactivar la función (toggle). Las anotaciones a su vez se pueden mover de sitio (arrastrando la flecha o el texto) y también editar (pulsando sobre el texto). Para colofón, puede incluso utilizar tags de HTML como para dar formato al texto.

Añadir Líneas

Screen Shot 2017-09-27 at 12.41.37 AM

La función de “Add Lines” también es de tipo toggle, y cada vez que usted pulse sobre dos puntos del gráfico estos se unirán mediante una línea discontinua, ideal por ejemplo para visualizar la directriz de tendencia principal.

Screen Shot 2017-09-27 at 12.42.39 AM
Títulos, Ejes, Anotaciones y Líneas sobre el Chart

Borrar Todo

Screen Shot 2017-09-27 at 12.41.27 AM

Simplemente pulsando sobre el botón de “Erase Additions” se borrarán todas las anotaciones y líneas que se hayan añadido anteriormente al gráfico.

Esta plataforma se puede extender para incluir otra funcionalidad deseable, como una operación de borrado individual, la posibilidad de incluir otro tipo de formas, figuras e indicadores, y un largo etcétera. A tal efecto puede encontrar el código fuente javascript en este archivo “no minificado” plotlyext.js del repositorio GitHub.

Ejemplo con Varios Gráficos

Para demostrar que este código también es compatible con los plots generados por PyAlgoTrade vamos a adaptar nuestra estrategia de trading sobre la criptomoneda Bitcoin. lo cual no va a requerir más que dos líneas de código, como podemos constatar en el archivo BitcoinStrategyAug.py.

filename = "../store/bitcoinstrategy-augmented.html"
iplots.plot(plt.buildFigure(), filename=filename, auto_open=False)
iplots.augment(filename)

Y este será el gráfico que obtendremos al ejecutar la estrategia. No dude en pulsar sobre la imagen para disfrutar de la versión en vivo.

Screen Shot 2017-09-28 at 1.51.13 PM
Resultados Interactivos de la Estrategia sobre Bitcoin
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s