This is an example repository for creating Data Stories with Nomic Atlas

Data Stories are web pages with scrollable views of Atlas data maps.

You can simply run:

npm run dev

to open the application and read one of the available stories.

Make Your Own Data Story

For a more in depth guide, visit our docs

1. Explore your data in Atlas & generate a share link for each different view of the data you want in your story.

Share links are generated by clicking "Share" in the top-right corner of the Atlas interface & copying your link.

atlas_howtosharemapstate.mp4

2. This creates a link of the format https://atlas.nomic.ai/data/ORG_NAME/MAP_NAME/map/MAP_ID#XXXX with a four-item #XXXX code at the end of the share link.

You will add these codes to Folios, which show the user the same view of the Atlas data map in your website/blog that you saw in the Atlas interface.

Import Scrollyteller and Folio at the top of your file, and include your Folio components with the hash parameter set to each code for each view of the data inside of the Scrollyteller component, e.g.:

import React from 'react';
import { Scrollyteller, Folio } from '@nomic-ai/atlas-stories-react';
import '@nomic-ai/atlas-stories-react/dist/style.css';
...
...

<Scrollyteller map='ORG_NAME/MAP_NAME/map/MAP_ID'>


<Folio
hash="vYoe"
>

Education is...

</Folio>

<Folio
hash="oZyE"
>

Tax policy...

</Folio>

...
...

</Scrollyteller>

3. On page load you will then see each Atlas map state to the side of your Folio text:

atlas_data_story_preview_congress_posting_compressed.mp4

Parameters

• hash: the code for the data map state from the Atlas share link, e.g. hash="oZyE"

• duration: the time in milliseconds for the transition from the previous folio to the current one, e.g. duration={2000} for 2 seconds.

• zoom: the coordinates of the view box, e.g. zoom={{ x: [-55 , 55], y: [-55, 55] }}

Join our Slack

We invite you to join our Nomic Community Slack so you can ask questions and brainstorm data mapping ideas with the Nomic team & our community of users.