Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

ExploreTrees.SG - 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.

Screenshot of ExploreTrees.SG

Screenshots of 3D trees

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

  • Plotting more than 500,000 data points on Mapbox GL JS.
  • 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).

πŸ‘‡πŸ‘‡πŸ‘‡ Read more about it πŸ‘‡πŸ‘‡πŸ‘‡

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):

  • Data collection:
    • 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 family - fetch family categories for the trees, and generate species-info.json, families-species.json and families.json.
    • npm run pois - fetch Points of Interets, mainly the parks, community gardens, heritage roads and skyrise greeneries.
  • Data manipulation:
    • npm run chunk - read all the raw data and generate a cleaner trees-everything.geojson (NOT included in this repository).
    • npm run minify - generate minified/compressed data from trees-everything.geojson into trees.min.json, trees.min.mp.ico and trees.min.mp.gz (not included in this repos).
      • .ico file extension is used to mask the .mp extension which is actually a MessagePack file. It's NOT an icon file and the .ico file extension is meant to fool the server to apply Gzip/Brotli compression on it, since there's no official MIME type for MessagePack. GitHub Pages serves .mp as uncompressed application/octet-stream. Cloudflare compresses image/x-icon.
      • .gz file is not used but only to show how large the file size is after gzipped.
    • 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.
  • Dev server:
    • npm start - start a local server for the site.
  • Production build:
    • npm run build - build the assets in dist folder for deployment.

Copyright & license

Similar visualizations/effort

You can’t perform that action at this time.