Skip to content

๐ŸŒณ Explore Trees in Singapore ๐Ÿ‡ธ๐Ÿ‡ฌ

Notifications You must be signed in to change notification settings

dzonimn/exploretrees-sg

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

73 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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: Building ExploreTrees.SG. ๐Ÿ‘ˆ๐Ÿ‘ˆ๐Ÿ‘ˆ

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

About

๐ŸŒณ Explore Trees in Singapore ๐Ÿ‡ธ๐Ÿ‡ฌ

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 74.9%
  • CSS 15.5%
  • HTML 9.0%
  • HCL 0.6%