Odyssey.js: learn to create interactive stories


This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Odyssey.js: learn to create interactive stories

##_NOT_FOUND_IMAGE_## https://i.imgur.com/Re3vQCK.png ##_NOT_FOUND_IMAGE_##

Yesterday we announced the beta release of Odyssey.js the open source library that enables journalists designers and creators to build map-based interactive stories on the web. How can you use it? It’s easy! Here is a quick intro:

Create a new project in only three steps

1. Combine visualizations with narrative

Do you have a great idea? That and a modern web-browser is the only thing needed to make a beautiful narrative project online. Start creating your story in the Odyssey.js sandbox we have created for anyone to explore and play around. Choose the template that better suits the story you want to tell: slides scroll or torque (animated map).

If your story is simple and the map is the principal element the slide template will be the best option. On the other hand the scroll template works better with stories that have a lot of editorial content such as images and texts. Finally if your data is animated the torque template is perfect for adding extra information to your stories.

odyssey js sandbox example


2. Markdown editing

Markdown is a human readable markup language which is an easy way to write text on the web that easily translates into HTML. The Odyssey.js sandbox allows you to write your story using Markdown. A story is divided into chapters which lets you give structure to your story. Each chapter begins with a tittle and then can contain a mix of headlines text and other Markdown elements (images links etc.). In the sandbox you also have controls to define the position and zoom of the map as well as controls for the animated stories.

##_NOT_FOUND_IMAGE_## https://i.imgur.com/J7zi16M.png ##_NOT_FOUND_IMAGE_##

3. One click publishing

Sharing your final story is one click away. Using the publish button you can download the project to save a local copy you can have a public link to share and view your story or even have a code to embed your creation on your website or blog.

Here you have a screencast that walks you through the process:

Go to Odyssey.js site for complete documentation of the sandbox the JavaScript library reference and examples. And create your free account in CartoDB to further develop your map-based storytelling expertise.

Have you already created Odyssey.js stories? Share them in Twitter: #odyssey.js