npm - splatone - Versions diffs - 0.0.13 → 0.0.14 - Mend

splatone 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +26 -0
package/README.md +217 -77
package/assets/screenshot_florida_hex_majorityr.png +0 -0
package/assets/screenshot_venice_simple.png +0 -0
package/color.js +95 -0
package/crawler.js +39 -17
package/lib/paletteGenerator.js +0 -1
package/package.json +3 -2
package/visualizer/bulky/node.js +1 -1
package/visualizer/majority-hex/node.js +214 -0
package/visualizer/majority-hex/web.js +251 -0
package/visualizer/marker-cluster/node.js +10 -1
package/visualizer/marker-cluster/web.js +2 -2
package/assets/screenshot_venice_bulky.png +0 -0

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,32 @@
 ## Versions
+### v0.0.11 →　v0.0.12
+* Bottleneckを導入しクエリ間隔を適正値に調整 (3 queries/ 3 sec.)
+* 時間軸分割並列処理のデフォルト化
+  * 地理的分割に加えて大量の結果がある場所は時間軸でもクエリを分解する
+  * 無効にするときは```--no-p-flickr-Haste```を付与
+### v0.0.10 →　v0.0.11
+* 時間軸として使用する日付を選択可能に (```--p-flickr-DateMode```)
+  * upload: Flickrにアップロードされたタイムスタンプを遡ってクローリング (デフォルト)
+  * taken: 写真の撮影日時を遡ってクローリング
+* extrasを指定可能に (```--p-flickr-Extras```)
+    * https://www.flickr.com/services/api/explore/flickr.photos.search
+    * デフォルト値:　```date_upload,date_taken,owner_name,geo,url_s,tags```
+      * これらはコマンドライン引数での指定の有無に関わらず付与されます
+* 自動指定時のHexGridの最小サイズを0.5kmに
+* [Bug Fix] 時間軸並列機能のバグ修正
+### v0.0.8 →　v0.0.9 →　v0.0.10
+* 【重要】**APIキー**の指定方法が変わりました。
+  * ```--p-flickr-APIKEY```オプションを使います。
+* クエリを時間方向でも分割し効率化しました。(使い方に変更はありません)
 ### v0.0.7 →　v0.0.8
 * 範囲指定とHexGridの表示・非表示ができるようになりました。

package/README.md CHANGED Viewed

@@ -13,35 +13,14 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 ## Change Log
+### v0.0.13 →　v0.0.14
+* **[可視化モジュール]** ```--vis-majority-hex```追加
+* 結果の色固定機能追加 (キーワード指定方法を参照の事)
 ### v0.0.12 →　v0.0.13
 * BulkyのPointMarkerのサイズや透明度を可変に
   * コマンドライン引数で指定 (詳しくは``` npx -y -- splatone@latest crawler --help```)
-### v0.0.11 →　v0.0.12
-* Bottleneckを導入しクエリ間隔を適正値に調整 (3 queries/ 3 sec.)
-* 時間軸分割並列処理のデフォルト化
-  * 地理的分割に加えて大量の結果がある場所は時間軸でもクエリを分解する
-  * 無効にするときは```--no-p-flickr-Haste```を付与
-### v0.0.10 →　v0.0.11
-* 時間軸として使用する日付を選択可能に (```--p-flickr-DateMode```)
-  * upload: Flickrにアップロードされたタイムスタンプを遡ってクローリング (デフォルト)
-  * taken: 写真の撮影日時を遡ってクローリング
-* extrasを指定可能に (```--p-flickr-Extras```)
-    * https://www.flickr.com/services/api/explore/flickr.photos.search
-    * デフォルト値:　```date_upload,date_taken,owner_name,geo,url_s,tags```
-      * これらはコマンドライン引数での指定の有無に関わらず付与されます
-* 自動指定時のHexGridの最小サイズを0.5kmに
-* [Bug Fix] 時間軸並列機能のバグ修正
-### v0.0.8 →　v0.0.9 →　v0.0.10
-* 【重要】**APIキー**の指定方法が変わりました。
-  * ```--p-flickr-APIKEY```オプションを使います。
-* クエリを時間方向でも分割し効率化しました。(使い方に変更はありません)
 [これ以前のログ](CHANGELOG.md)
@@ -59,7 +38,6 @@ $ npx -y -- splatone@latest crawler --help
 Basic Options
   -p, --plugin    実行するプラグイン[文字列] [必須] [選択してください: "flickr"]
-  -o, --options   プラグインオプション               [文字列] [デフォルト: "{}"]
   -k, --keywords  検索キーワード(|区切り)                  [文字列] [デフォルト:
                        "nature,tree,flower|building,house|water,sea,river,pond"]
   -f, --filed     大きなデータをファイルとして送受信する
@@ -74,57 +52,150 @@ For flickr Plugin
       --p-flickr-APIKEY    Flickr ServiceのAPI KEY                      [文字列]
       --p-flickr-Extras    カンマ区切り/保持する写真のメタデータ(デフォルト値は
                            記載の有無に関わらず保持)
-       [文字列] [デフォルト: "date_upload,date_taken,owner_name,geo,url_s,tags"]
-      --p-flickr-DateMode  利用時間軸(update=Flickr投稿日時/taken=写真撮影日時)
-                    [選択してください: "upload", "taken"] [デフォルト: "upload"]
-      --p-flickr-Haste     時間軸分割並列処理          [真偽] [デフォルト: true]
-      --p-flickr-DateMax   クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD
-                                               [文字列] [デフォルト: 1762942310]
-      --p-flickr-DateMin   クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD
-                                               [文字列] [デフォルト: 1072882800]
+       [文字列] [デフォルト: "date_upload,date_taken,owner_name,geo,url_s,tags"]
+      --p-flickr-DateMode  利用時間軸(update=Flickr投稿日時/taken=写真撮影日時)
+                    [選択してください: "upload", "taken"] [デフォルト: "upload"]
+      --p-flickr-Haste     時間軸分割並列処理          [真偽] [デフォルト: true]
+      --p-flickr-DateMax   クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD
+                                               [文字列] [デフォルト: 1763107393]
+      --p-flickr-DateMin   クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD
+                                               [文字列] [デフォルト: 1072882800]
 Visualization (最低一つの指定が必須です)
       --vis-bulky           全データをCircleMarkerとして地図上に表示
-                                                      [真偽] [デフォルト: false]
+                                                      [真偽] [デフォルト: false]
+      --vis-majority-hex    HexGrid内で最も出現頻度が高いカテゴリの色で彩色。Hex
+                            apartiteモードで6分割パイチャート表示。透明度は全体
+                            で正規化。                [真偽] [デフォルト: false]
       --vis-marker-cluster  マーカークラスターとして地図上に表示
-                                                      [真偽] [デフォルト: false]
+                                                      [真偽] [デフォルト: false]
 For bulky Visualizer
-      --v-bulky-Radius       Point Markerの直径           [数値] [デフォルト: 5]
-      --v-bulky-Stroke       Point Markerの線の有無    [真偽] [デフォルト: true]
-      --v-bulky-Weight       Point Markerの線の太さ       [数値] [デフォルト: 1]
-      --v-bulky-Opacity      Point Markerの線の透明度     [数値] [デフォルト: 1]
-      --v-bulky-Filling      Point Markerの塗りの有無  [真偽] [デフォルト: true]
-      --v-bulky-FillOpacity  Point Markerの塗りの透明度 [数値] [デフォルト: 0.5]
+      --v-bulky-Radius       Point Markerの半径           [数値] [デフォルト: 5]
+      --v-bulky-Stroke       Point Markerの線の有無    [真偽] [デフォルト: true]
+      --v-bulky-Weight       Point Markerの線の太さ       [数値] [デフォルト: 1]
+      --v-bulky-Opacity      Point Markerの線の透明度     [数値] [デフォルト: 1]
+      --v-bulky-Filling      Point Markerの塗りの有無  [真偽] [デフォルト: true]
+      --v-bulky-FillOpacity  Point Markerの塗りの透明度 [数値] [デフォルト: 0.5]
+For majority-hex Visualizer
+      --v-majority-hex-Hexapartite  中のカテゴリの頻度に応じて六角形を分割色彩
+                                                      [真偽] [デフォルト: false]
+      --v-majority-hex-HexOpacity   六角形の線の透明度    [数値] [デフォルト: 1]
+      --v-majority-hex-HexWeight    六角形の線の太さ      [数値] [デフォルト: 1]
+      --v-majority-hex-MaxOpacity   正規化後の最大塗り透明度
+                                                        [数値] [デフォルト: 0.9]
+      --v-majority-hex-MinOpacity   正規化後の最小塗り透明度
+                                                        [数値] [デフォルト: 0.5]
+For marker-cluster Visualizer
+      --v-marker-cluster-MaxClusterRadius  クラスタを構成する範囲(半径)
+                                                         [数値] [デフォルト: 80]
 オプション:
-      --help     ヘルプを表示                                             [真偽]
-      --version  バージョンを表示                                         [真偽]
+      --help     ヘルプを表示                                             [真偽]
+      --version  バージョンを表示                                         [真偽]
-```
-## クローリングの実行
+cold_@bimota-due MINGW64 /c/GitHub/Splatone (61-可視化メソッドmajorityhex)
+$ node crawler.js --help
+[app] [plugin] loaded: flickr@1.0.0
+使い方: crawler.js [options]
+Basic Options
+  -p, --plugin    実行するプラグイン[文字列] [必須] [選択してください: "flickr"]
+  -k, --keywords  検索キーワード(|区切り)                  [文字列] [デフォルト:
+                       "nature,tree,flower|building,house|water,sea,river,pond"]
+  -f, --filed     大きなデータをファイルとして送受信する
+                                                       [真偽] [デフォルト: true]
+  -c, --chopped   大きなデータを細分化して送受信する
+                                             [非推奨] [真偽] [デフォルト: false]
-- 以下のサンプルコマンドを参考に実行してください。
-  - **FlickrのAPIキーは自身のに置き換える事**
-- ブラウザが立ち上がるので地図上でポリゴンあるいは矩形で領域選択し、実行ボタンを押すとクロールが開始されます。
-  - 指定した範囲を内包するHexGrid(六角形グリッド)が生成され、その内側のみが収集されます。
-- 結果が表示された後、結果をGeoJSON形式でダウンロードできます。
+Debug
+      --debug-verbose  デバッグ情報出力               [真偽] [デフォルト: false]
-### 事例１)　商業施設・飲食施設・文化施設・公園の分類
-```shell
-$ node crawler.js -p flickr -k "商業=shop,souvenir,market,supermarket,pharmacy,drugstore,store,department,kiosk,bazaar,bookstore,cinema,showroom|飲食=bakery,food,drink,restaurant,cafe,bar,beer,wine,whiskey|文化施設=museum,gallery,theater,concert,library,monument,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+For flickr Plugin
+      --p-flickr-APIKEY    Flickr ServiceのAPI KEY                      [文字列]
+      --p-flickr-Extras    カンマ区切り/保持する写真のメタデータ(デフォルト値は
+                           記載の有無に関わらず保持)
+       [文字列] [デフォルト: "date_upload,date_taken,owner_name,geo,url_s,tags"]
+      --p-flickr-DateMode  利用時間軸(update=Flickr投稿日時/taken=写真撮影日時)
+                    [選択してください: "upload", "taken"] [デフォルト: "upload"]
+      --p-flickr-Haste     時間軸分割並列処理          [真偽] [デフォルト: true]
+      --p-flickr-DateMax   クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD
+                                               [文字列] [デフォルト: 1763107399]
+      --p-flickr-DateMin   クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD
+                                               [文字列] [デフォルト: 1072882800]
+Visualization (最低一つの指定が必須です)
+      --vis-bulky           全データをCircleMarkerとして地図上に表示
+                                                      [真偽] [デフォルト: false]
+      --vis-majority-hex    HexGrid内で最も出現頻度が高いカテゴリの色で彩色。Hex
+                            apartiteモードで6分割パイチャート表示。透明度は全体
+                            で正規化。                [真偽] [デフォルト: false]
+      --vis-marker-cluster  マーカークラスターとして地図上に表示
+                                                      [真偽] [デフォルト: false]
+For bulky Visualizer
+      --v-bulky-Radius       Point Markerの半径           [数値] [デフォルト: 5]
+      --v-bulky-Stroke       Point Markerの線の有無    [真偽] [デフォルト: true]
+      --v-bulky-Weight       Point Markerの線の太さ       [数値] [デフォルト: 1]
+      --v-bulky-Opacity      Point Markerの線の透明度     [数値] [デフォルト: 1]
+      --v-bulky-Filling      Point Markerの塗りの有無  [真偽] [デフォルト: true]
+      --v-bulky-FillOpacity  Point Markerの塗りの透明度 [数値] [デフォルト: 0.5]
+For majority-hex Visualizer
+      --v-majority-hex-Hexapartite  中のカテゴリの頻度に応じて六角形を分割色彩
+                                                      [真偽] [デフォルト: false]
+      --v-majority-hex-HexOpacity   六角形の線の透明度    [数値] [デフォルト: 1]
+      --v-majority-hex-HexWeight    六角形の線の太さ      [数値] [デフォルト: 1]
+      --v-majority-hex-MaxOpacity   正規化後の最大塗り透明度
+                                                        [数値] [デフォルト: 0.9]
+      --v-majority-hex-MinOpacity   正規化後の最小塗り透明度
+                                                        [数値] [デフォルト: 0.5]
+For marker-cluster Visualizer
+      --v-marker-cluster-MaxClusterRadius  クラスタを構成する範囲(半径)
+                                                         [数値] [デフォルト: 80]
+オプション:
+      --help     ヘルプを表示                                             [真偽]
+      --version  バージョンを表示                                         [真偽]
 ```
-- オプションの **--vis-bulky** を **--vis-marker-cluster** に変更する事でマーカークラスターで可視化できます。
-### 事例２）水路・陸路・ランドマーク等の分類
-```shell
-$ node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey,temple,shrine" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+## 最小コマンド例
+1. *plugin*を一つ、*visualizer*を一つ以上指定し、複数のキーワードでクロールを開始します。
+  * plugin: flickr
+  * visualizer: bulky
+  * キーワード: canal,river|street,alley|bridge
+1. コマンドを実行するとWebブラウザで地図表示されるので、地図上の任意の位置に矩形あるいはポリゴンを描く
+  * 例えばベネチア
+2. Start Crawlingボタンをクリックしクローリング開始
+![](assets/screenshot_venice_simple.png?raw=true)
+```bash
+$ npx -y -- splatone@latest crawler -p flickr -k "canal,river|street,alley|bridge" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
-- ベネチア等の水路のある町でやると面白いです
 # 詳細説明
-## Flickr APIキーの与え方
+## Plugin (クローラー)
+### Flickr: Flickrのジオタグ付き写真を取得するクローラー
+#### コマンドライン引数
+| オプション                | 説明                                                                          | 型             | デフォルト   |
+| :------------------------ | :---------------------------------------------------------------------------- | :------------- | :----------- |
+| ```--p-flickr-APIKEY```   | Flickr ServiceのAPI KEY                                                       | 文字列         |              |
+| ```--p-flickr-Extras```   | カンマ区切り/保持する写真のメタデータ(デフォルト値は記載の有無に関わらず保持) | 文字列         | date_upload  |,date_taken,owner_name,geo,url_s,tags
+| ```--p-flickr-DateMode``` | 利用時間軸(update=Flickr投稿日時/taken=写真撮影日時)                          | 選択: "upload" | "taken"      |,"upload"
+| ```--p-flickr-Haste```    | 時間軸分割並列処理                                                            | 真偽           | true         |
+| ```--p-flickr-DateMax```  | クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD                            | 文字列         | (動的)現時刻 |
+| ```--p-flickr-DateMin```  | クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD                            | 文字列         | 1072882800   |
+#### Flickr APIキーの与え方
 APIキーは以下の３種類の方法で与える事ができます
 - ```--option```に含める
@@ -134,34 +205,74 @@ APIキーは以下の３種類の方法で与える事ができます
 - 環境変数で渡す
   - ```API_KEY_plugin```という環境変数に格納する
   - コマンドに毎回含めなくて良くなる。
-  - **flickr**の場合は```API_KEY_flickr```になります。
-    - ```plugin```はプラグイン名(flickr等)に置き換えてください。
-  - 一時的な環境変数を定義する事も可能です。(bash等)
-    - ```API_KEY_flickr="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" node crawler.js -p flickr -k "sea,ocean|mountain,mount" --vis-bulky```
 - ファイルで渡す(npxでは不可)
   - ルートディレクトリに```.API_KEY.plugin```というファイルを作成し保存
     - ```plugin```はプラグイン名(flickr等)に置き換えてください。
   - **flickr**の場合は```.API_KEY.flickr```になります。
   - optionや環境変数で与えるよりも優先されます。
-## Visualizer (可視化ツール)
+## Visualizer (可視化モジュール)
 ### Bulky: 全ての点を地図上にポイントする
-![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/screenshot_venice_bulky.png?raw=true)
+![](assets/screenshot_sea-mountain_bulky.png?raw=true)
-* クエリは水域と通路・橋梁・ランドマークを色分けしたもの、上記スクリーンショットはベネチア付近のデータ
+#### コマンド例
+* クエリは海と山のキーワード検索。上記スクリーンショットは日本のデータ
 ```shell
-$ node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey" --vis-marker-cluster --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+$ npx -y -- splatone@latest crawler -p flickr -k "sea,ocean|mountain,mount" --vis-bulky--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
+#### コマンドライン引数
+| オプション                  | 説明                       | 型   | デフォルト |
+| :-------------------------- | :------------------------- | :--- | :--------- |
+| ```--v-bulky-Radius```      | Point Markerの半径         | 数値 | 5          |
+| ```--v-bulky-Stroke```      | Point Markerの線の有無     | 真偽 | true       |
+| ```--v-bulky-Weight```      | Point Markerの線の太さ     | 数値 | 1          |
+| ```--v-bulky-Opacity```     | Point Markerの線の透明度   | 数値 | 1          |
+| ```--v-bulky-Filling```     | Point Markerの塗りの有無   | 真偽 | true       |
+| ```--v-bulky-FillOpacity``` | Point Markerの塗りの透明度 | 数値 | 0.5        |
 ### Marker Cluster: 高密度の地点はマーカーをまとめて表示する
-![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/screenshot_venice_marker-cluster.png?raw=true)
+![](assets/screenshot_venice_marker-cluster.png?raw=true)
+#### コマンド例
 * クエリは水域と通路・橋梁・ランドマークを色分けしたもの、上記スクリーンショットはベネチア付近のデータ
 ```shell
-$ node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey" --vis-marker-cluster --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+$ npx -y -- splatone@latest crawler -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey" --vis-marker-cluster --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+```
+#### コマンドライン引数
+| オプション                                | 説明                         | 型   | デフォルト |
+| :---------------------------------------- | :--------------------------- | :--- | :--------- |
+| ```--v-marker-cluster-MaxClusterRadius``` | クラスタを構成する範囲(半径) | 数値 | 80         |
+### Majority Hex: Hexグリッド内の出現頻度に応じた彩色
+![](assets/screenshot_florida_hex_majorityr.png?raw=true)
+#### コマンド例
+* クエリは水域・緑地・交通・ランドマークを色分けしたもの。上記スクリーンショットはフロリダ半島全体
+*
+```shell
+$ npx -y -- splatone@latest crawler -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|緑地=forest,woods,turf,lawn,jungle,trees,rainforest,grove,savanna,steppe|交通=bridge,overpass,flyover,aqueduct,trestle,street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,chapel,cathedral,basilica,minster,temple,shrine,neon,theater,statue,museum,sculpture,zoo,aquarium,observatory" --vis-majority-hex --v-majority-hex-Hexapartite --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
+#### コマンドライン引数
+| オプション                            | 説明                                       | 型   | デフォルト |
+| :------------------------------------ | :----------------------------------------- | :--- | :--------- |
+| ```--v-majority-hex-Hexapartite```    | 中のカテゴリの頻度に応じて六角形を分割色彩 | 真偽 | false      |
+| ```--v-majority-hex-HexOpacity=1```   | 六角形の線の透明度                         | 数値 | 1          |
+| ```--v-majority-hex-HexWeight=1```    | 六角形の線の太さ                           | 数値 | 1          |
+| ```--v-majority-hex-MaxOpacity=0.9``` | 正規化後の最大塗り透明度                   | 数値 | 0.9        |
+| ```--v-majority-hex-MinOpacity=0.3``` | 正規化後の最小塗り透明度                   | 数値 | 0.5        |
+* ```--v-majority-hex-Hexapartite```を指定すると各Hexセルを六分割の荒いPie Chartとして中のカテゴリ頻度に応じて彩色します。
 ## キーワード指定方法
 ### 比較キーワードの指定
@@ -188,30 +299,59 @@ seaだけでは集められるポストが限定されるので、同様の意
 -k "海域=sea,ocean|山岳=mountain,mount"
 ```
-### 実行例 (海岸線と山岳の分布)
+### カテゴリ毎の色指定
+カテゴリの内容に合わせた色を指定したい場合はコマンドライン引数にて行えます。例えば海域を青に、山岳を緑にしたい場合は、カテゴリ名に続けて**#RRGGBB**で指定します。
-```shell
-$ node crawler.js -p flickr -k "sea,ocean|mountain,mount" --vis-bulky--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
-![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/screenshot_sea-mountain_bulky.png?raw=true)
+-k "海域#037dfc=sea,ocean|山岳#7fc266=mountain,mount"
+```
+色を簡単に探すための小さなコマンドが付属しています。
+#### 色セット生成ツール(color.js)の使い方
+このリポジトリには、コマンドラインで色のセットを生成する小さなユーティリティ `color.js` が含まれています。用途は以下の通りです。
+- 指定した数のカラーパレット（セット）を生成する
+- ターミナル上で色サンプルを ANSI Truecolor で確認する
+- プレーンなカンマ区切り HEX リストを出力して他ツールに渡す
+- 使い方（6色のカラーパレットを2セット作りたい）:
+```bash
+npx -y -- splatone@latest color <count> <sets>
+# 例: 6色を3セット生成（ターミナルに色付きで表示）
+npx -y -- splatone@latest color 6 3
+```
+- オプション:
+- `--no-ansi` : ANSI カラーシーケンスを出力せず、プレーンなカンマ区切りの HEX を出力します（パイプやログ向け）。
+```bash
+npx -y -- splatone@latest color --no-ansi 6 3
+```
 ## ダウンロード
 ### 画像のダウンロード
 * 結果の地図を画像(PNG形式)としてダウンロードするには、画面右下のアイコンをクリックしてください。
+  * 注意: 画像には凡例が含まれません
-![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/icon_image_download.png?raw=true)
+![](assets/icon_image_download.png?raw=true)
 ### データのダウンロード
 * クロール結果をデータとしてダウンロードしたい場合は凡例の下にあるエクスポートボタンをクリックしてください。
+  * 指定したビジュアライザ毎にFeature Collectionとして結果が格納されます。
+  * クローリングしたデータそのものが欲しい場合はBulky等、単純なビジュアライザを指定してください。
-![](https://github.com/YokoyamaLab/Splatone/blob/main/assets/icon_data_export.png?raw=true)
+![](assets/icon_data_export.png?raw=true)
 ### 広範囲なデータ収集例
-* あまりにも大きいとFlickrから一時的にBANされることがありますので注意してください。
+* クエリ数はおおよそ1 query/secに調整されますので、時間はかかりますが大量のデータを収集する事も可能です。
 ![](/assets/screenshot_massive_points_bulky.png)

package/assets/screenshot_florida_hex_majorityr.png ADDED Viewed

Binary file

package/assets/screenshot_venice_simple.png ADDED Viewed

Binary file

package/color.js ADDED Viewed

@@ -0,0 +1,95 @@
+import paletteGenerator from './lib/paletteGenerator.js';
+// Usage: node color.js <count> <sets>
+// Example: node color.js 6 3
+// Outputs HTML lines, each line is one set: comma-separated spans where
+// each span shows the hex string in that color (text color set to the color).
+function usage() {
+    console.log('Usage: node color.js <count> <sets>');
+    console.log('  count: number of colors per set (default 8)');
+    console.log('  sets: number of sets to generate (default 1)');
+    console.log('  --no-ansi: disable ANSI color escapes and output plain comma-separated HEX values');
+}
+async function main() {
+    let argv = process.argv.slice(2) || [];
+    if (argv.length === 0) {
+        usage();
+        return;
+    }
+    const noAnsi = argv.indexOf('--no-ansi') !== -1;
+    argv = argv.filter(a => a !== '--no-ansi');
+    const count = parseInt(argv[0], 10) || 8;
+    const sets = parseInt(argv[1], 10) || 1;
+    for (let s = 0; s < sets; s++) {
+        // Try to generate a palette via paletteGenerator; if it fails, fallback to HSL per-set
+        let cols = null;
+        try {
+            if (typeof Math.random.seed === 'function') {
+                Math.random.seed(Date.now() + s);
+            }
+            cols = paletteGenerator.generate(
+                count,
+                function (color) {
+                    var hcl = color.hcl();
+                    return hcl[0] >= 0 && hcl[0] <= 360
+                        && hcl[1] >= 54.96 && hcl[1] <= 134
+                        && hcl[2] >= 19.14 && hcl[2] <= 90.23;
+                },
+                true,
+                50,
+                false,
+                'CMC'
+            );
+        } catch (e) {
+            cols = null;
+        }
+        function hslToHex(h, s, l) {
+            s = Math.max(0, Math.min(1, s));
+            l = Math.max(0, Math.min(1, l));
+            const a = s * Math.min(l, 1 - l);
+            function f(n) {
+                const k = (n + h / 30) % 12;
+                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+                return Math.round(255 * color).toString(16).padStart(2, '0');
+            }
+            return `#${f(0)}${f(8)}${f(4)}`;
+        }
+        const hexes = (cols ? cols.map(c => (typeof c.hex === 'function' ? c.hex() : String(c))) :
+            Array.from({ length: count }, (_, i) => {
+                const hue = Math.round(((i / count) * 360 + s * 37) % 360);
+                return hslToHex(hue, 0.65, 0.5);
+            })
+        );
+        if (noAnsi) {
+            console.log(hexes.join(','));
+        } else {
+            const esc = (r, g, b) => `\u001b[38;2;${r};${g};${b}m`;
+            const reset = '\u001b[0m';
+            function hexToRgb(hex) {
+                const h = hex.replace('#', '');
+                const bigint = parseInt(h, 16);
+                return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
+            }
+            const out = hexes.map(h => {
+                const rgb = hexToRgb(h);
+                return `${esc(...rgb)}${h}${reset}`;
+            }).join(',');
+            console.log(out);
+        }
+    }
+}
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});

package/crawler.js CHANGED Viewed

@@ -30,6 +30,7 @@ import { hideBin } from 'yargs/helpers';
 // -------------------------------
 import { loadPlugins } from './lib/pluginLoader.js';
 import paletteGenerator from './lib/paletteGenerator.js';
+import chroma from 'chroma-js';
 import { dfsObject, bboxSize, saveGeoJsonObjectAsStream, buildPluginsOptions, loadAPIKey, buildVisualizersOptions } from '#lib/splatone';
 const __filename = fileURLToPath(import.meta.url);
@@ -116,12 +117,13 @@ try {
     express.static(resolve(VIZ_BASE, name, 'public'))(req, res, next);
   });
   // コマンド例
-  // node crawler.js -p flickr -o '{"flickr":{"API_KEY":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}}' -k "商業=shop,souvenir,market,supermarket,pharmacy,store,department|食べ物=food,drink,restaurant,cafe,bar|美術 館=museum,art,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky
-  // node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|橋梁=bridge,overpass,flyover,aqueduct,trestle|通路=street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,sanctuary,chapel,cathedral,basilica,minster,abbey,temple,shrine" --vis-bulky
+  // node crawler.js -p flickr -o '{"flickr":{"API_KEY":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}}' -k "商業=shop,souvenir,market,supermarket,pharmacy,store,department|食べ物=food,drink,restaurant,cafe,bar|美術館=museum,art,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky
-  // node crawler.js -p flickr -k "水辺=sea,ocean,beach,river,delta,lake,coast,creek|緑地=forest,woods,turf,lawn,jungle,trees,rainforest,grove,savanna,steppe|砂漠=desert,dune,outback,barren,wasteland" --vis-bulky --filed --p-flickr-Haste --p-flickr-DateMode=taken
+  // node crawler.js -p flickr -k "水域=canal,channel,waterway,river,stream,watercourse,sea,ocean,gulf,bay,strait,lagoon,offshore|緑地=forest,woods,turf,lawn,jungle,trees,rainforest,grove,savanna,steppe|交通=bridge,overpass,flyover,aqueduct,trestle,street,road,thoroughfare,roadway,avenue,boulevard,lane,alley,roadway,carriageway,highway,motorway|ランドマーク=church,chapel,cathedral,basilica,minster,temple,shrine,neon,theater,statue,museum,sculpture,zoo,aquarium,observatory" --vis-bulky
-  // node crawler.js -p flickr -k "商業=shop,souvenir,market,supermarket,pharmacy,drugstore,store,department,kiosk,bazaar,bookstore,cinema,showroom|飲食=bakery,food,drink,restaurant,cafe,bar,beer,wine,whiskey|文化施設=museum,gallery,theater,concert,library,monument,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky --p-flickr-Hates --p-flickr-DateMode=taken
+  // node crawler.js -p flickr -k "水辺=sea,ocean,beach,river,delta,lake,coast,creek|緑地=forest,woods,turf,lawn,jungle,trees,rainforest,grove,savanna,steppe|砂漠=desert,dune,outback,barren,wasteland" --vis-bulky
+  // node crawler.js -p flickr -k "商業=shop,souvenir,market,supermarket,pharmacy,drugstore,store,department,kiosk,bazaar,bookstore,cinema,showroom|飲食=bakery,food,drink,restaurant,cafe,bar,beer,wine,whiskey|文化施設=museum,gallery,theater,concert,library,monument,exhibition,expo,sculpture,heritage|公園=park,garden,flower,green,pond,playground" --vis-bulky
   let yargv = await yargs(hideBin(process.argv))
     .strict()                        // 未定義オプションはエラー
@@ -134,13 +136,6 @@ try {
       describe: '実行するプラグイン',
       type: 'string'
     })
-    .option('options', {
-      group: 'Basic Options',
-      alias: 'o',
-      default: '{}',
-      describe: 'プラグインオプション',
-      type: 'string'
-    })
     .option('keywords', {
       group: 'Basic Options',
       alias: 'k',
@@ -173,10 +168,12 @@ try {
     })
     .version()
     .coerce({
+      /*
       options: ((name) => (v) => {
         try { return JSON.parse(v); }
         catch (e) { throw new Error(`--${name}: JSON エラー: ${e.message}`); }
       })()
+      */
     });
   plugins.list().forEach(async (plug) => {
     yargv = await plugins.call(plug, "yargv", yargv);
@@ -384,12 +381,27 @@ try {
         }
         //カテゴリ生成
+        // キーにカラー指定が含まれている場合 (例: "水域#ff0000=canal,river") は
+        // カラー部分をキー名から取り除き、表示用の純粋なラベルをキーとして返す。
+        // 明示色があれば explicitColors に記録しておき、後でパレット生成時に利用する。
+        const explicitColors = {};
         const categorize = (tags) => {
           let cats = {};
           tags.split('|').forEach((tag_set, i) => {
             const key_val = tag_set.split("=", 2);
-            const key = (key_val.length == 1) ? key_val[0].split(",")[0] : key_val[0];
+            // key_raw は元のキー（色コードを含む可能性あり）
+            const key_raw = (key_val.length == 1) ? key_val[0].split(",")[0] : key_val[0];
             const val = (key_val.length == 1) ? key_val[0] : key_val[1];
+            // カラー指定を抽出してキー名から除去
+            const hexMatch = String(key_raw).match(/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/);
+            let key = key_raw;
+            if (hexMatch) {
+              const explicit = hexMatch[0];
+              // display label から色コードを除去してトリム
+              key = key_raw.replace(explicit, '').trim();
+              // store explicit color for this cleaned key
+              explicitColors[key] = explicit;
+            }
             cats[key] = val;
           });
           return cats;
@@ -413,12 +425,22 @@ try {
         // Sort colors by differenciation first
         const palette = paletteGenerator.diffSort(colors, 'Default');
         const splatonePalette = Object.fromEntries(Object.entries(categories).map(([k, v]) => {
-          const color = palette.pop()
-          const colors = {
-            "color": color.hex(),
-            "darken": color.darken(2).hex(),
-            "brighten": color.brighten(2).hex()
+          // explicitColors にあればその色を使う（キーは既に色コードを取り除いた表示名）
+          if (explicitColors.hasOwnProperty(k)) {
+            const explicit = explicitColors[k];
+            const colors = {
+              color: chroma(explicit).hex(),
+              darken: chroma(explicit).darken(2).hex(),
+              brighten: chroma(explicit).brighten(2).hex()
+            };
+            return [k, colors];
           }
+          const color = palette.pop();
+          const colors = {
+            color: color.hex(),
+            darken: color.darken(2).hex(),
+            brighten: color.brighten(2).hex()
+          };
           return [k, colors];
         }));

package/lib/paletteGenerator.js CHANGED Viewed

@@ -42,7 +42,6 @@ Math.random.seed = (function me (s) {
 	Math.random.seed = me;
 	return me;
 })(0);
-Math.random.seed(25);
 const paletteGenerator = (function(undefined){
 	const ns = {}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "splatone",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Multi-layer Composite Heatmap",
   "homepage": "https://github.com/YokoyamaLab/Splatone#readme",
   "bugs": {
@@ -15,7 +15,8 @@
   "type": "module",
   "main": "index.js",
   "bin": {
-    "crawler": "./crawler.js"
+    "crawler": "./crawler.js",
+    "color": "./color.js"
   },
   "imports": {
     "#lib/*": "./lib/*.js"

package/visualizer/bulky/node.js CHANGED Viewed

@@ -18,7 +18,7 @@ export default class BulkyVisualizer extends VisualizerBase {
         return yargv.option(this.argKey('Radius'), {
             group: 'For ' + this.id + ' Visualizer',
             type: 'number',
-            description: 'Point Markerの直径',
+            description: 'Point Markerの半径',
             default: 5
         }).option(this.argKey('Stroke'), {
             group: 'For ' + this.id + ' Visualizer',

package/visualizer/majority-hex/node.js ADDED Viewed

@@ -0,0 +1,214 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { VisualizerBase } from '../../lib/VisualizerBase.js';
+import { featureCollection } from "@turf/turf";
+export default class MajorityHex extends VisualizerBase {
+    static name = 'MajorityHex Visualizer';
+    static version = '0.0.2';
+    static description = "HexGrid内で最も出現頻度が高いカテゴリの色で彩色。Hexapartiteモードで6分割パイチャート表示。透明度は全体で正規化。";
+    constructor() {
+        super();
+        this.id = path.basename(path.dirname(fileURLToPath(import.meta.url)));
+    }
+    async yargv(yargv) {
+        return yargv.option(this.argKey('Hexapartite'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'boolean',
+            description: '中のカテゴリの頻度に応じて六角形を分割色彩',
+            default: false
+        }).option(this.argKey('HexOpacity'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: '六角形の線の透明度',
+            default: 1
+        }).option(this.argKey('HexWeight'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: '六角形の線の太さ',
+            default: 1
+        }).option(this.argKey('MaxOpacity'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: '正規化後の最大塗り透明度',
+            default: 0.9
+        }).option(this.argKey('MinOpacity'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: '正規化後の最小塗り透明度',
+            default: 0.5
+        });
+    }
+    getFutureCollection(result, target, visOptions) {
+        const hexIndex = {};
+        if (target && target.hex && Array.isArray(target.hex.features)) {
+            for (const hexF of target.hex.features) {
+                const id = hexF.properties && hexF.properties.hexId;
+                if (id != null) hexIndex[id] = hexF;
+            }
+        }
+        // Build index of triangles by triangleId
+        const triIndex = {};
+        if (target && target.triangles && Array.isArray(target.triangles.features)) {
+            for (const triF of target.triangles.features) {
+                const triId = triF.properties && triF.properties.triangleId;
+                if (triId != null) triIndex[triId] = triF;
+            }
+        }
+        const hexDataList = [];
+        let maxTotal = 0;
+        let globalMaxCategoryCount = 0;  // Track max category count across entire grid
+        for (const hexId in result) {
+            const cats = result[hexId] || {};
+            let total = 0;
+            let maxCat = null;
+            let maxCount = -1;
+            for (const cat in cats) {
+                const count = (cats[cat]?.items?.features?.length) ?? 0;
+                total += count;
+                if (count > maxCount) {
+                    maxCount = count;
+                    maxCat = cat;
+                }
+                // Track global max
+                if (count > globalMaxCategoryCount) {
+                    globalMaxCategoryCount = count;
+                }
+            }
+            if (total > 0) {
+                hexDataList.push({ hexId, cats, maxCat, maxCount, total });
+                if (total > maxTotal) {
+                    maxTotal = total;
+                }
+            }
+        }
+        const out = { hex: [], triangles: [] };
+        const maxOp = (visOptions && visOptions.MaxOpacity) ?? 0.8;
+        const minOp = (visOptions && visOptions.MinOpacity) ?? 0.1;
+        const opRange = maxOp - minOp;
+        for (const hexData of hexDataList) {
+            const hexFeature = hexIndex[hexData.hexId];
+            if (!hexFeature) continue;
+            const f = JSON.parse(JSON.stringify(hexFeature));
+            f.properties = f.properties || {};
+            f.properties.majorityCategory = hexData.maxCat;
+            f.properties.majorityCount = hexData.maxCount;
+            f.properties.totalCount = hexData.total;
+            const normalizedOpacity = maxTotal > 0
+                ? minOp + (hexData.total / maxTotal) * opRange
+                : minOp;
+            const palette = target?.splatonePalette || {};
+            const pal = hexData.maxCat ? (palette[hexData.maxCat] || {}) : {};
+            f.properties.fill = true;
+            f.properties.fillColor = pal.color || '#888888';
+            f.properties.fillOpacity = normalizedOpacity;
+            f.properties.color = pal.darken || '#333333';
+            f.properties.weight = (visOptions && visOptions.HexWeight) ?? 1;
+            f.properties.opacity = (visOptions && visOptions.HexOpacity) ?? 1;
+            if (visOptions && visOptions.Hexapartite) {
+                f.properties.hexPartite = true;
+                f.properties.breakdown = Object.fromEntries(
+                    Object.entries(hexData.cats).map(([c, v]) => [c, (v?.items?.features?.length) ?? 0])
+                );
+                f.properties.categoryColors = Object.fromEntries(
+                    Object.entries(hexData.cats).map(([c]) => [c, palette[c]?.color || '#888888'])
+                );
+                // Store global max for opacity normalization in web.js fallback
+                f.properties.globalMaxCategoryCount = globalMaxCategoryCount;
+            }
+            out.hex.push(f);
+            // Add triangles for Hexapartite mode
+            if (visOptions && visOptions.Hexapartite && hexFeature.properties && hexFeature.properties.triIds) {
+                const triIds = hexFeature.properties.triIds;
+                // Extract numeric counts from category objects
+                const catEntries = Object.entries(hexData.cats).map(([cat, catObj]) => [cat, catObj.total]).sort((a, b) => b[1] - a[1]);
+                const total = catEntries.reduce((sum, [_, count]) => sum + count, 0);
+                // Compute slices for each category: ratio < 1/6 => 0 slices, 1/6 <= ratio < 2/6 => 1 slice, etc.
+                // Also store in which order categories should be placed (clockwise from north)
+                const catSliceList = [];  // [{category, count, sliceCount, opacity}, ...]
+                let totalSlices = 0;
+                // First pass: allocate slices using floor
+                for (const [category, count] of catEntries) {
+                    const ratio = total > 0 ? count / total : 0;
+                    const sliceCount = Math.floor(ratio * 6);  // 0-6 slices
+                    // Compute opacity based on GLOBAL max category count:
+                    // MinOpacity + (count / globalMaxCategoryCount) * (MaxOpacity - MinOpacity)
+                    const sliceOpacity = minOp + (count / Math.max(globalMaxCategoryCount, 1)) * opRange;
+                    catSliceList.push({ category, count, sliceCount, opacity: sliceOpacity });
+                    totalSlices += sliceCount;
+                }
+                // Second pass: distribute remaining slices (6 - totalSlices) to categories with largest remainders
+                if (totalSlices < 6) {
+                    const remainders = catEntries.map(([category, count], idx) => {
+                        const ratio = total > 0 ? count / total : 0;
+                        const remainder = (ratio * 6) - Math.floor(ratio * 6);
+                        return { idx, remainder };
+                    }).sort((a, b) => b.remainder - a.remainder);
+                    let remaining = 6 - totalSlices;
+                    for (let i = 0; i < remainders.length && remaining > 0; i++) {
+                        catSliceList[remainders[i].idx].sliceCount++;
+                        remaining--;
+                    }
+                }
+                // Arrange slices clockwise starting from top (triIdx 0 = north/top)
+                let triIdx = 0;
+                for (const catSlice of catSliceList) {
+                    for (let slicePos = 0; slicePos < catSlice.sliceCount && triIdx < triIds.length; slicePos++) {
+                        const triId = triIds[triIdx];
+                        const triFeature = triIndex[triId];
+                        if (!triFeature) {
+                            triIdx++;
+                            continue;
+                        }
+                        const triCopy = JSON.parse(JSON.stringify(triFeature));
+                        triCopy.properties = triCopy.properties || {};
+                        triCopy.properties.category = catSlice.category;
+                        triCopy.properties.categoryCount = catSlice.count;
+                        triCopy.properties.slicePosition = slicePos;  // which slice of this category (0-indexed)
+                        triCopy.properties.sliceCount = catSlice.sliceCount;  // total slices for this category
+                        triCopy.properties.parentHexId = hexData.hexId;
+                        triCopy.properties.fill = true;
+                        const catColor = palette[catSlice.category]?.color || '#888888';
+                        triCopy.properties.fillColor = catColor;
+                        triCopy.properties.fillOpacity = catSlice.opacity;
+                        triCopy.properties.color = palette[catSlice.category]?.darken || '#333333';
+                        triCopy.properties.weight = (visOptions && visOptions.HexWeight) ?? 1;
+                        triCopy.properties.opacity = (visOptions && visOptions.HexOpacity) ?? 1;
+                        out.triangles.push(triCopy);
+                        triIdx++;
+                    }
+                }
+            }
+        }
+        const outputCollections = {};
+        for (const [k, v] of Object.entries(out)) {
+            outputCollections[k] = featureCollection(v);
+        }
+        return outputCollections;
+    }
+}

package/visualizer/majority-hex/web.js ADDED Viewed

@@ -0,0 +1,251 @@
+let booted = false;
+// keep last received geojson so helper renderers can access triangles/outlines
+let lastGeojson = null;
+// keep last visOptions for opacity bounds
+let lastVisOptions = {};
+export default async function main(map, geojson, options = {}) {
+    if (booted) return;
+    booted = true;
+    const layers = {};
+    // stash geojson and visOptions for render helpers
+    lastGeojson = geojson;
+    lastVisOptions = (options && options.visOptions) || {};
+    // Render hex layer with Leaflet GeoJSON
+    if (geojson && geojson.hex) {
+        const isHexapartite = options.visOptions && options.visOptions.Hexapartite;
+        // If Hexapartite mode, render triangles directly
+        if (isHexapartite) {
+            // Create a group to hold triangles + optional outlines
+            const group = L.featureGroup();
+            if (geojson && geojson.triangles && geojson.triangles.features) {
+                const triLayer = L.geoJSON(geojson.triangles, {
+                    style: (feature) => {
+                        const fillColor = feature.properties?.fillColor || '#888888';
+                        return {
+                            fill: true,
+                            fillColor: fillColor,
+                            fillOpacity: feature.properties?.fillOpacity ?? 0.5,
+                            color: feature.properties?.color || '#333333',
+                            weight: feature.properties?.weight || 1,
+                            opacity: feature.properties?.opacity ?? 1,
+                        };
+                    },
+                    onEachFeature: (feature, layer) => {
+                        const cat = feature.properties?.category || 'Unknown';
+                        const count = feature.properties?.categoryCount ?? 0;
+                        const popupText = `Category: ${cat}<br/>Count: ${count}`;
+                        layer.bindPopup(popupText);
+                    }
+                });
+                triLayer.addTo(group);
+            }
+            // optionally add hex outlines so user can see hex borders
+            if (geojson && geojson.hex && geojson.hex.features) {
+                const outline = L.geoJSON(geojson.hex, {
+                    style: (feature) => ({
+                        color: feature.properties.color || '#333333',
+                        weight: feature.properties.weight || 1,
+                        opacity: feature.properties.opacity ?? 1,
+                        fill: false
+                    })
+                });
+                outline.addTo(group);
+            }
+            group.addTo(map);
+            layers['[MajorityHex]'] = group;
+        } else {
+            // Standard solid color hex rendering
+            const hexLayer = renderHexLayer(map, geojson.hex);
+            if (hexLayer) layers['[MajorityHex]'] = hexLayer;
+        }
+    }
+    return layers;
+}
+/**
+ * Render standard hex layer (solid color)
+ */
+function renderHexLayer(map, hexFeatureCollection) {
+    const layer = L.geoJSON(hexFeatureCollection, {
+        style: (feature) => {
+            return {
+                color: feature.properties.color,
+                weight: feature.properties.weight,
+                opacity: feature.properties.opacity,
+                fill: feature.properties.fill,
+                fillColor: feature.properties.fillColor,
+                fillOpacity: feature.properties.fillOpacity
+            };
+        },
+        onEachFeature: (feature, layer) => {
+            const majorityCategory = feature.properties.majorityCategory;
+            const totalCount = feature.properties.totalCount;
+            const majorityCount = feature.properties.majorityCount;
+            const html = `<strong>${majorityCategory}</strong><br/>Data: ${majorityCount}/${totalCount}`;
+            layer.bindTooltip(html, { direction: 'top', opacity: 0.9 });
+        }
+    });
+    layer.addTo(map);
+    return layer;
+}
+/**
+ * Render Hexapartite layer: 6-slice pie chart representation using pre-computed triangles
+ */
+function renderHexPartiteLayer(map, hexFeatureCollection) {
+    // Build a FeatureGroup containing pre-computed triangle slices (if available)
+    // plus optional hex outlines/tooltips. Do NOT add to map here; return the group so
+    // callers can add it to the map or layer control.
+        // Return a Leaflet layer (FeatureGroup). This avoids passing booleans to
+        // layer controls elsewhere. If precomputed triangles are not available
+        // (they are rendered in main when present), fall back to creating
+        // center-to-edge triangles per hex so the UI still shows a Hexapartite view.
+        const group = L.featureGroup();
+        if (!hexFeatureCollection || !Array.isArray(hexFeatureCollection.features)) {
+            return group;
+        }
+        const features = hexFeatureCollection.features;
+        for (const feature of features) {
+            const breakdown = feature.properties?.breakdown || {};
+            const categoryColors = feature.properties?.categoryColors || {};
+            const hexOutlineColor = feature.properties?.color || '#333333';
+            const hexOutlineWeight = feature.properties?.weight || 1;
+            const hexOutlineOpacity = feature.properties?.opacity ?? 1;
+            const coords = feature.geometry?.coordinates?.[0];
+            if (!coords || coords.length < 3) continue;
+            // normalize ring
+            const last = coords[coords.length - 1];
+            const first = coords[0];
+            const closed = last && first && last[0] === first[0] && last[1] === first[1];
+            const n = closed ? coords.length - 1 : coords.length;
+            // centroid
+            let sumLng = 0, sumLat = 0;
+            for (let i = 0; i < n; i++) {
+                sumLng += coords[i][0];
+                sumLat += coords[i][1];
+            }
+            const center = [sumLng / n, sumLat / n];
+            const catEntries = Object.entries(breakdown).sort((a, b) => b[1] - a[1]);
+            const total = catEntries.reduce((s, [, c]) => s + c, 0);
+            if (total === 0) continue;
+            // Get opacity bounds from lastVisOptions (same as node.js)
+            const minOp = (lastVisOptions && lastVisOptions.MinOpacity) ?? 0.1;
+            const maxOp = (lastVisOptions && lastVisOptions.MaxOpacity) ?? 0.8;
+            const opRange = maxOp - minOp;
+            // Get global max count from hex properties (set by node.js)
+            const globalMaxCount = feature.properties?.globalMaxCategoryCount ?? 0;
+            // Compute slice allocation per category: ratio < 1/6 => 0, 1/6 <= ratio < 2/6 => 1, etc.
+            const catSliceList = [];
+            let totalSlices = 0;
+            for (const [category, count] of catEntries) {
+                const ratio = total > 0 ? count / total : 0;
+                const sliceCount = Math.floor(ratio * 6);
+                if (sliceCount > 0) {
+                    // Opacity based on GLOBAL max category count (same as node.js)
+                    const sliceOpacity = minOp + (count / Math.max(globalMaxCount, 1)) * opRange;
+                    catSliceList.push({ category, count, sliceCount, opacity: sliceOpacity });
+                    totalSlices += sliceCount;
+                }
+            }
+            // Normalize if totalSlices > 6
+            if (totalSlices > 6) {
+                const scale = 6 / totalSlices;
+                let allottedSlices = 0;
+                for (let i = 0; i < catSliceList.length; i++) {
+                    const newCount = Math.floor(catSliceList[i].sliceCount * scale);
+                    allottedSlices += newCount;
+                    catSliceList[i].sliceCount = newCount;
+                }
+                let remaining = 6 - allottedSlices;
+                for (let i = 0; i < catSliceList.length && remaining > 0; i++) {
+                    if (catSliceList[i].sliceCount < Math.ceil(catSliceList[i].count / total * 6)) {
+                        catSliceList[i].sliceCount++;
+                        remaining--;
+                    }
+                }
+            }
+            // Create triangles in clockwise order starting from north (triIdx 0)
+            let triIdx = 0;
+            for (const catSlice of catSliceList) {
+                for (let slicePos = 0; slicePos < catSlice.sliceCount && triIdx < n; slicePos++) {
+                    const v1 = coords[triIdx];
+                    const v2 = coords[(triIdx + 1) % n];
+                    const triangle = {
+                        type: 'Feature',
+                        geometry: {
+                            type: 'Polygon',
+                            coordinates: [[[center[0], center[1]], [v1[0], v1[1]], [v2[0], v2[1]], [center[0], center[1]]]]
+                        },
+                        properties: {
+                            category: catSlice.category,
+                            categoryCount: catSlice.count,
+                            slicePosition: slicePos,
+                            sliceCount: catSlice.sliceCount,
+                            fill: true,
+                            fillColor: categoryColors[catSlice.category] || '#888888',
+                            fillOpacity: catSlice.opacity,
+                            color: hexOutlineColor,
+                            weight: 0.5,
+                            opacity: hexOutlineOpacity
+                        }
+                    };
+                    L.geoJSON(triangle, {
+                        style: (f) => ({
+                            fill: true,
+                            fillColor: f.properties.fillColor,
+                            fillOpacity: f.properties.fillOpacity,
+                            color: f.properties.color,
+                            weight: f.properties.weight,
+                            opacity: f.properties.opacity
+                        })
+                    }).addTo(group);
+                    triIdx++;
+                }
+            }
+        }
+        // add outlines (non-filled) for all hexes so borders are visible
+        const outline = L.geoJSON(hexFeatureCollection, {
+            style: (feature) => ({
+                color: feature.properties.color || '#333333',
+                weight: feature.properties.weight || 1,
+                opacity: feature.properties.opacity ?? 1,
+                fill: false
+            }),
+            onEachFeature: (feature, layer) => {
+                const majorityCategory = feature.properties?.majorityCategory;
+                const totalCount = feature.properties?.totalCount;
+                const majorityCount = feature.properties?.majorityCount;
+                const html = `<strong>${majorityCategory}</strong><br/>Data: ${majorityCount}/${totalCount}`;
+                layer.bindTooltip(html, { direction: 'top', opacity: 0.9 });
+            }
+        });
+        outline.addTo(group);
+        group.addTo(map);
+        return group;
+}

package/visualizer/marker-cluster/node.js CHANGED Viewed

@@ -14,7 +14,16 @@ export default class MarkerClusterVisualizer extends VisualizerBase {
         super();
         this.id = path.basename(path.dirname(fileURLToPath(import.meta.url)));//必須(ディレクトリ名がビジュアライザ名)
     }
+    async yargv(yargv) {
+        // 必須項目にすると、このプラグインを使用しない時も必須になります。
+        // 必須項目は作らず、もしプラグインを使う上での制約違反はinitで例外を投げてください。
+        return yargv.option(this.argKey('MaxClusterRadius'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: 'クラスタを構成する範囲(半径)',
+            default: 80
+        });
+    }
     concatFC(fcA, fcB) {
         return {

package/visualizer/marker-cluster/web.js CHANGED Viewed

@@ -3,7 +3,7 @@ export default async function main(map, geojson, options = { palette: {}, visOpt
     if (booted) return;
     booted = true;
-console.log("[VIS OPTIONS]",options.visOptions);
+    console.log("[VIS OPTIONS]", options.visOptions);
     const urls = [
         'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css',
@@ -35,7 +35,7 @@ console.log("[VIS OPTIONS]",options.visOptions);
         const group = L.markerClusterGroup({
             chunkedLoading: true,
             disableClusteringAtZoom: 18,
-            maxClusterRadius: 60,
+            maxClusterRadius:  options.visOptions.MaxClusterRadius,
             spiderfyOnMaxZoom: true,
             showCoverageOnHover: false,
             iconCreateFunction: (cluster) => {

package/assets/screenshot_venice_bulky.png DELETED Viewed

Binary file