splatone

v0.0.35

Published

3 months ago

Multi-layer Composite Heatmap

0High
0Medium
0Low

bimota

Splatone - Multi-layer Composite Heatmap

概要

SNSのジオタグ付きポストをキーワードに基づいて収集するツールです。キーワードは複数指定し、それぞれのキーワードの出現分布を地図上にマップします。現在は以下のソースに対応しています。

Flickr (provider名: flickr)
Google Places Text Search (provider名: gmap)
Overpass API / OpenStreetMap (provider名: overpass)

集めたデータはキーワード毎に色分けされ地図上で可視化されます。以下の可視化手法に対応しています。

Bulky: クロールした全てのジオタグを小さな点で描画する
Marker Cluster: 密集しているジオタグをクラスタリングしてまとめて表示する
Majority Hex: HexGridの各セルをセル内で最頻出するカテゴリの色で彩色
Pie Charts: Hexセル中心にカテゴリ割合のPie Chartを描画し、カテゴリごとに半径を可変化
Voronoi: HexGrid単位で集約したジオタグからVoronoiセルを生成し、各Hexのポリゴンでクリップして表示
Heat: ヒートマップ
Pie Charts: 円グラフグリッド
DBSCAN: ジオタグをDBSCANクラスタリングし、各クラスタの凸包をポリゴンとして表示

実行例（可視化結果のサンプル）と、プラグイン開発のサンプルは examples/README.md を参照してください。

Change Log

v0.0.33 → v0.0.35

Provider/Visualizer の第三者開発対応

これ以前のログ

使い方

Node.jsをインストール後、npxで実行します。
- npxはnpm上のモジュールをコマンド一つでインストールと実行を行う事ができるコマンドです。

最小コマンド例

providerを一つ、visualizerを一つ以上指定し、複数のキーワードでクロールを開始します。
- provider: flickr
- visualizer: bulky
- キーワード: canal,river|street,alley|bridge
コマンドを実行するとWebブラウザで地図表示されるので、地図上の任意の位置に矩形あるいはポリゴンを描く
- 例えばベネチア
Start Crawlingボタンをクリックしクローリング開始

$ npx -y -p splatone@latest crawler -p flickr -k "canal,river,sea|street,alley|bridge" --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

NPMプラグイン (--plugin)

第三者が NPM で公開した Provider/Visualizer を、実行時に追加してロードできます。

--plugin は「ロードするパッケージ名」の指定です（複数可）。
実際に使う Provider は -p/--provider <id>、Visualizer は --vis-<id> で選択します。
npx 前提の場合、追加パッケージは npx -p <pkg> で同時に取得します。

例: Provider プラグインを追加して使う（hello）

npx -y -p splatone@latest -p splatone-provider-hello crawler \
  --plugin splatone-provider-hello \
  -p hello \
  -k "A=a|B=b" \
  --vis-bulky \
  --p-hello-PointsPerHex 10

例: Visualizer プラグインを追加して使う（simple）

npx -y -p splatone@latest -p splatone-visualizer-simple crawler \
  --plugin splatone-visualizer-simple \
  -p flickr \
  -k "canal,river|street" \
  --vis-simple \
  --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

クローリングしたい都市があらかじめ決まっている時は、都市名で初期表示位置をざっくり指定できますコマンドライン引数、--city を追加します（内部で Nominatim によるジオコーディングを行います）。

ではイタリアのナポリでPizza(🍕)とPiazza(広場)の比較をしてみましょう。

$ npx -y -p splatone@latest crawler -p flickr -k "pizza#FA0000=pizza|piazza#2B89EE=piazza" --vis-bulky --city "Napoli" --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

ブラウズ専用モード

インタラクティブモード

ダウンロードした結果ファイルをブラウザ上にドラック＆ドロップする事で、再クローリング無しにクローリング結果を閲覧するためのモードです。

npx -y -p splatone@latest browse

あるいは

npx -y -p splatone@latest crawl --browse-mode

ブラウザ上に result*.json（crawler が保存したファイル）をドラッグ＆ドロップすると、その場で結果が地図へ描画されます。ズームやパン等Leafletの機能が使えます。
CLI コマンド生成欄には、この結果を生成したコマンドが表示さるため、同じ条件をベースに新たなクエリを発行できます。

デモモード

結果ファイルをコマンドライン引数としてURLで指定するモードです。Splatoneはいくつかのサンプル結果ファイルがGitHub上にあるので、それを画面上に表示する事ができます。もちろん、URLで指定できるところに結果JSONファイルがあれば、任意の結果を読み込むことができます。

npx -y -p splatone@latest browse \
--browse-load-url="https://raw.githubusercontent.com/YokoyamaLab/Splatone/refs/heads/main/examples/bundle-providers/tower-bulky.json"

詳細説明

Provider (クローラー)

Flickr: Flickrのジオタグ付き写真を取得するクローラー

コマンドライン引数

GimmeGimmeモードで取得する写真とそのファイル名について

--p-flickr-GimmeGimme=保存ディレクトリのパスのように指定してください。
- カレントディレクトリに保存する場合は--p-flickr-GimmeGimme=.です
extrasにurl_sq, url_t, url_s, url_q, url_m, url_n, url_z, url_c, url_l, url_oの一つまたは複数が指定されているときは解像度の高いものが保存されます。
ファイル名にジオタグ等を含めていますので画像のみである程度地理的な分析が可能です。
- {カテゴリ名}-{緯度}-{経度}-{撮影時刻UNIX秒}-{owner}-{id}-{サイズ}.jpg

Flickr APIキーの与え方

APIキーは以下の３種類の方法で与える事ができます

--optionに含める
- 上記コマンド例の方法
- flickrの場合は--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"になります。
- [注意] コマンドを他の人と共有する時、APIキーをそのまま渡す事は危険です。
環境変数で渡す
- API_KEY_<provider> という環境変数に格納する (例: API_KEY_flickr)
  - コマンドに毎回含めなくて良くなる。
ファイルで渡す(npxでは不可)
- ルートディレクトリに.API_KEY.<provider>というファイルを作成し保存
  - <provider>はプロバイダー名 (flickr 等) に置き換えてください。
- flickrの場合は.API_KEY.flickrになります。
- optionや環境変数で与えるよりも優先されます。

gmap: Google Places Text Searchを取得するクローラー

Google Maps Places Text Search API を利用して、テキストクエリに合致する POI を Hex 単位で収集します。-p gmap を指定し、--keywords で カテゴリ名=TextSearchクエリ を与えると、カテゴリ名で彩色しながらクエリ文字列を Google に送信します（例: -k "カフェ=cafe tokyo|観光=landmark tokyo"）。検索半径は UI のセルサイズ (--ui-cell-size と --ui-units) をメートル換算した値を自動適用し、API の上限である 50km を超えないようクランプされます。さらに各 Hex の外接 bbox を locationbias=rectangle として付与し、Text Search リクエスト自体が対象 Hex の範囲に収束するよう制御しています（最終結果も Hex 内判定でフィルタ）。

| オプション | 説明 | 型 | デフォルト | | :-- | :-- | :-- | :-- | | --p-gmap-APIKEY | Google Places API キー。省略時は .API_KEY.gmap もしくは API_KEY_gmap 環境変数から読み込み。 | 文字列 | | | --p-gmap-Language | Places API の language パラメータ。 | 文字列 | ja | | --p-gmap-MaxPages | Text Search の最大ページ数 (1〜3)。Google 側の仕様上、最大 3 ページ / 60 件。 | 数値 | 3 | | --p-gmap-ThrottleMaxConcurrent | Google Places リクエストの同時実行本数。 | 数値 | 2 | | --p-gmap-ThrottleMinTimeMs | 連続する Places リクエスト間の最小待機時間 (ミリ秒)。 | 数値 | 500 |

進捗計算は内部定数 (60 件/Hexカテゴリ) を初期期待値として扱い、next_page_token が返らなくなったタイミングで実測件数に合わせて 100% に到達させるハイブリッド方式を用いています。

Places API は 2 ページ目以降を取得する際に 2 秒程度の待ち時間が必要なため、内部で自動的に待機してから次ページのジョブを投入します。返却される地点はカテゴリ × Hex 単位で重複除去され、Flickr 由来のデータと同様に全ビジュアライザへそのまま流れます。

overpass: OpenStreetMapの地点を取得するクローラー

OpenStreetMap の Overpass API を用いて、タグ条件に一致するノード/ウェイ/リレーションを Hex 単位で収集します。-p overpass を指定し、--keywords で カテゴリ名=タグ条件 を与えると、カテゴリ毎に Hex bbox 内へ個別の Overpass クエリを投げます。タグ条件は amenity=restaurant のような key=value 形式を基本とし、複数指定したい場合は , で区切って OR 検索します（例: -k "麺類#D93C3C=amenity=ramen,amenity=noodle_shop"）。node:amenity=cafe のように node|way|relation: プレフィックスを付けると特定の幾何種のみを対象にできます。

| オプション | 説明 | 型 | デフォルト | | :-- | :-- | :-- | :-- | | --p-overpass-Endpoint | 利用する Overpass API interpreter の URL。 | 文字列 | https://overpass-api.de/api/interpreter | | --p-overpass-TimeoutSeconds | Overpass への 1 リクエストあたりのタイムアウト秒数。 | 数値 | 25 | | --p-overpass-MaxRetries | HTTP/ネットワークエラー時にリトライする最大回数。 | 数値 | 3 | | --p-overpass-UserAgent | Overpass API に送信する User-Agent。連絡先付きの文字列を推奨。 | 文字列 | Splatone-Overpass (+https://github.com/YokoyamaLab/Splatone) | | --p-overpass-ThrottleMaxConcurrent | Overpass への同時リクエスト最大数。推奨は 1。 | 数値 | 1 | | --p-overpass-ThrottleMinTimeMs | 連続リクエスト間の待ち時間 (ミリ秒)。 | 数値 | 1500 |

進捗は「カテゴリ内に投入したクエリ数」を 100% とみなし、各クエリのレスポンスを受け取るたびに均等配分で加算します。たとえば 2 カテゴリ × 2 条件 (合計 4 クエリ) の場合、1 クエリ完了ごとに Hex 全体の進捗が 25% ずつ前進します。Overpass は共有リソースであるため、大きな bbox や極端に多いクエリを連続実行する際は時間帯やエンドポイント（市民大・Kumi Systems 等）にも配慮してください。デフォルトでは 1 本ずつ 1.5 秒間隔でシリアライズ送信しますが、必要であれば --p-overpass-Throttle* オプションで上書きできます（ただし連続アクセスしすぎないよう注意）。

$ npx -y -p splatone@latest crawler -p overpass -k "カフェ#ff5f5f=amenity=cafe,amenity=coffee_shop|文化施設#3366ff=tourism=museum,tourism=gallery" --vis-bulky --city "Kyoto"

上記例では京都市内の Hex を対象に、カフェ系と文化施設系の OpenStreetMap POI を 2 つのカテゴリで色分けしながら取得します。逓減処理後のジオメトリは Leaflet 上のどのビジュアライザでも利用できます。

Visualizer (可視化モジュール)

Bulky: 全ての点を地図上にポイントする

全ての点を地図上に表示する。マーカーをクリックすると対応するFlickr写真ページが新しいタブで開く。

コマンド例

クエリは海と山のキーワード検索。上記スクリーンショットは日本のデータ

$ npx -y -p 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: 高密度の地点はマーカーをまとめて表示する

全マーカーを表示すると、地図上がマーカーで埋め尽くされる問題に対して、高密度地点のマーカー群を一つにまとめてマーカーとする手法。ズームレベルに応じて自動的にマーカーが集約される。

コマンド例

クエリは水域と通路・橋梁・ランドマークを色分けしたもの、上記スクリーンショットはベネチア付近のデータ

$ 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: ヒートマップ

出現頻度に基づいて点の影響範囲をガウス分布で定め連続的に彩色するヒートマップ。

コマンド例

クエリは水域・緑地・交通・ランドマークを色分けしたもの。上記スクリーンショットはフロリダ半島全体

$ npx -y -p splatone@latest crawler -p flickr -k "水域#0947ff=canal,river,sea,strait,channel,waterway|交通#00a73d=road,street,alley,sidewalk,bridge|宗教施設#ffb724=chapel,church,cathedral,temple,shrine" --vis-heat --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

コマンドライン引数

| オプション | 説明 | 型 | デフォルト | | :------------------------ | :----------------------------------------------------- | :--- | :--------- | | --v-heat-Radius | ヒートマップブラーの半径（Unitsで指定した距離単位） | 数値 | 50 | | --v-heat-Units | Radiusに使用する距離単位 | 文字列 | meters | | --v-heat-MinOpacity | ヒートマップの最小透明度 | 数値 | 0 | | --v-heat-MaxOpacity | ヒートマップの最大透明度 | 数値 | 1 | | --v-heat-MaxValue | ヒートマップ強度の最大値(未指定時はデータから自動推定) | 数値 | | | --v-heat-WeightThreshold | 半径内に存在する近傍点数（自分以外）がこの値未満の点は描画しない | 数値 | 1 |

Majority Hex: Hexグリッド内の出現頻度に応じた彩色

コマンド例

クエリは水域・緑地・交通・ランドマークを色分けしたもの。上記スクリーンショットはフロリダ半島全体

$ 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"

コマンドライン引数

| オプション | 説明 | 型 | デフォルト | | :------------------------------------ | :----------------------------------------- | :--- | :--------- | | --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として中のカテゴリ頻度に応じて彩色します。

Pie Charts: Hex中心にカテゴリ割合Pie Chartを描画

Hexセル中心に、カテゴリ比率を角度で、グローバル出現数を半径で示すPie Chartを描画します。カテゴリごとに円弧の半径が異なるため、同じHex内でも「世界的にどのカテゴリが多く集まったか」を直感的に比較できます。Pie Chart自体はHex境界内に収まるよう中央へ配置されます。

ズームイン／アウト時にはLeafletのzoomイベントをフックしてPie Chartを再描画し、現在の縮尺でもHex境界にフィットする半径が自動再計算されます。

コマンド例

クエリは水域・交通・宗教施設・緑地を色分け。Hexサイズに応じて自動計算される最大半径を90%まで、最小半径をその40%に設定しています。

$ npx -y -p splatone@latest crawler -p flickr -k "水域#0947ff=canal,river,sea,strait,channel,waterway,pond|交通#aaaaaa=road,street,alley,sidewalk,bridge|宗教施設#ffb724=chapel,church,cathedral,temple,shrine|緑地#00a73d=forest,woods,trees,mountain,garden,turf" --vis-pie-charts --v-pie-charts-MaxRadiusScale=0.9 --v-pie-charts-MinRadiusScale=0.4 --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

コマンドライン引数

| オプション | 説明 | 型 | デフォルト | | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------ | :--- | :--------- | | --v-pie-charts-MaxRadiusScale | Hex内接円半径に対する最大Pie半径の倍率(0-1.5)。1.0でHex境界いっぱい、0.9なら10%余白。 | 数値 | 0.9 | | --v-pie-charts-MinRadiusScale | 最大半径に対する最小Pie半径の倍率(0-1)。カテゴリが存在する場合に確保する下限割合。 | 数値 | 0.25 | | --v-pie-charts-StrokeWidth | Pie Chart外周・扇形境界の線幅(px)。 | 数値 | 1 | | --v-pie-charts-BackgroundOpacity | 最大半径ガイドリングの塗り透明度(0-1)。背景リングの見え方を調整します。 | 数値 | 0.2 |

Pie Chartの最大・最小半径は各Hexのジオメトリから算出した内接円半径に基づき動的に決まり、カテゴリごとの扇形半径は「そのHex内カテゴリ出現数 ÷ 全カテゴリ総数」に比例して拡大します。グローバル最大カテゴリのシェアを1として正規化するため、Hex間でもカテゴリ規模を比較できます。

Voronoi: Hex Gridをベースにしたボロノイ分割

Hex Gridで集約した各セル内のジオタグを種点としてVoronoi分割を行い、生成したポリゴンをHex境界でクリップして表示します。カテゴリカラーと総数はHex集計結果に基づき、最小間隔／最大サイト数の制御で過密な地域も読みやすく整列できます。

コマンド例

クエリは水域・交通・宗教施設・緑地を色分けしたもの。Hex単位で50m以上離れたサイトだけをVoronoiセルとして採用します。上記の例は東京を範囲としたもの。皇居の緑地や墨田川の水域がよく現れている。

$ npx -y -p splatone@latest crawler -p flickr -k "水域#0947ff=canal,river,sea,strait,channel,waterway,pond|交通#aaaaaa=road,street,alley,sidewalk,bridge|宗教施設#ffb724=chapel,church,cathedral,temple,shrine|緑地#00a73d=forest,woods,trees,mountain,garden,turf" --vis-voronoi --v-voronoi-MinSiteSpacingMeters=50　--p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

コマンドライン引数

| オプション | 説明 | 型 | デフォルト | | :---------------------------------------- | :---------------------------------------------------------------------------------------- | :--- | :--------- | | --v-voronoi-MaxSitesPerHex | 1 HexあたりにPoissonサンプリングで残す最大サイト数。0のときは制限なし。 | 数値 | 0 | | --v-voronoi-MinSiteSpacingMeters | Hex内の採用サイト間で確保する最小距離 (メートル)。ジオタグが密集していても空間的に均等化しつつ、MinSiteSpacingMeters範囲内で出現数の多いカテゴリを優先して残す。 | 数値 | 50 |

MinSiteSpacingMetersによる間引きは、各サイト周辺 (MinSiteSpacingMeters以内) の同カテゴリ出現数を優先度として利用するため、同距離内で競合した場合も局所的に密度の高いカテゴリのサイトが採用されやすくなります。一方で密度は低いが他の場所に比べて顕著に出現するカテゴリを見逃す可能性があります。なお、Voronoi図の作成は消費メモリが大きい為、デフォルトでは50m間隔に間引きます。厳密解が必要な場合は--v-voronoi-MinSiteSpacingMeters=0を指定してください。ただし、その場合はヒープを使い果たしてクラッシュする可能性があります。マシンパワーに余裕がある場合はnpx --node-options='--max-old-space-size=10240'のようにヒープサイズを拡大して実行する事も可能です。もう一つのオプション--v-voronoi-MaxSitesPerHexはHex内の最大アイテム数を制限するものです。ポワソンサンプリングに基づいてアイテムを間引きます。MinSiteSpacingMetersと共に、適切な結果が得られるよう調整してください。

DBSCAN: KDE等値線ポリゴンでクラスタを表示

HexGridに集約されたジオタグをカテゴリ毎にDBSCANクラスタリングし、そのクラスタ内部の点群に対してカーネル密度推定（KDE）を実施、指定した密度レベルの等値線を抽出してポリゴン化します。凸包よりも外形を忠実に再現しやすく、Eps/MinPtsでクラスタ粒度を、KernelScale/GridSize/ContourPercentで輪郭の滑らかさや閾値を制御できます。輪郭および塗りのスタイルも調整可能です。このVisualizerはクラスタの等高線を表示するだけですので、Bulkyと併用する事でジオタグも表示できます。

コマンド例

$ npx -y -p splatone@latest crawler -p flickr -k "水域#0947ff=canal,river,sea,strait,channel,waterway,pond|交通#aaaaaa=road,street,alley,sidewalk,bridge|宗教施設#ffb724=chapel,church,cathedral,temple,shrine|緑地#00a73d=forest,woods,trees,mountain,garden,turf" --vis-dbscan --v-dbscan-Eps=0.25　--v-dbscan-MinPts=4 --v-dbscan-KernelScale=0.4 --v-dbscan-GridSize=30 --v-dbscan-ContourPercent=0.05 --vis-bulky --p-flickr-APIKEY="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

コマンドライン引数

| オプション | 説明 | 型 | デフォルト | | :-- | :-- | :-- | :-- | | --v-dbscan-Eps | DBSCANのeps（距離半径）。Unitsで指定した単位を使用 | 数値 | 0.6 | | --v-dbscan-MinPts | クラスタとして扱うために必要な最小ポイント数 | 数値 | 6 | | --v-dbscan-Units | epsの距離単位（kilometers/meters/miles） | 文字列 | kilometers | | --v-dbscan-StrokeWidth | ポリゴン輪郭の太さ | 数値 | 2 | | --v-dbscan-StrokeOpacity | ポリゴン輪郭の透明度 | 数値 | 0.9 | | --v-dbscan-FillOpacity | ポリゴン塗りの透明度 | 数値 | 0.35 | | --v-dbscan-DashArray | LeafletのdashArray指定（例: "4 6"）。空文字で実線 | 文字列 | (空) | | --v-dbscan-KernelScale | KDEカーネル半径をepsの何倍にするか（0.1〜10） | 数値 | 1 | | --v-dbscan-GridSize | KDEグリッドの長辺方向セル数（8〜256） | 数値 | 80 | | --v-dbscan-ContourPercent | 最大密度に対する等値線レベル（0.05〜0.95） | 数値 | 0.4 |

キーワード指定方法

キーワードとはソーシャルデータを検索する単語の事で、複数のキーワードをしていする事で、地理的な出現頻度・分散を比較できます。

比較キーワードの指定

複数のキーワードでジオタグ付きポストを集め分布を比較します。比較キーワードは「|」区切りで指定します。例えばseaとmountainの分布を調べたい場合は以下のようにします。この例では、seaとタグ付けられたポストとmountainとタグ付けられたポストが色分けされて分布を表示します。

-k "sea|mountain"

類語キーワードの指定

seaだけでは集められるポストが限定されるので、同様の意味のキーワードも指定してor検索したいと考えるかもしれません。その場合は「,」で区切ってキーワードを並べる事ができます。これを類語キーワードと呼びます。例えばseaとocean、mountainとmountでor検索したい場合は以下のように指定します。

-k "sea,ocean|mountain,mount"

カテゴリ名の指定

複数の類語キーワードを指定した場合、それらをまとめるカテゴリ名を付ける事ができます。たとえはsea,oceanに『海域』、mountain,mountに『山岳』とカテゴリ名をつけるには以下のように指定します。なお、指定は必須ではありません。指定しない場合はそれぞれ１番目のキーワード(seaとmountain)がカテゴリ名になります。

-k "海域=sea,ocean|山岳=mountain,mount"

カテゴリ毎の色指定

カテゴリの内容に合わせた色を指定したい場合はコマンドライン引数にて行えます。例えば海域を青に、山岳を緑にしたい場合は、カテゴリ名に続けて**#RRGGBB**で指定します。

-k "海域#037dfc=sea,ocean|山岳#7fc266=mountain,mount"

色を簡単に探すための小さなコマンドが付属しています。

色セット生成ツール(color.js)の使い方

このリポジトリには、コマンドラインで色のセットを生成する小さなユーティリティ color.js が含まれています。用途は以下の通りです。

指定した数のカラーパレット（セット）を生成する
ターミナル上で色サンプルを ANSI Truecolor で確認する
プレーンなカンマ区切り HEX リストを出力して他ツールに渡す
使い方（6色のカラーパレットを2セット作りたい）:

npx -y -p splatone@latest color <count> <sets>
# 例: 6色を3セット生成（ターミナルに色付きで表示）
npx -y -p splatone@latest color 6 3

ブラウザでプレビューするか聞かれるのでYとすると、ブラウザ上で実際の色が確認できます。
- カラーピッカーになっていますので、微調整も可能です。
- カラーコードをクリックするとコピーされます。

オプション:
- --no-ansi : ANSI カラーシーケンスを出力せず、プレーンなカンマ区切りの HEX を出力します（パイプやログ向け）。

npx -y -p splatone@latest color --no-ansi 6 3

ダウンロード

画像のダウンロード

結果の地図を画像(PNG形式)としてダウンロードするには、画面右下のアイコンをクリックしてください。
- 注意: 画像には凡例が含まれません

データのダウンロード

クロール結果をデータとしてダウンロードしたい場合は凡例の下にあるエクスポートボタンをクリックしてください。
- 指定したビジュアライザ毎にFeature Collectionとして結果が格納されます。
- クローリングしたデータそのものが欲しい場合はBulky等、単純なビジュアライザを指定してください。

広範囲なデータ収集例

クエリ数はおおよそ1 query/secに調整されますので、時間はかかりますが大量のデータを収集する事も可能です。

プラグイン開発 (Provider/Visualizer)

Splatone は、Provider / Visualizer を NPM パッケージとして配布し、実行時に --plugin で明示ロードできます。

Providerプラグイン要件

パッケージ名: splatone-provider-<id>（<id> は CLI の -p/--provider <id> と一致させるのが推奨）
エントリポイント: パッケージの default export として Provider クラスを公開
- ProviderBase を継承し、少なくとも yargv(), check(), crawl() を実装
- static id を設定（またはコンストラクタで this.id を設定）
worker: Piscina で実行する worker を 必ず同梱し、<pkg>/worker として解決できるようにする
- package.json の exports に "./worker": "./worker.js" を含める（推奨）

最小の exports 例:

{
  "name": "splatone-provider-hello",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./worker": "./worker.js"
  }
}

Visualizerプラグイン要件

パッケージ名: splatone-visualizer-<id>（<id> は CLI の --vis-<id> と一致させるのが推奨）
エントリポイント: パッケージの default export として Visualizer クラスを公開
- VisualizerBase を継承し、少なくとも getFutureCollection() を実装
- static id を設定（またはコンストラクタで this.id を設定）
Web 側エントリ: web.js を同梱し、<pkg>/web として解決できるようにする
- package.json の exports に "./web": "./web.js" を含める（推奨）
任意: public/ ディレクトリを同梱すると、/visualizer/<id>/public/* として配信されます

最小の exports 例:

{
  "name": "splatone-visualizer-simple",
  "type": "module",
  "exports": {
    ".": "./node.js",
    "./web": "./web.js"
  }
}

サンプルプラグイン

このリポジトリには、最小構成のサンプルを同梱しています。

Provider: examples/plugins/splatone-provider-hello/
Visualizer: examples/plugins/splatone-visualizer-simple/

ローカルで試す例（サンプルを npx で追加インストールして実行）:

npx -y -p splatone@latest -p ./examples/plugins/splatone-provider-hello crawler \
  --plugin splatone-provider-hello \
  -p hello \
  -k "A=a|B=b" \
  --vis-bulky

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Splatone - Multi-layer Composite Heatmap

概要

Change Log

v0.0.33 → v0.0.35

使い方

最小コマンド例

NPMプラグイン (--plugin)

ブラウズ専用モード

インタラクティブモード

デモモード

詳細説明

Provider (クローラー)

Flickr: Flickrのジオタグ付き写真を取得するクローラー

コマンドライン引数

GimmeGimmeモードで取得する写真とそのファイル名について

Flickr APIキーの与え方

gmap: Google Places Text Searchを取得するクローラー

overpass: OpenStreetMapの地点を取得するクローラー

Visualizer (可視化モジュール)

Bulky: 全ての点を地図上にポイントする

コマンド例

コマンドライン引数

Marker Cluster: 高密度の地点はマーカーをまとめて表示する

コマンド例

コマンドライン引数

Heat: ヒートマップ

コマンド例

コマンドライン引数

Majority Hex: Hexグリッド内の出現頻度に応じた彩色

コマンド例

コマンドライン引数

Pie Charts: Hex中心にカテゴリ割合Pie Chartを描画

コマンド例

コマンドライン引数

Voronoi: Hex Gridをベースにしたボロノイ分割

コマンド例

コマンドライン引数

DBSCAN: KDE等値線ポリゴンでクラスタを表示

コマンド例

コマンドライン引数

キーワード指定方法

比較キーワードの指定

類語キーワードの指定

カテゴリ名の指定

カテゴリ毎の色指定

色セット生成ツール(color.js)の使い方

ダウンロード

画像のダウンロード

データのダウンロード

広範囲なデータ収集例

プラグイン開発 (Provider/Visualizer)

Providerプラグイン要件

Visualizerプラグイン要件

サンプルプラグイン