splatone 0.0.16 → 0.0.18

package/README.md

@@ -10,9 +10,15 @@ SNSのジオタグ付きポストをキーワードに基づいて収集する
 
 - Bulky: クロールした全てのジオタグを小さな点で描画する
 - Marker Cluster: 密集しているジオタグをクラスタリングしてまとめて表示する
+- Majority Hex: HexGridの各セルをセル内で最頻出するカテゴリの色で彩色
+- Heat: ヒートマップ
 
 ## Change Log
 
+### v0.0.17 →　v0.0.18
+
+* **[可視化モジュール]** ```--vis-heat```追加
+
 ### v0.0.13 →　v0.0.14 →　v0.0.15 →　v0.0.16 →　v0.0.17
 * **[可視化モジュール]** ```--vis-majority-hex```追加
 * 結果の色固定機能追加 (キーワード指定方法を参照の事)
@@ -37,71 +43,6 @@ $ npx -y -p splatone@latest crawler --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]   
-
-Debug
-      --debug-verbose  デバッグ情報出力               [真偽] [デフォルト: false]   
-
-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
-                                               [文字列] [デフォルト: 1763107393]
-      --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  バージョンを表示                                         [真偽]
-
-cold_@bimota-due MINGW64 /c/GitHub/Splatone (61-可視化メソッドmajorityhex)
-$ npx -y -p crawler@latest --help
-[app] [plugin] loaded: flickr@1.0.0
-使い方: crawler.js [options]
-
 Basic Options
   -p, --plugin    実行するプラグイン[文字列] [必須] [選択してください: "flickr"]
   -k, --keywords  検索キーワード(|区切り)                  [文字列] [デフォルト:
@@ -123,13 +64,15 @@ For flickr Plugin
                     [選択してください: "upload", "taken"] [デフォルト: "upload"]
       --p-flickr-Haste     時間軸分割並列処理          [真偽] [デフォルト: true]
       --p-flickr-DateMax   クローリング期間(最大) UNIX TIMEもしくはYYYY-MM-DD
-                                               [文字列] [デフォルト: 1763107399]
+                                               [文字列] [デフォルト: 1763224757]
       --p-flickr-DateMin   クローリング期間(最小) UNIX TIMEもしくはYYYY-MM-DD
                                                [文字列] [デフォルト: 1072882800]
 
 Visualization (最低一つの指定が必須です)
       --vis-bulky           全データをCircleMarkerとして地図上に表示
                                                       [真偽] [デフォルト: false]
+      --vis-heat            カテゴリ毎に異なるレイヤのヒートマップで可視化（色=
+                            カテゴリ色、透明度=頻度） [真偽] [デフォルト: false]
       --vis-majority-hex    HexGrid内で最も出現頻度が高いカテゴリの色で彩色。Hex
                             apartiteモードで6分割パイチャート表示。透明度は全体
                             で正規化。                [真偽] [デフォルト: false]
@@ -144,6 +87,13 @@ For bulky Visualizer
       --v-bulky-Filling      Point Markerの塗りの有無  [真偽] [デフォルト: true]
       --v-bulky-FillOpacity  Point Markerの塗りの透明度 [数値] [デフォルト: 0.5]
 
+For heat Visualizer
+      --v-heat-Radius      ヒートマップブラーの半径  [数値] [デフォルト: 0.0005]
+      --v-heat-MinOpacity  ヒートマップの最小透明度       [数値] [デフォルト: 0]
+      --v-heat-MaxOpacity  ヒートマップの最大透明度       [数値] [デフォルト: 1]
+      --v-heat-MaxValue    ヒートマップ強度の最大値
+                           (未指定時はデータから自動推定)                 [数値]
+
 For majority-hex Visualizer
       --v-majority-hex-Hexapartite  中のカテゴリの頻度に応じて六角形を分割色彩
                                                       [真偽] [デフォルト: false]
@@ -162,7 +112,6 @@ For marker-cluster Visualizer
       --help     ヘルプを表示                                             [真偽]
       --version  バージョンを表示                                         [真偽]
 ```
-
 ## 最小コマンド例
 
 1. *plugin*を一つ、*visualizer*を一つ以上指定し、複数のキーワードでクロールを開始します。
@@ -176,7 +125,7 @@ For marker-cluster Visualizer
 ![](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"
+$ npx -y -p splatone@latest crawler -p flickr -k "canal,river|street,alley|bridge" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
 
 # 詳細説明
@@ -221,7 +170,7 @@ APIキーは以下の３種類の方法で与える事ができます
 #### コマンド例
 * クエリは海と山のキーワード検索。上記スクリーンショットは日本のデータ
 ```shell
-$  npx -y -p splatone@latest crawler -p flickr -k "sea,ocean|mountain,mount" --vis-bulky--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+$ npx -y -p splatone@latest crawler -p flickr -k "sea,ocean|mountain,mount" --vis-bulky--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
 ```
 
 #### コマンドライン引数
@@ -244,13 +193,33 @@ $  npx -y -p splatone@latest crawler -p flickr -k "sea,ocean|mountain,mount" --v
 ```shell
 $ npx -y -p 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         |
 
+### Heat: ヒートマップ
+
+![](assets/screenshot_venice_heat.png?raw=true)
+
+#### コマンド例
+
+* クエリは水域・緑地・交通・ランドマークを色分けしたもの。上記スクリーンショットはフロリダ半島全体
+ 
+```shell
+$ npx -y -p splatone@latest crawler -p flickr -k "canal,river|street,alley|bridge" --vis-heat --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+```
+
+#### コマンドライン引数
+
+| オプション                | 説明                                                   | 型   | デフォルト |
+| :------------------------ | :----------------------------------------------------- | :--- | :--------- |
+| ```--v-heat-Radius```     | ヒートマップブラーの半径                               | 数値 | 0.0005     |
+| ```--v-heat-MinOpacity``` | ヒートマップの最小透明度                               | 数値 | 0          |
+| ```--v-heat-MaxOpacity``` | ヒートマップの最大透明度                               | 数値 | 1          |
+| ```--v-heat-MaxValue```   | ヒートマップ強度の最大値(未指定時はデータから自動推定) | 数値 |            |
+
 ### Majority Hex: Hexグリッド内の出現頻度に応じた彩色
 
 ![](assets/screenshot_florida_hex_majorityr.png?raw=true)
@@ -259,7 +228,7 @@ $ npx -y -p splatone@latest crawler -p flickr -k "水域=canal,channel,waterway,
 * クエリは水域・緑地・交通・ランドマークを色分けしたもの。上記スクリーンショットはフロリダ半島全体
 * 
 ```shell
-$  npx -y -p 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"
+$ npx -y -p 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"
 ```
 
 #### コマンドライン引数
@@ -321,17 +290,17 @@ seaだけでは集められるポストが限定されるので、同様の意
 - 使い方（6色のカラーパレットを2セット作りたい）:
 
 ```bash
- npx -y -psplatone@latest colors <count> <sets>
+npx -y -p splatone@latest color <count> <sets>
 # 例: 6色を3セット生成（ターミナルに色付きで表示）
- npx -y -p splatone@latest colors 6 3
-``` 
+npx -y -p splatone@latest color 6 3
+```
 
 - オプション:
 
 - `--no-ansi` : ANSI カラーシーケンスを出力せず、プレーンなカンマ区切りの HEX を出力します（パイプやログ向け）。
 
 ```bash
- npx -y -p splatone@latest colors --no-ansi 6 3
+npx -y -p splatone@latest color --no-ansi 6 3
 ```
 
 ## ダウンロード

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "splatone",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Multi-layer Composite Heatmap",
   "homepage": "https://github.com/YokoyamaLab/Splatone#readme",
   "bugs": {

package/visualizer/heat/node.js

@@ -0,0 +1,82 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { VisualizerBase } from '../../lib/VisualizerBase.js';
+import { featureCollection } from "@turf/turf";
+
+export default class HeatVisualizer extends VisualizerBase {
+    static name = 'Heat Visualizer';
+    static version = '0.0.0';
+    static description = "カテゴリ毎に異なるレイヤのヒートマップで可視化（色=カテゴリ色、透明度=頻度）";
+
+    constructor() {
+        super();
+        this.id = path.basename(path.dirname(fileURLToPath(import.meta.url)));
+    }
+
+    async yargv(yargv) {
+        return yargv.option(this.argKey('Radius'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: 'ヒートマップブラーの半径',
+            default: 0.0005
+        }).option(this.argKey('MinOpacity'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: 'ヒートマップの最小透明度',
+            default: 0
+        }).option(this.argKey('MaxOpacity'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: 'ヒートマップの最大透明度',
+            default: 1
+        }).option(this.argKey('MaxValue'), {
+            group: 'For ' + this.id + ' Visualizer',
+            type: 'number',
+            description: 'ヒートマップ強度の最大値 (未指定時はデータから自動推定)'
+        });
+    }
+
+    getFutureCollection(result, target, visOptions) {
+        // result: { hexId: { category: { items, ids, final, crawled, total }, ... }, ... }
+        // target: { hex, triangles, categories, splatonePalette }
+        // Build category-based heatmap layers using individual data points (not hex centroids)
+
+        const categories = {};
+
+        // Iterate through all hexes and categories, collecting individual point features
+        for (const hexId in result) {
+            const hexData = result[hexId];
+            for (const cat in hexData) {
+                if (!categories[cat]) {
+                    categories[cat] = [];
+                }
+
+                // Get the actual items (point features) for this category in this hex
+                const items = hexData[cat].items;
+                if (!items || !items.features || items.features.length === 0) continue;
+
+                // Add each individual point feature to the category collection
+                for (const feature of items.features) {
+                    const density = hexData[cat]?.total ?? items.features.length ?? 1;
+                    // Clone the feature and add category property
+                    const pointFeature = {
+                        type: 'Feature',
+                        geometry: feature.geometry,
+                        properties: {
+                            ...feature.properties,
+                            category: cat,
+                            hexId: hexId,
+                            hexDensity: density
+                        }
+                    };
+                    categories[cat].push(pointFeature);
+                }
+            }
+        }
+
+        // Return FeatureCollections per category
+        return Object.fromEntries(
+            Object.entries(categories).map(([k, v]) => [k, featureCollection(v)])
+        );
+    }
+}

package/visualizer/heat/web.js

@@ -0,0 +1,132 @@
+// Heat visualizer dependencies
+const dependencies = [
+    { type: 'script', src: 'https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js' },
+    { type: 'script', src: 'https://raw.githack.com/pa7/heatmap.js/develop/plugins/leaflet-heatmap/leaflet-heatmap.js' }
+];
+
+// Load external dependencies dynamically
+async function loadDependencies() {
+    for (const dep of dependencies) {
+        if (dep.type === 'script') {
+            // Check if already loaded
+            const existing = document.querySelector(`script[src="${dep.src}"]`);
+            if (existing) continue;
+
+            await new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = dep.src;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            });
+        } else if (dep.type === 'link') {
+            // Check if already loaded
+            const existing = document.querySelector(`link[href="${dep.src}"]`);
+            if (existing) continue;
+
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = dep.src;
+            document.head.appendChild(link);
+        }
+    }
+}
+
+let booted = false;
+export default async function main(map, geojson, options = {}) {
+    console.log("[VIS OPTIONS]", options.visOptions);
+    if (booted) return;
+    booted = true;
+
+    // Load dependencies first
+    await loadDependencies();
+
+    const layers = {};
+    const visOpts = options.visOptions || {};
+
+    // Extract category colors from palette (if available)
+    const palette = options.palette || {};
+
+    for (const cat in geojson) {
+        const features = geojson[cat].features || [];
+        if (features.length === 0) continue;
+
+        // Convert features to heatmap data format: { lat, lng, value }
+        const heatmapData = features.map(f => {
+            const coords = f.geometry.coordinates; // [lon, lat]
+            const rawValue = Number(f.properties?.weight ?? f.properties?.count ?? 1);
+            const value = Number.isFinite(rawValue) && rawValue > 0 ? rawValue : 1;
+            return {
+                lat: coords[1],
+                lng: coords[0],
+                value
+            };
+        });
+
+        // Estimate density-based max using originating hex totals as hints
+        const densityHints = features
+            .map(f => Number(f.properties?.hexDensity))
+            .filter(v => Number.isFinite(v) && v > 0);
+
+        const autoMax = densityHints.length > 0
+            ? Math.max(...densityHints)
+            : Math.max(features.length, 1);
+
+        const configuredMax = Number(visOpts.MaxValue);
+        const maxValue = Number.isFinite(configuredMax) && configuredMax > 0
+            ? configuredMax
+            : autoMax;
+
+        // Get category color from palette (fallback to blue)
+        const categoryColor = palette[cat]?.color || '#3388ff';
+
+        // Create gradient using category color
+        // Convert hex to RGB for gradient stops
+        const hexToRgb = (hex) => {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            } : { r: 51, g: 136, b: 255 };
+        };
+
+        const rgb = hexToRgb(categoryColor);
+        const gradient = {
+            0.0: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.0)`,
+            0.2: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
+            0.4: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`,
+            0.6: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`,
+            0.8: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.9)`,
+            1.0: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1.0)`
+        };
+
+        // Create heatmap layer configuration
+        const cfg = {
+            radius: visOpts.Radius || 25,
+            maxOpacity: visOpts.MaxOpacity || 0.8,
+            minOpacity: visOpts.MinOpacity || 0.1,
+            scaleRadius: true,
+            useLocalExtrema: false,
+            latField: 'lat',
+            lngField: 'lng',
+            valueField: 'value',
+            gradient: gradient
+        };
+
+        // Create HeatmapOverlay instance
+    const heatmapLayer = new HeatmapOverlay(cfg);
+
+        // Set data
+        heatmapLayer.setData({
+            max: maxValue,
+            data: heatmapData
+        });
+
+        // Add to map and store reference
+        heatmapLayer.addTo(map);
+        layers[cat] = heatmapLayer;
+    }
+
+    return layers;
+}