D3.js

Example

https://bl.ocks.org/mbostock
https://bl.ocks.org/mbostock/7322386
https://bl.ocks.org/mbostock/4679202

https://www.d3-graph-gallery.com/index.html
https://www.d3-graph-gallery.com/donut.html
https://www.d3-graph-gallery.com/pie.html

Introduction

DOM

文件物件模型 (Document Object Model)
The HTML DOM Tree of Objects

SVG

可縮放向量圖形 (Scalable Vector Graphics)

---

d3-graph-gallery

10個例子 5/2 9-12 5/9 9-12

Heatmap 格子 深淺~
https://www.d3-graph-gallery.com/graph/heatmap_basic.html

JavaScript視覺化圖表庫D3.js API中文參考

var width = +svg.attr('width'); 
// +號是讓後面回傳的attr知道要進行運算，就會將其轉換為數值型態

D3.queue可以讓全部檔案讀完才執行動作

GeoJSON

GeoJSON map

TopoJSON

Shaoefile

1. Natural Earth
2. DATA GOV
3. 內政資料開放平台

• TOOL
  gdal.org
  QGIS 軟體 (底下就是用gdal這個工具): 可以讀shapefile，然後把檔案轉成GeoJSON等格式

types of projections

Aziomuthal
Conformal [圖學常用到]
Equal-Area
Equidistant

Leaflet.js & Google Maps API

套用GeoJSON

• Leaflet.js : open sourse，推薦
• Google Maps API : no open sourse，但適合用於導航那些，還有服務

crawler.js

若要執行node.js

node crawler.js # 'crawler.js': js Name

js

NaN == NaN

false

isNaN(NaN)

true

Array

CSS framework

1. Bootstrap
2. Semantic UI
3. Foundation

OpenGL

GLUT畫三角形

opengl-tutorial

https://processing.org/reference/loadShader_.html

Tile Map related work

https://www.d3-graph-gallery.com/treemap
https://www.d3-graph-gallery.com/hexbinmap.html
https://schuelerzahlen-zuerich.opendata.iwi.unibe.ch/App2/d3geo-2/ch_var/index.html#pop_female/1991
https://www.d3-graph-gallery.com/graph/hexbinmap_geo_basic.html
https://team.carto.com/u/andrew/tables/andrew.us_states_hexgrid/public/map

China tile grid

US grid maps