This is a code respository for a scrollytelling article published by the Office for National Statistics. The article can be read here.
The article was built using the Svelte javascript framework, Mapbox GL JS (v1)* and the Layer Cake charting library. It is based on this scrollytelling template, which is probably a better starting point for building/hacking your own scrollytelling projects. (This repository is shared "as is", without any detailed documentation.)
(*Note that Mapbox GL JS v2 is no longer open source. This repository relies on v1.13.1. MapLibre GL, an open source fork of Mapbox GL JS v1 with ongoing community support, is also available.)
The easiest way to make a local copy of this repository is using degit, which you can install it using NPM.
npm install -g degit
Run the following command to clone this repository (replace your-project
with a name for your project folder).
degit ONSvisual/income-scrolly your-project
Next, open the folder and install the dependencies to get started.
cd your-project
npm install
Note that the code that you'll want to edit is mostly contained wihthin the src
folder, as well as the static files within the public
folder.
You can then start a local development server to see live changes as you edit the code. It will run on http://localhost:5000/ and should update every time you save changes to a file.
npm run dev
Finally. When you're done creating your project, you can compile it. (You'll find the compiled code in the public
folder). Note that this also builds a legacy version of the code that is compatible with IE 11.
npm run build