# data[].attributes.body
Le lien vers la carte où les écoles sont géolocalisées : ici

# data[].attributes.body
Le document que vous avez eu en octobre, si vous avez besoin de le communiquer.

# data[].attributes.headline
Storytelling 1: StoryMap - Mettre ses documents sur une carte

# data[].attributes.subject
Storytelling 1: StoryMap - Mettre ses documents sur une carte

# data[].attributes.body
Permet de rassembler tous les documents d'un groupe ou d'une classe, ou même de plusieurs groupes d'un même thème. Il suffit de décider d'un point d'ancrage sur la carte pour chaque document. Celui-ci me paraît particulièrement adapté au projet - il y a 2 façons de faire, sur une carte géolocalisée ou sur une image - je recommande l'exemple sur le tableau de Bosch !

# data[].attributes.attachment_link.readable_text
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. It is a new tool, yet stable in our development environment, and it has a friendly authoring tool.

There are a couple ways you can make a StoryMap.

Maps

Add a slide for each place in your story. Setting the location is as easy as a text search for the name or address. You can change the visual style of your map with a few presets, or you can use Mapbox to create your own style.

Really big images

You can tell stories with large photographs, works of art, historic maps, and other image files. Because it works best with pixel-dense files, we call these gigapixel. Setting one up requires you to host files on a web server.

Learn more about gigapixel

Tips & tricks

1. Keep it short. We recommend not having more than 20 slides for a reader to click through.

2. Pick stories that have a strong location narrative. It does not work well for stories that need to jump around in the map.

3. Write each event as a part of a larger narrative.

4. Include events that build up to major occurrences - not just the major events.

Media sources

StoryMap JS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!

Examples

Help

Need help? First, please be sure to look at our list of frequently asked questions below.

If you don't find an answer there, try our support forums or use our tech support web form. Please be clear with your question, include a link to your spreadsheet, and if appropriate, a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a dedicated tech support staff.

Find a bug? If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.

Technical documentation

Go further with StoryMap:

Frequently asked questions

What CMS does StoryMapJS work on?

Please let us know if you have tried it on others and it works, so that we can add to the list.

Why aren't my Google Drive or DropBox Zoomify images working?

Unfortunately, Google has deprecated web hosting in Google Drive, which means that Zoomify images hosted on Google Drive. will no longer display. Dropbox has similary discontinued rendering content in public folders, so this method will cause problems for many users as well.

We find that many people aren't familiar with web image hosting, so we've written up instructions for two solutions so far: hosting on Amazon Web Services, and on Github.

Why are my DropBox images not showing

First the image must be in the public folder.

To get the image URL change the domain name from the link that dropbox creates.

Incorrect: https://www.dropbox.com/s/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

Correct: https://dl.dropboxusercontent.com/u/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

How can I have a map without the lines between points?

To disable connecting lines on maps, use the StoryMap option: Treat as Image (as opposed to the default, Treat as Cartography)

How can I link to a specific slide?

You can add a parameter to the URL that is the value of the iframe src attribute, start_at_slide. Its value should be a number from 0 to one less than the total number of slides in the storymap.

For example: http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=//media.knightlab.com/StoryMapJS/demo/sochi.json&start_at_slide=5

This should load Sochi 2014 Olympic Torch Relay Highlights: Slide 5.

How can I use a custom map?

Choose options from the top left of the StoryMap window, then from the map type menu choose the type you like.

Select Mapbox to enter the ID of your Mapbox map.

Select custom to enter the URL for a tile server. If the server supports multiple subdomains, enter them as a single string in the Subdomain field (e.g. subdomains 'a', 'b', and 'c' should be entered as 'abc').

How can I adjust the zoom?

To keep it simple for most users, we've made some assumptions in the authoring tool which may not universally apply. For example, the first screen is always an overview slide. Also, the zoom is affected by the overall size of the map and the relationship between the current and previous points on the map.

It's possible to download the configuration (a JSON file) that the authoring tool makes and edit the JSON yourself. You could then change the first slide to not be an overview and manually set a starting lat/lon/zoom.

Be aware that switching back and forth between editing within and outside the authoring tool can get messy, so we suggest using our advanced method to have maximum control over the zoom feature and more.

Privacy Policy

The StoryMapJS editor uses your Google account to make sure that only you can edit your storymaps. This saves you from needing to remember another password, and saves us from having to help you if you forget it. We only ask for your "profile," which gives us a unique identifier which we can use to connect you to your projects. We don't have your name or G-mail address.

Originally, the StoryMapJS editor stored your projects on your Google Drive, but that is no longer the case. We used to ask for access to your Google Drive. If you made storymaps a very long time ago and have not used the tool since, we may need to ask you to give us permission to read from your Google Drive to "migrate" your old projects.

Please note that it is possible to use StoryMapJS without a Google account; however, it is not possible to use our editor tool. If you prefer not to use a Google account, you will need to manually edit a configuration file and you will need to serve your configuration file and any related media assets from your own server. Some more information about this can be found on our StoryMap for Technical Users page.

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.
View More

# data[].attributes.headline
Storytelling 2 Juxtapose - Juxtaposer deux images d'un même endroit à un moment différent

# data[].attributes.subject
Storytelling 2 Juxtapose - Juxtaposer deux images d'un même endroit à un moment différent

# data[].attributes.body
Peut permettre de montrer les transformations de la porte de la Villette avec des images d'archives, mais aussi de juxtaposer à une vue aérienne une proposition future faite par les enfants

# data[].attributes.headline
Outils en ligne de storytelling qui pourraient nous servir

# data[].attributes.subject
Outils en ligne de storytelling qui pourraient nous servir

# data[].attributes.body
Lien vers le Knight lab, laboratoire porté par la Northwestern University Chicago-San Francisco. Ils ont créé des outils faciles et simples d'utilisation, gratuits, orientés journalisme, pour raconter d'une autre façon.  (en anglais). Les 4 présentés dans les posts suivants sont vraiment chouettes.
> Voir le site des projets : https://knightlab.northwestern.edu/projects/

# data[].attributes.body
Le document du projet en parallèle duquel Passage(s) s'inscrit

# data[].attributes.attachment_link.title
Programmation Reconquête urbaine février 2016

# data[].attributes.body
Pour montrer aux enfants où ils vont jouer, comment ça se passe en vrai… avec un regard théâtral, ça peut être très intéressant et amusant !

# data[].attributes.attachment_link.description
Site officiel présentant l'actualité et l'agenda, les élus, informations pratiques, touristiques, sociales et géographiques, économiques et (...)

# data[].attributes.headline
Être délégué(e) de classe, ça s’apprend !

# data[].attributes.subject
Être délégué(e) de classe, ça s’apprend !

# data[].attributes.body
Reportage au Conseil départemental du 93 avec des collégiens délégués de classe invités à se former à la citoyenneté

# data[].attributes.body
De courtes vidéos pour expliquer nos institutions aux enfants… très bien et plutôt drôle

# data[].attributes.attachment_link.description
L'Assemblée Nationale vote les lois qui organisent notre société et contrôle le gouvernement. Elle forme, avec le Sénat, le Parlement. Les membres de l'Assemblée s'appellent les députés : au nombre de 577, ils sont élus pour 5 ans.

# data[].attributes.body
Moteur de recherche pour des œuvres pouvant être copiées, distribuées, modifiées, remixées ou encore adaptées tout en respectant les lois sur le droit d’auteur. CCsearch prend ses images au Rijksmuseum, la bibliothèque de New York, le Metropolitan ou encore sur Flickr ou 500px.

# data[].attributes.headline
Storytelling 3 Timeline JS - Raconter sur le temps

# data[].attributes.subject
Storytelling 3 Timeline JS - Raconter sur le temps

# data[].attributes.body
Peut être intéressant pour montrer les transformations dans le temps, passé, présent et futur en utilisant les propositions des enfants

# data[].attributes.attachment_link.readable_text
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.

Knight Lab

Watch this brief video for an overview of how to make a timeline.

Tips & tricks

1. Keep it short. We recommend not having more than 20 slides for a reader to click through.

2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.

3. Write each event as a part of a larger narrative.

4. Include events that build up to major occurrences - not just the major events.

Media sources

TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!

Examples

Make a Timeline

TimelineJS works on any site or blog. Make your own in four easy steps.
Having trouble? Watch our video, or see the help section below.

1. Create your spreadsheet

Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Make a Copy" button.

Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.

Get the Spreadsheet Template

Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

2. Publish to the web

Under the File menu, select "Publish to the Web."

In the next window, click the blue "publish" button. When asked, "Are you sure...?" click OK.

Now, copy the URL that appears in the center of the window. You'll use this in the next step.

The following has changed as of 18 July 2017!

Close the 'Publish to the web' window. Copy the URL for your Timeline from the browser's address bar. It should look something like this:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#gid=0

Disregard the URL that appears in the "publish to the web" window. It used to be used below, but changes to Google mean that you'll get an error if you use it now.

3. Generate your timeline

Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)

4. Share your timeline

Share Link

Use this to link directly to your timeline.
If you're embedding on Medium.com or other oembed-aware services, just paste this link on a line by itself where you want your timeline to appear.
Embed

Copy this embed code and paste it on your site where you want your timeline to appear (just like a YouTube video).

Preview Open Preview in a new window

Help

Need help? First, please be sure to look at our list of frequently asked questions below. If you're brand new to Timeline JS, you may also want to watch our introductory video.

If you don't find an answer there, try our support forums or use our tech support web form. Please be clear with your question, include a link to your spreadsheet, and if appropriate, a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a dedicated tech support staff.

Find a bug? If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.

Technical documentation

Go further with Timeline:

Frequently asked questions

There aren't enough options. I want more control over the [font size/color/etc]. Can I change things using CSS?

Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's CSS rules and have complete control over the look of the timeline. For details, see Using the TimelineJS CSS selectors. You will need to be able to instantiate the Timeline in javascript on your own page. (There is no way to override the CSS using the iframe embed.) Then, either in <style> tags in that page, or in an external stylesheet, you can specify CSS rules changing some or all of TimelineJS's default presentation. The basis of TimelineJS's styles are in these files, which use the Less CSS preprocessor.

The first slide in my timeline isn't the first chronologically. Why did this happen?

When using the Google Spreadsheet to configure your timeline, if you put the word title in the type column, that slide will be put at the front, regardless of the values in the date columns. See the Google Spreadsheet documentation for more information.

How can I format text (add line breaks, bold, italics)?

TimelineJS's text fields (headline, text, caption, and credit) all accept HTML markup. A full tutorial on HTML is outside the scope of this FAQ, but here are a few basics:

Wrap paragraphs in <p></p> tags to create line breaks.

Wrap text in <b></b> tags for bold text and <i></i> for italics

To enter dates before the common era, just use a negative value for the year. Of course, you can also enter month and date if you need them.

Generally, you don't have to think about it -- just enter the dates you want. Timeline can handle dates literally to the beginning of time. For dates more than about 250,000 years ago, only the year is usable. Support for those older dates is still relatively new, so if anything seems off, visit our tech support site.

Privacy is very important to me. How should I use TimelineJS?

If you want complete control over who can see the information in your timeline, you cannot use Google Spreadsheets, and you cannot use our standard iframe embed code. Instead, you must use JSON format for the data and instantiate the timeline directly using javascript. You can then use standard web server security measures to control who has access to your timeline and the data used to create it.

Can I use TimelineJS with Wordpress?

It depends. TimelineJS does not work with Wordpress.com sites. We are researching ways to address this.
If you are able to install plugins to your Wordpress installation, we have a Wordpress plugin for Timeline. It supports embedding Timelines with Wordpress "shortcode", and as of version 3.3.14.0, it also has experimental "oembed" support. That means that you can take a direct URL to a timeline (like you get with the "get link to preview" button) and put it in a post on a line by itself, and it should be embedded. (Make sure you've updated the plugin before you try it.)

Is TimelineJS free for commercial use?

TimelineJS is released under the Mozilla Public License (MPL), version 2.0. That means that TimelineJS is free to "use, reproduce, make available, modify, display, perform, distribute" or otherwise employ. You don't need our permission to publish stories with TimelineJS and you don't need to pay us any fees or arrange any further license beyond the MPL. To read more about what you can do with TimelineJS, read our license page.

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.
View More

# data[].attributes.attachment_link.description
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.

# data[].attributes.headline
Storytelling 4 Soundcite - Du son sur des phrases

# data[].attributes.subject
Storytelling 4 Soundcite - Du son sur des phrases

# data[].attributes.body
Pourrait servir à mettre des extraits de sons d'interviews sur le texte de la transcription. Ça permettrait de garder des sons intéressants pour l'ambiance, mais pas forcément de bonne qualité. Écoutez les exemples

# data[].attributes.body
Un exemple de ce qu'on peut trouver via les outils TICE, ce site qui recense tout un tas de vieilles cartes, dont cette très belle du 18e : http://www.oldmapsonline.org

# data[].attributes.body
Voici une veille que j'aime beaucoup, centrée sur les outils pour la classe. Vous connaissez sans doute/peut-être. C'est pratique si vous cherchez à faire quelque chose de précis, la solution est peut-être recensée : https://outilstice.com

# data[].attributes.body
Site national pour éditer une carte de n'importe quel endroit, en choisissant le fond et les données.

# data[].attributes.body
Site très pratique pour voir de n'importe quel point de vue et très facile d'utilisation.

# data[].attributes.body
Voici une photo de la table au milieu du cercle des élus sur laquelle vous pourrez poser vos maquettes. (Dimensions 6m20 x 3m40). Elle peut monter et descendre jusqu'au sol.

# data[].attributes.headline
(Re)découvrir Paris à travers la littérature

# data[].attributes.subject
(Re)découvrir Paris à travers la littérature

# data[].attributes.body
Emile vous permet de redécouvrir les plus beaux lieux de Paris tels que les ont décrits les auteurs classiques et modernes de la littérature française.

# data[].attributes.attachment_link.description
Soufflot n'a pas bâti son édifice sur la légende. Il a vécu, en pleine lumière, non avec les chartes et les chroniques du moyen âge, mais avec Montesquieu, Rousseau, Buffon, Voltaire, ces quatre colonnes du siècle de l'esprit. La pensée de ces hommes pénètre partout dans son édifice.