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.

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

• Data from Trees.sg © National Parks Board
• Map © Mapbox © MapTiler © OpenStreetMap contributors
• SVG icons from Font Awesome
• Code licensed under MIT

Similar visualizations/effort

• New York City Street Trees by Species
• Treepedia: Singapore
• An Interactive Visualization of NYC Street Trees
• New York City Street Trees
• Atlanta's Tree Canopy Data Visualization
• Trees of Madison
• Melbourne Urban Forest Visual
• OpenTrees.org
• San Francisco Urban Forest Map
• OpenTreeMap