Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:17
What would you like to do?
Odyssey Editor Workshop

Telling Tales with Odyssey.JS

odyssey intro

####Prerequisite Notes




  1. What is Odyssey?

  2. Odyssey Sandbox

  3. Odyssey JS API

  4. Resources + Wrap Up

What is Odyssey?

  • open source library for coders and creatives building narrative with data
  • sandbox to stack data sensitive to spacetime
  • set of docs and education resources to learn how to further customize stories with maps

####Odyssey Projects

Odyssey Sandbox

The Odyssey Sandbox allows you to build stories in Markdown and Yaml Syntax, and provides you templates for building progressive and chapterized narratives.

#####Documentation here.

Configuring your Odyssey Project

Navigate to the sandbox link here.

Choose Template

  • Select "Slides"
  • You can set the general project configuration between the ``` in the tray at right; like so:
-title: "Historical Lakes and Rivers"
-author: "Aurelia Moser"

Creating a Story


  • Below your config section, you can write in markdown syntax to populate slides
  • Select the add button at the left of each to reset the zoom level and center focus for each "slide"

Customizing your UI

Aral Sea

  • add images and links to build your narrative
  • change your basemaps to test new versions
  • add a vis.json from an existing cartodb map to load those data in your new project
  • export it as a file and self host to preserve your project

Odyssey JS API

You can also use the JS API to incorporate Odyssey into your own projects!

Documentation here

Configuring your Odyssey Project

We'll make this project a Scroll Odyssey narrative.

Creating a Story

Let's add some more narrative and images to this one, pulling resources from Wikipedia!

You can find sample text, source links, and image urls in this doc.

  • copy the template, and edit the text between <p> and <h2> tags to change the narrative that generates.

content div

  • add odyssey to your html project between <script> tags
  • use your vis.json url to pull in your map
  • add events and state to your story to trigger the zoom and center lat/long reset as you scroll

interact div

Customizing your UI

  • add images and text and style with css as you would in any html project
  • host on gh-pages or bl.ocks for a quick deployment

final scroll

Check out the finished sample here. Please sign up with your email at the door so we can send you links to these resources!



Reach Out

Aurelia Moser Map Scientist @auremoser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment