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.

##_NOT_FOUND_IMAGE_## https://i.imgur.com/YBH8KSM.jpg ##_NOT_FOUND_IMAGE_##

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.

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:

##_INIT_REPLACE_ME_PRE_##
SELECT ST_MakeLine(the_geom_webmercator)
AS the_geom_webmercator
FROM loomstateviz
##_END_REPLACE_ME_PRE_##

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

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}.cartodb.com/api/v2/viz/{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.