imandel/walkie-talkie

Walkie Talkie

This template is an extension of the Mapbox "scrollytelling" template and is meant for data journalists and digital storytellers of any kind.

Prerequisites

Please familiarize yourself with Mapbox's template documentation here.

To Run

• npm install -g parcel-bundler from https://parceljs.org/getting_started.html
• clone repo
• npm install (npm audit fix if needed)
• for dev parcel index.html

Making a Walkie Talkie

To build your own walkie talkie, content-wise you will need:

• an interview video (mp4)
• GPS route recording (gpx)
• written description blocks to present (google doc)
• (Optional, recommended) An Mapbox account, and some map layers to furhter the storytelling

Steps

Step 1: prepare the scrollytelling presentation content

1a. Create Copy JSON

• Create Google Doc by making a copy of this document and updating the text and parameters. Follow the exact formats. Refer to the storytelling documentation.

1b. optionally, create your own visuals to further the storytelling (recommended)

• Use map position helper to generate location visualizing parameters, e.g. location.center (lon and lat).
• Follow guidance to create your own "style" on Mapbox on either given data, your created data, or your uploaded data (dataset or tileset), e.g. [.onChapterEnter] layer: park-slope opacity: 1

1c. Prepare config and execute

• Make sure that the configs at the end of the Google Doc is correct. Video duration in seconds (please find out how long it is), the number of drive slides, title, byline, mapbox styles, access tokens, etc.
• Fill in id and filepath parameters in doc.json(id: the Google Doc document ID between "d/" and "/edit" in the link, filepath: path for your destination copy content; and make sure the doc is shared publicly)
• Run npm run doc to execute fetch-doc.js which will pull Google Doc content into your copy filepath

Step 2: generate driving routes and interview video screenshots along the drive

2a. Prepare Video Content

• Add .mp4 video file to data/ and dist/ folders (note: only mp4 will work. If you have another format, use ffmpeg to convert)
• Make sure image file path is correct

2b. Prepare GPS Route Content

• Make GPX file using Open GPX Tracker (Apple, Android)
• Add GPX file to data/ folder

2c. Create Image Flipbook Content and Routes JSON

• After video and GPs data are ready, run node make-clips.js
• This will create routes.json for the walking point/line and image clips in the imgs folder for the flipbook

Step 3: Final checks and run

3a. Update path names in index.js

• Make sure that the copy path (ex. import { chapters, config } from copy.json) and video path (ex. vid.src = ./IMG_1234.mp4) match your data

3b. Run project npm run dev