ヒートマップ-マップ上の領域内のポイントインジケーターの強度を視覚的に示すカートグラム。 強度は、色と透明度によってコード化されます。 きっとあなたはそのような写真を複数回見たことがあるでしょう。 そのため、このようなカートグラムを作成する必要があるが、手元にデータがない場合はどうでしょう。 Heatmap Painterを使用すると、インタラクティブにデータをカードにアップロードし、将来の使用に備えて結果を保存できます。 このことは非常に興味深いものであり、開発者、アナリスト、デザイナーなど多くの人々にとって有用です。 仕組みと使用方法をお読みください。

仕組み

JavaScriptの内部 ： LeafletライブラリとLeaflet.heatプラグイン。 同等の（重量/強度による）ポイントを追加できる配列があります。 ポイントは削除できます。 描画するときに、座標を持つ配列をJSONとして保存できます。 Githubソース： heatmap-painter 。 Leaflet.heatプラグインには、ポイントの半径、強度、ぼかし、グラデーション（カラースキーム）などのさまざまな視覚表示設定があります。 デフォルトの設定が気に入らない場合は、コードでこれを編集する必要がありますが、突然これらのオプションが必要になった場合は、別のコントロールに配置します。 はい。個々のポイントに拡大できないように、マップのズームを制限することを忘れないでください。そうしないと、「奇妙なパターン」について疑問が生じる場合があります。 または、ドットを追加するときに音を立てます。

使い方

ポイントを追加するには、スペースバーを押しながらマウスを動かします。 ポイントを削除するには、 Ctrl



を押しながらマウスを動かします。 右上隅の保存ボタン。 保存したファイルはdrag'n drop



を使用してドラッグできます。 ハッシュでは、ズームレベルとマップの中心の座標を設定できます。 それだけです。

ユースケース

開発アナリスト

緊急の課題であり、顧客との予定外の4時間の会議の後、実際のデータはまだなく、明日までありません。 少なくとも信じられないほどのスクリーンショットが必要ですが、プロトタイプのデモが必要です。 座って充電する コーヒー クリエイティブで、30分後に結果が得られます。

開発アナリストマネージャー

スクリーンショットが判読できないという言い訳を顧客にすすめる方法を既に検討しています。 そして、メッセンジャーにデモへのリンクが届きます。 5分後、アナリストと開発者はすでに「説得力のある」データを編集しています。 これで、美しいスクリーンショットをプレゼンテーションに描く方法がわかりました。

デザイナー

ハブの記事を読んだら、クールなレイアウト用のヒートマップを使用して美しい写真を作成する方法がわかりました。 はい、Googleで見つけたものではなく、必要な都市があります。

ヘリコプターオペレーター

あなたは地面/屋根に何かを描き、ヘリコプターからそれを取り除くというアイデアを得ました。 現在知っている座標を推定する場所。

コメントで使用する独自のアイデアを書いてください。