https://github.com/plotdb/pdmaptw

台灣 ( "中華民國自由地區"，含台、澎、金、馬 ) 縣市、鄉鎮、村里界圖。含前端繪圖函式 ( 基於 d3.js v4 )
https://github.com/plotdb/pdmaptw

d3js map taiwan

Last synced: about 2 months ago
JSON representation

台灣 ( "中華民國自由地區"，含台、澎、金、馬 ) 縣市、鄉鎮、村里界圖。含前端繪圖函式 ( 基於 d3.js v4 )

• Host: GitHub
• URL: https://github.com/plotdb/pdmaptw
• Owner: plotdb
• Created: 2020-01-10T01:01:39.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-04-03T13:38:06.000Z (over 1 year ago)
• Last Synced: 2023-08-25T06:10:02.617Z (over 1 year ago)
• Topics: d3js, map, taiwan
• Language: JavaScript
• Homepage: http://plotdb.github.io/pdmap.tw
• Size: 85.8 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# pdmaptw

台灣 ( "中華民國自由地區"，含台、澎、金、馬 ) 縣市、鄉鎮、村里界圖。含前端繪圖函式 ( 基於 d3.js v4 )

## Installation

  npm install --save pdmaptw

## Frontend Usage

`pdmaptw` depends on following libraries:

 - d3@^4.0.0

 - topojson@^2.0.0

 - d3-geo@^1.0.0

 - d3-geo-projection@^2.0.0

include dependencies:

    

    

    

    

    

include main js file:

    

include corresponding map files:

    

    

    

Then, create map object:

    var obj = new pdmaptw(opt);

    obj.init().then(function() {

      obj.fit();

    });

## Constructor Options

 - `root`: container for this map

 - `type: 'county', 'town' or 'village'.

## API

 - `init()`: map initialization, include data fetching / path elements creating. return promise.

 - `fit(opt)`: fit map to the size of container. options:

   - `box`: bounding box `{width, height}` for fix size hinting 

## Events

 - `hover`: fired when user hovers on geographic paths. with parameters:

   - evt: event for mouseover.

   - data: not null if mouseover path element of map. usually a topojson object with `properties` member:

     - properties.name - name for this geographic block, like "高雄市左營區"

## Class Methods

 - `projection()`: return a d3js GeoProjection for 台澎金馬地區, as compact as possible.

   - the returned function accepts parameters as an array with `[lng, lat]` format.

 - `normalize(str)` - name normalization, e.g., replace '臺' with '台'.

## Building Map File

After `npm install`, Fetch data and build:

    npm run build

Alternatively, execute the script manually:

    ./fetch

    ./node_modules/.bin/lsc convert.ls

    ./node_modules/.bin/lsc filter.ls

    ./build

What the above commands do:

 - `fetch` will download and unzip shp files from government website to download folder.

 - `convert.ls` will process all shp files and convert them to topojson.

   - tweak `mw` and `w` for twaking topojson size. be sure to test in major browsers before using.

     escpecially windows firefox since we encountered an abnormal path before.

 - `filter.ls` will generate separated county files.

 - `build` build the utility js `twmap` for frontend rendering.

 - `tool/build.sh` will process all shp files and convert them to geojson, topojson and sample svg.

   - for getting topojson, simply use `convert.ls` directly.

## Demonstration

For a sample usage in frontend:

    npm start

the script will start a simple server and open the demo page automatically.

## meta.json structure

for keeping topojson metadata. lookup with cid/tid/vcode.

   {

     county: {

      "county-id": {c: "county-code", n: "county-name"}, ...

     },

     town: {

      "town-id": {c: "town-code", n: "town-name"}, ...

     },

     village: {

      "village-code": {n: "village-name"}, ...

     }

   }

properties in topojson is then converted to: 

    { cid: "county-id", tid: "town-id", vcode: "village-code" }

each field exists only when applicable.

## 詳細產製流程

 * 取得 shp files. 

   - 可以從政府開放資料平台取得. e.g., 

     - 縣市: https://data.gov.tw/dataset/7442

     - 鄉鎮: https://data.gov.tw/dataset/7441

     - 村里: https://data.gov.tw/dataset/7438

 * shp to geojson

   - 使用 npm module: shapefile

     - npm install shapefile

     - shp2json  ( -o  )

   * ( geojson 的格式說明? )

   - 轉出的geojson 仍需做投影, 而這可以先做, 就不用 runtime 做. 使用 d3-geo-projection

     - npm install d3-geo-projection

     - geoproject 'd3.geoConicEqualArea().parallels([34, 40.5]).rotate([120, 0]).fitSize([960, 960], d)' \

       <  \

       > 

     - geoConicEqualArea 適用於北美加州, 我們可以自已換投影法. 參考

       - https://github.com/d3/d3-geo-projection/blob/master/README.md

     - 可以用 geo2svg ( from d3-geo-projection ) 先輸出範本 svg ( 但大概會非常大 ):

       - geo2svg -w 960 -h 960 <  > 

   - Data Join: 利用 ndjson 將 geojson 分 features 切成很多行, 方便後續處理

     - npm install ndjson

     - 切開: ndjson-split 'd.features' <  > 

     - 轉換: ndjson-map 'd.id = d.properties.GEOID.slice(2), d' <  > 

     - 串接: ndjson-cat  ...

     - join data: ndjson-join ...

     - 轉回 geojson: ndjson-reduce

   - 最佳化: 使用 topojson 格式.

     - npm install topojson

     - geo2topo -n tracts= > 

     - toposimplify -p 1 -f  <  > 

     - topoquantize 1e5 <  > 

   - 合併行政區塊: 使用 topomerge ( in topojson package )

     - topomerge -k 'd.id.slice(0,3)' counties=tracts <  > 

 * geojson to topojson

## License

Source code: MIT