This visualization is for exploring data across time and space using maps.
- Run
npm ci
to install dependencies
- Run
npm run dev
to start development server - Load http://localhost:5173/ in your browser
To update the placenames in the datasets:
- In the
scripts
folder run./get-latlong-csv-from-dataset.js > positions.csv
- Upload
positions.csv
to geocod.io (you can create a free account there) - Download the results from geocod.io and save as
placenames.csv
in thescripts
folder - In the
scripts
folder run./extract-placenames.js
to update the datasets with the nearest placename - Test the update and commit the new dataset changes
To generate a new gradient to use for the map overlay:
- Go to: https://angrytools.com/gradient/image/
- Generate a gradient using the desired colors
- Set the width to 1420px and the height to 1px
- Generate the source code and replace the old source code in map.tsx
- Download the image and replace the old one in the assets folder
- Using an online image color picker such as Coolors[https://coolors.co/image-picker], upload the image, and select 20 colors that represent the range of values in the image (you can only select 10 at a time with Coolors, just do one half of the image and then the other half)
- Download the generated array of hex codes and convert them to RGB values
- Replace the
colors
array incolormap.tsx
with your new array
- Start color: 255 255 255
- Middle color: 108 234 186
- End color: 0 66 117