Timeline Storyteller es un entorno de narración visual expresivo para presentar líneas de tiempo en el navegador o en Microsoft Power BI.
Úselo para presentar diferentes aspectos de los datos de la línea de tiempo usando una paleta de representaciones, escalas y diseños de línea de tiempo, así como controles para filtrar, resaltar y anotaciones. Para obtener más información sobre la investigación que informó este proyecto, consulte timelinesrevisited.github.io , que incluye una encuesta de herramientas de cronograma y más de 200 cronogramas personalizados.
Vea estos ejemplos de líneas de tiempo e historias de líneas de tiempo creadas con Timeline Storyteller.
Mateo Brehmer
Bonghsin Lee
Nathalie Henry Riche
Darren Borde
Cristóbal Blanco
Kate Lytvynets
David Tittsworth
Clona la rama principal de este repositorio: git clone https://github.com/Microsoft/timelinestoryteller.git
Asegúrese de que nodejs, npm y Yarn estén instalados.
Abra una terminal en la raíz del repositorio e instale los módulos de nodo: yarn
O npm_install
.
Compilación public/app/timelinestoryteller.js: npm test
Inicie el servidor de nodo: npm start
Abrir localhost:8000
El código fuente de la aplicación se puede encontrar en el directorio src/.
Este repositorio contiene el código fuente de Timeline Storyteller como una aplicación web independiente. Para generar el objeto visual personalizado Timeline Storyteller para Power BI, consulte github.com/Microsoft/PowerBI-visuals-TimelineStoryteller.
Timeline Storyteller actualmente admite conjuntos de datos de eventos en formato CSV, JSON o hoja de cálculo de Google.
Cada evento se especifica mediante los siguientes atributos:
Requerido : start_date
, fecha: AAAA, AAAA-MM-DD o AAAA-MM-DD Se admiten los formatos HH:MMZ (ISO 8601) (es necesario Z para especificar UTC; de lo contrario, HH:MM dependerá de la zona horaria). Se permiten fechas antes de Cristo, por ejemplo, -27, -13800000000
Opcional : end_date
, fecha: usando el mismo formato que start_date
Opcional : category
, una cadena correspondiente a la categoría del evento (que Timeline Storyteller codifica como color)
Opcional : facet
, una cadena correspondiente a otra categoría del evento (que Timeline Storyteller usa para crear un diseño de línea de tiempo facetado; category
y facet
pueden ser idénticas si se desea)
Opcional : content_text
, una cadena de descripción del evento (que Timeline Storyteller expone como anotaciones de evento)
{ "start_date":"1775", "end_date":"1783", "content_text":"American Revolutionary War: an armed struggle for secession from the British Empire by the Thirteen Colonies that would subsequently become the United States.", "facet":"North America", "category":"North America" },
fila de encabezado:
start_date,end_date,content_text,facet,category
fila de evento de ejemplo:
1775,1783,American Revolutionary War: an armed struggle for secession from the British Empire by the Thirteen Colonies that would subsequently become the United States.,North America,North America
Aquí está el conjunto de datos de demostración de The Daily Routines of Famous Creative People utilizado en la demostración de Timeline Storyteller en una hoja de Google.
Asegúrese de que la hoja de cálculo esté publicada (abra el menú 'Archivo' de la hoja de cálculo de Google, seleccione 'Publicar en la Web').
Asegúrese de que las columnas start_date
y end_date
tengan el formato de texto y no de fechas (p. ej., '1926-06-29
).
Requerido : URL de la hoja de cálculo
Opcional : título de la hoja de trabajo (es decir, nombre de la pestaña) para este conjunto de datos: dailyroutines
Ingrese la URL de la hoja de cálculo y el título de la hoja de cálculo en el cuadro de diálogo de carga de Timeline Storyteller.
Tenga en cuenta que hay instrucciones de uso más detalladas disponibles en timelinestoryteller.com
Cargue datos de la línea de tiempo (conjunto de datos de demostración, JSON, CSV, hoja de cálculo de Google) o historia de la línea de tiempo guardada (un JSON Blob con extensión .cdc; consulte el paso 6)
Seleccione una combinación de representación, escala y diseño en el menú en la parte superior de la pantalla; sólo algunas combinaciones son válidas; consulte nuestra guía sobre cómo seleccionar combinaciones apropiadas para su historia. Pase el mouse sobre estas opciones para ver una información sobre herramientas que describe cómo podrían ser útiles.
Editar el lienzo
Haga clic en eventos para anotar con su etiqueta content_text
; cambiar el tamaño y reposicionar las etiquetas; MAYÚS + clic para resaltar eventos sin mostrar la etiqueta.
Anotar con leyendas e imágenes; cambiar el tamaño y reposicionar títulos e imágenes.
Filtre eventos por categoría, faceta o segmento. Filtre resaltando los eventos coincidentes (quitando énfasis a los eventos no coincidentes).
También puedes filtrar ocultando eventos que no coincidan.
Grabe el lienzo actual como una escena, que conserva etiquetas, leyendas e imágenes. Ingrese al modo de reproducción, navegue a la escena grabada anterior/siguiente.
Exporte el lienzo actual como PNG, SVG.
Exporte las escenas como un GIF animado o como un JSON Blob (extensión .cdc).
Narrador de la línea de tiempo
Copyright (c) Corporación Microsoft
Reservados todos los derechos.
Licencia MIT
Por el presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el Software), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión, publicación. , distribuir, sublicenciar y/o vender copias del Software, y permitir que las personas a quienes se les proporciona el Software lo hagan, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA TAL CUAL , SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO, PERO NO LIMITADO A, LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, AGRAVIO O DE OTRA MANERA, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTRAS NEGOCIOS EN EL SOFTWARE.
Si utiliza Timeline Storyteller para crear una línea de tiempo para un trabajo de investigación, puede citarnos de dos maneras. Puedes citar la herramienta en sí:
@misc{TimelineStoryteller, author = {Matthew Brehmer and Bongshin Lee and Nathalie Henry Riche and Darren Edge and Christopher White and Kate Lytvynets and David Tittsworth}, title = {Microsoft Timeline Storyteller}, year = {2017}, note = {url{https://timelinestoryteller.com}} }
O puede citar nuestro artículo reciente sobre el espacio de diseño de línea de tiempo:
@article{Brehmer2016, author = {Matthew Brehmer and Bongshin Lee and Benjamin Bach and Nathalie Henry Riche and Tamara Munzner}, title = {Timelines Revisited: A Design Space and Considerations for Expressive Storytelling}, journal = {IEEE Transactions on Visualization and Computer Graphics (TVCG)}, year = {2017}, volume = {23}, issue = {9}, pages = {2151--2164}, doi = {10.1109/TVCG.2016.2614803}, ISSN = {1077-2626} }
Cuadro biográfico de Priestley
Grandes filósofos desde el siglo VIII a.C.
Los imperios más grandes de la historia
Dinastías de Asia Oriental
Epidemias desde el siglo XIV
Primeros Ministros de Canadá
presidentes de francia
Cancilleres de Alemania
presidentes de italia
Primeros Ministros de Japón
Primeros Ministros del Reino Unido
presidentes de estados unidos
Huracanes C4-5: 1960-2010
Las rutinas diarias de personajes creativos famosos: 'Visualizando la vida de los pintores' por Accurat
'De las primeras publicaciones a las obras maestras' de Accurat
La 'Cuenta atrás hacia la singularidad' de Kurzweil
'Una perspectiva sobre el tiempo' de mayra.artes para Wait But Why
'La vida de un americano típico' de Tim Urban para Wait But Why
Todos los iconos CC BY 3.0, por nombre y autor:
marca de verificación (Arthur Shlain)
calendario (Kiril Tomilov)
línea de tiempo (Alecander Bickov)
archivo gif (Pranav Grover)
archivo png (Pranav Grover)
archivo svg (Pranav Grover)
archivo json (Pranav Grover)
archivo csv (Pranav Grover)
conducir (Denis Klyuchnikov)
cuadrícula (Doejo)
carpeta (iconos)
filtro (Shell creativo)
imagen (Shell creativo)
comillas (Veronika Krpciarova)
alfiler (Alexandr Cherkinsky)
borrador (Terrence Kevin Oleary)
invisible (Niño A)
libro (Setyo Ari Wibowo)