Map of the Week: An Odyssey.js story by Loomstate


This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Map of the Week: An Odyssey.js story by Loomstate

Welcome our own Laura Guzman to our Map of the Week series. Guzman is a Technical Intern in our New York office and she teamed up with sustainable clothing company Loomstate to build an Odyssey.js visualization of how Loomstate’s newest product is made.


Loomstate is an organic cotton clothing brand founded in 2004 by Scott Mackinlay-Hahn and Rogan Gregory in NYC. For their newest product profiled here they partnered with TS Designs to produce a collection of t-shirts that are grown and sewn entirely in America. Loomstate knows the people behind each step of the process from the cotton farm all the way to the dairy farm (follow the journey to find out more) and they are very proud to share our supply chain in full transparency here.

The story

The average cotton t-shirt is a product of a global journey thousands of miles long from cotton harvest through multiple countries for thread-knitting and cloth-cutting before reaching a store shelf. This journey and the average tee-making process is not always transparent nor is it always sustainable.

That is where Loomstate comes in. Loomstate is committed making quality clothing to create a sustainable future. Their focus is on the long-term relationships with the factories they choose to use the farms they choose to source from and the communities they choose to work with. Loomstate seeks long-term purchasing agreements with organic cotton farms in order to support the sustainability and resiliency of their communities. This particular map documents the story of Loomstate’s most traceable tee which is grown and sewn in America all the way from the cotton farm to the cutting floor and finally to a glass of milk. >Follow the journey here.

To tell the story of Loomstate’s most traceable tee we used Odyssey.js an open-source storytelling tool by CartoDB. The Odyssey.js mapping platform allows Loomstate to present their detailed story. It fosters more transparency and storytelling than would normally be possible with just video image and text. It allows Loomstate to educate their customers on their purchase and provides them with the information needed to feel good about what they are wearing.

Using Odyssey.js

The visualization was created straight from the Odyssey.js Sandbox using the “Slides” option. Each step of the tshirt-making process became a slide of its own centered around the location where the step of the process took place. Take a look at the screenshot below to see how it was staged in the Odyssey.js Sandbox before we get into the process.

organic cotton gin on odyssey.js

Gathering locations & pulling together a story

The first step was to identify all of the locations in the process we’d like to feature. Loomstate provided the locations and steps of the tshirt-making process. Once I had these it was just a matter of finding their coordinates to put into the Odyssey.js Sandbox. To find the latitude/longitude coordinates I used a geocoder on the addresses that Loomstate provided.

Once I had the coordinates for each location I created a marker using the “Add” function in the Sandbox and placed it where each step of the process was. This meant manually editing the coordinates created by my adding a marker. I then tested different center and zoom parameters for the slide settling on those that were the clearest.

Next up working with Loomstate I added more content. We drafted a list of steps wrote some text to go along with the locations and included images to illustrate the process. Under each slide (demarcated by a “#”) and its respective zoom coordinate and marker positions we placed the text and image story.

Using a vizjson

In order to give a coherence to the whole process and illustrate the path from beginning to finish we added a vizjson. To do so we first created a table with each latitude/longitude location included in the steps of the process. After importing this table into CartoDB we ran a basic SQL query to join them into a linestring. It looked like this:


SELECT ST_MakeLine(the_geom_webmercator)
AS the_geom_webmercator
FROM loomstateviz


We loaded that into the config block of our Odyssey.js visualization by adding a line that looks like:

{% highlight text %} -vizjson: “http://{your username}{unique viz ID}/viz.json” ##_END_REPLACE_ME_PRE_##

To get the URL necessary we clicked “Share” in the visualization and copy/pasted the API link in to the Odyssey.js Sandbox.

With that the basics of the map were ready to go!

Cleaning it up

To finish up the visualization we created custom HTML and CSS to have greater control over the design. To do this we just clicked the share button from the Odyssey.js Sandbox edited the HTML added our CSS and uploaded it to GitHub Pages.

Check out our other Maps of the Week and go to Odyssey.js to start creating your own map-based interactive stories. Have you done one already? Share it with us on Twitter: #Odyssey.js.