#knightlab

Raconter une histoire en s’appuyant sur une carte : c’est Story Maps (©cocoparisienne).

Story Map étant un logiciel Open Source, au moins deux éditeurs proposent d’utiliser ce logiciel très malin. Petit rappel : cet outil permet d’associer des images sur un fonds de carte. J’en ai déjà parlé brièvement ici. Il s’agit de StoryTelling, l’art de raconter des histoires, de scénariser des événements.

StoryMap JS is an interactive story-mapping tool which allows annotation by using text, photos and videos. 

StoryMap facilitates doing an expansive story that is spread across different parts of geography. The tool helps give the story some visual reference in the form of a dynamic map, on which stories can be pinned with their exact location.

Here's a guide on how to get started with StoryMap: 1. Type in 'http://storymap.knightlab.com/' in your browser's address bar. 

2. Click the 'Create' link on the page.

3. The next window would ask for Google Drive authorization, if you are accessing it for the first time or you are not logged into your Gmail account. 

4. A small window opens up which shows the list of StoryMaps saved in your account. If you are using it for the first time, click 'New'.

5. It then asks you to define the kind of story you would like to do with StoryMap. You get two options - Map or Gigapixel.

// TIP Map allows you to add information to a wide spread of the world map. Gigapixel lets you add context to an image, with individual elements marked in a photograph.

6. Click on 'Map'. Give it a name. I have titled my StoryMap 'The Riotous History of Uttar Pradesh

// TIP Don't go overboard with the title of your story. No poetic names. Stay as factually relevant as possible.

// TIP Attempt a story which has geographical significance apart from the information attached, and a trend can be mapped.

7. After providing a name, the next place is where the action begins. 

   8. This is your title slide. Introduce your topic to the reader. Input a suitable heading, along with a brief description of the information. You may add relevant media sources, with proper credit and captions in place to be used as a reference. 

9. Then click add slide with the plus '+' icon on the left side. 

10. A new slide would get created with a horizontal map on the top. This is the edit tab. Look for a white text box strip on the lower-center of the map. That's the place where you type in your location related to the story.

// TIP Clicking on the preview tab allows you to check the flow of the StoryMap as you step further while adding elements to your story.

  11. Then fill in other relevant information such as 'Heading', body text, 'Media' along with it its credit and caption. Continue this step for as much information and places you would like to make it for. 

// TIP Try to stay precise in your textual information.

// TIP The slide options on the bottom-right corenr allows you to add a photograph to the slide background. From here you may also choose another color instead of white as your slide background. 

// TIP Proper credits should be mentioned for all the media sourced from anywhere. Caption should ideally explain the picture or the media used in context of the information in text. 

12. After successfully adding all the relevant information. Click 'Save' and 'Publish Changes'.

// TIP Clicking Publish Changes after each edit is necessary otherwise newer editions may not reflect on the final StoryMap. If embedded anywhere, the StoryMap would also get updated after publishing changes.

13. To share the link of the project or to embed the anywhere, click on 'share' option on the top-right corner. A share-able link would appear, along with an embed code for the StoryMap. Adjust the height and width of the final output. Copy the code.

This process documentation is a satirical take on what career paths I wanted to choose at various stages in my life. 

By Liz Sawyer

This semester in particular I've enjoyed learning about the Knight Lab's interactive storytelling tools. In DataViz, we played around with Timeline.JS where users can turn ordinary, dull text timelines into searchable, extendable timelines with photo and video capabilities. I'd heard a lot about the new StoryMap system and wanted to experiment making a data timeline that involved maps to assist in storytelling. What I found was an incredibly useful device to illustrate trends around the country.

As a news reporter, I wanted to choose data that was both timely and important for readers to continue thinking about. School shootings have dominated the national media since the Sandy Hook elementary tragedy last year. What the general public probably doesn't realize, though, is that there have been at least 44 more school shootings since the Newtown massacre that killed 20 children and six adults.

And even more recently, a 17-year-old boy planning to set off bombs in his Waseca, Minnesota school was stopped before he could carry out his scheme. That was Sunday. 

For this reason, I chose to map the deadliest school shootings in U.S history for my extended lab assignment. I used data from USA today and other news outlets to determine school shootings with the highest fatality and injury counts dating back to 1966. 

Inputing the information into StoryMap was surprisingly intuitive, especially for someone who isn't super tech savvy like me. I liked the clean display of the photo and event description next to the "roadmap" feature. My only beef with the program was that it didn't allow you to upload videos in place of photos. This would be a useful function for events/stories that require a more detailed explanation and would benefit from multimedia capabilities.

The finished product was more appealing to me than even an interactive timeline, like Timeline JS, because it allows the user to geographically track data. In my case, you can clearly see that school shootings aren't confined to one particular region of the country, although there seem to be fewer (of the deadlier shootings) in the Southwest and on the West Coast. 

Editor's note: Had I tracked all mass killings and not just those confined to schools, there would be an exceedingly large amount in Colorado. I don't know why that is, but research shows that state has more.

Here's the link to my StoryMap:

This doesn't just apply to iOS6. I ran into a very confusing problem in developing StoryMapJS in which two things needed to animate at the same time. In chrome (webkit) everything worked fine, but in Safari and WebKit one of the animations would not work or was seriously slow. The problem was one animation used hardware acceleration and the otherone wasn't. Triggering hardware acceleration on both animations fixed the problem.

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;