GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → cheeaun → Exploretrees Sg

cheeaun / Exploretrees Sg

🌳 Explore Trees in Singapore 🇸🇬

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

visualizationdata-visualizationmaptree

Projects that are alternatives of or similar to Exploretrees Sg

Gods
GoDS (Go Data Structures). Containers (Sets, Lists, Stacks, Maps, Trees), Sets (HashSet, TreeSet, LinkedHashSet), Lists (ArrayList, SinglyLinkedList, DoublyLinkedList), Stacks (LinkedListStack, ArrayStack), Maps (HashMap, TreeMap, HashBidiMap, TreeBidiMap, LinkedHashMap), Trees (RedBlackTree, AVLTree, BTree, BinaryHeap), Comparators, Iterators, …
Stars: ✭ 10,883 (+15904.41%)
Mutual labels:  tree, map
php-sorted-collections
Sorted Collections for PHP
Stars: ✭ 22 (-67.65%)
Mutual labels:  map, tree
Containers
This library provides various containers. Each container has utility functions to manipulate the data it holds. This is an abstraction as to not have to manually manage and reallocate memory.
Stars: ✭ 125 (+83.82%)
Mutual labels:  tree, map
Buckets Js
A complete, fully tested and documented data structure library written in pure JavaScript.
Stars: ✭ 1,128 (+1558.82%)
Mutual labels:  tree, map
React Map Gl
React Component Library for Mapbox GL JS
Stars: ✭ 298 (+338.24%)
Mutual labels:  data-visualization, map
Inmap
大数据地理可视化
Stars: ✭ 2,627 (+3763.24%)
Mutual labels:  data-visualization, map
jh-weapp-demo
微信小程序项目- 实现一些常用效果、封装通用组件和工具类
Stars: ✭ 60 (-11.76%)
Mutual labels:  map, tree
L7
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
Stars: ✭ 2,517 (+3601.47%)
Mutual labels:  data-visualization, map
AhaAlgorithms
《啊哈算法》书上代码
Stars: ✭ 47 (-30.88%)
Mutual labels:  map, tree
geo-tree
High performance library for geographical map-related operations
Stars: ✭ 51 (-25%)
Mutual labels:  map, tree
Agilework
可视化低代码快速开发平台，面向业务、企业管理系统定制开发平台和应用平台，包括设计器、应用端。提供业务配置和集成开发能力，用户通过可视化拖拉拽配置式操作即可快速构建出能同时在PC和移动端运行的各类管理系统，对于企业客户的信息系统在管理模式、业务流程、表单界面、数据可视化展示、IoT管控等个性化需求，可以通过设计器，快速的进行个性化配置。并支持企业微信，公众号，钉钉等移动集成，实现用户跨区域移动办公。从而构建企业个性化的行业应用、集成应用和复杂的业务报表。
Stars: ✭ 76 (+11.76%)
Mutual labels:  data-visualization, map
Lpfmpoints
Evolution of LPFM Stations
Stars: ✭ 19 (-72.06%)
Mutual labels:  data-visualization, map
Libdict
C library of key-value data structures.
Stars: ✭ 234 (+244.12%)
Mutual labels:  tree, map
leaflet-layer-tree-plugin
No description or website provided.
Stars: ✭ 31 (-54.41%)
Mutual labels:  map, tree
React Map Gl
React friendly API wrapper around MapboxGL JS
Stars: ✭ 6,244 (+9082.35%)
Mutual labels:  data-visualization, map
Svg World Map
🗺 A JavaScript library to easily integrate one or more SVG world maps with all nations (countries) and second-level political subdivisions (countries, provinces, states).
Stars: ✭ 38 (-44.12%)
Mutual labels:  data-visualization, map
Leaflet Ng2
Angular.io integration of Leaflet
Stars: ✭ 66 (-2.94%)
Mutual labels:  map
Callbag Map Promise
Callbag map promise
Stars: ✭ 64 (-5.88%)
Mutual labels:  map
React Infinite Tree
The infinite-tree library for React.
Stars: ✭ 63 (-7.35%)
Mutual labels:  tree
Linkedingiveaway
👨🏽‍🏫You can learn about anything over here. What Giveaways I do and why it's important in today's modern world. Are you interested in Giveaway's?🔋
Stars: ✭ 67 (-1.47%)
Mutual labels:  data-visualization
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].