🌳 Explore Trees in Singapore 🇸🇬
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
icons
screenshots
scripts
.gitignore
CNAME
README.md
app.css
app.js
favicon.ico
index.html
package-lock.json
package.json

README.md

Explore Trees in Singapore

On 17 March 2018, National Parks Board launched an all-new web site called Trees.sg. On the next day, I started my journey in getting the data and visualizing it to my heart's content.

This is a personal side project to fuel my curiosity on these factors:

  • Plotting more than 500,000 data points on Mapbox GL JS. End up using Tippecanoe to convert GeoJSON files into MBTiles.
  • Data visualization of all tree data, in 4 criterias:
    • Type; Tree, Flowering, Heritage
    • Girth (meters)
    • Age (years)
    • Family (to group up the large number of species)
  • Discovery of trees.
    • Prominent/important trees stand out more by having larger radii.
    • Super fast info card by just hovering on the tree markers (for devices with a mouse).

Technicalities

All scripts for fetching and cleaning up data are in the scripts folder. Node.js and npm are required to run them.

Begin by installing all the essential dependencies.

npm install

Scripts provided (should be executed in order):

  • npm run trees - fetch all raw tree data from Trees.SG (NOT included in this repository) and generate grid-*.json files in the data folder.
  • npm run chunk - read all the raw data and generate a cleaner trees-everything.geojson (NOT included in this repository).
  • npm run family - fetch family categories for the trees.
  • npm run pre-tiles - generate the needed GeoJSON files before converting to MBTiles (NOT included in this repository).
  • npm run tiles - generate the ultimate final trees.mbtiles file (NOT included in this repository), to be uploaded on Mapbox Studio as a tileset.
  • npm start - start a local server for the site.

Copyright & license

Similar visualizations/effort