---
title: D3.js
tags: graphic, IGL
categories: graphic, IGL
---
## 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](https://www.d3-graph-gallery.com/index.html)

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

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

[JavaScript視覺化圖表庫D3.js API中文參考](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/280651/)

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

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

### GeoJSON
[GeoJSON map](http://geojson.io/#map=2/20.0/0.0)

#### TopoJSON

#### Shaoefile
1. [Natural Earth](https://www.naturalearthdata.com/downloads/)
2. [DATA GOV](https://www.data.gov/)
3. [內政資料開放平台](https://data.moi.gov.tw/MoiOD/default/Index.aspx)
- 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](http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-2-the-first-triangle/)

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 ](maphttps://bl.ocks.org/officeofjane/d33d6ef783993b60b15a3fe0f8da1481)

[US grid maps](https://bl.ocks.org/officeofjane/2c3ed88c4be050d92765de912d71b7c4)