インタラクティブマップの形式でデータを視覚化する8つのJavaScriptライブラリ

データの視覚化は、ほとんどすべてのWeb開発者の生活の不可欠な部分となっています。 グラフ、チャート、マップ、ダッシュボードの作成が頭痛の種になったことがない場合は、ちょっと待ってください。確かに、すぐに「クラブ」に参加します。



この記事では、インタラクティブな地理視覚化を構築するための8つの最も興味深い、興味深いと思われるJavaScriptライブラリーの一般的な概念を説明します。 一般に、このようなソリューションは現在多くあり、特定のプロジェクトに最適なソリューションを選択することは、少なくとも時間内に困難な作業になることがあります。 この出版物を使用して、このトピックを理解し始めたばかりの人々の生活を少なくとも少し簡素化しようとします。 ちなみに、これは私の最近のOnextrapixelに関する記事（ 英語の原文 ）を少し修正したものです。







念のため、すぐに明確にします。一般に、地図を作成するためのJavaScriptライブラリは2つのタイプに分類できます。 単純に、 1つ以上のオブジェクトの地理的位置を表示できるものもあります。 このようなタスクでは、Google MapsやOpenStreetMapsなどのマップをソースとして使用できます。 原則として、そのような解決策は十分にあり、それらの作業の結果はおよそ次のとおりです。







もう1つのタイプ（今日はそれについてお話したいと思います）はJavaScriptライブラリであり、その助けを借りて、 美しいインタラクティブマップを作成することでデータの視覚化を行うことができます 。 それらは、異なる地理的地域の値の間の関係、またはオブジェクトの位置に対する相対的な動きなどを示します。 -データ分析とビジネスインテリジェンスの観点から非常に重要なことすべて。

インタラクティブな視覚化マップ用のJavaScriptライブラリ

amMap（amChartsから）

amMapは、 amChartsチームが開発したマップを構築するための特別なJavaScript（HTML5）ライブラリです。 外部の依存関係を必要とせず、美しいコロプレス、バブル、ドット（ポイント）、コネクター、フローマップを簡単に作成でき、多くの便利なインタラクティブ機能をサポートします。



特に、amMapを使用すると、ドリルダウンを使用してマップの1つまたは別の選択した部分に簡単に「突入」することができます。



amMapを開始するには、バイナリを含むZIPファイルをダウンロードする必要があります。 ところで、既にサポートされている各形式（JavaScript / SVG）で455枚のカードが含まれています。 amMap のドキュメントはそれほど大きくなく、大部分は一連の質問と回答に帰着します。



APIの説明： はい 。

依存関係：いいえ。

ライセンス：無料（ブランドカード）または有料（140ドルから）。

AnyMap（AnyChartから）

AnyMapは、 AnyChartによって作成された人気のあるJavaScript（HTML5）データ視覚化ライブラリの1つです。 amMapの場合のように、ヘルプを使用してマップを作成するのに多くの労力は必要ありません。また、外部リソースやサードパーティライブラリ（jQueryなど）を接続する必要もありません。 AnyMapは、必要なシリーズのすべての基本タイプ（コロプレス、バブル、ドット、コネクター、フロー）もサポートしています。



AnyMapの主なインタラクティブ機能には、個々のエリアのより詳細な調査のためのドリルダウン、イベントを処理するためのイベントモデル（ユーザーインタラクティブ機能）、指定された設定に従ってマップを自動的にペイントするためのカラースケールが含まれます。



少し先を見て、私の意見では、AnyMapはamMapやHighmapsよりもD3に似ていると言います。 それは、「ボックス化」ソリューションの機能を組み合わせたものであり、同時に拡張性が高く開発者によって制御されるため、さまざまな要素を追加または変更して視覚化を完全にカスタマイズし、独自のマップを簡単に作成できます。



AnyMapバイナリはZIPファイルであり、多くの例が含まれています。AnyChartのCDNには、GeoJSON、TopoJSON、SHP、SVGなどのさまざまな形式の数百のマップがあります。 ちなみに、このライブラリには豊富なドキュメントとAPIの詳細な説明があり、かなり簡単に理解でき、多くのサンプルが含まれています。



APIの説明： はい 。

依存関係：いいえ。

ライセンス：無料（ブランドカード）または有料（79ドルから）。

D3.js（マイクボストックから）

D3.jsは、強力なオープンソースデータ視覚化ライブラリです。 言及されている他のJavaScriptライブラリとは異なり、D3は創造性を最大限に発揮できるフレームワークです。 ここでは、インタラクティブマップの作成は、たとえばamCharts、AnyChart、またはHighchartsのソリューションほど明白ではありませんが。



特に、図のようにこのような素晴らしいインタラクティブマップを作成するには、かなり多数の資料を学習する必要があります。 私は言わなければならないが、これはそれだけの価値がある。なぜなら、最終的には本当に驚くべき、オリジナルの視覚化を行うことができるからだ。



実際、D3には、動作の完全なカスタマイズ、イベントモデルなど、多くの機能があります。 一般的に、これはWebアプリケーションの理想的なソリューションであると言えます。 残念ながら、D3は独自のカードを提供していません。 これは、オープンソースで個別に検索する必要があることを意味しますが、これは今のところ大きな問題ではありません。



D3にはそのようなドキュメントはありませんが、よく書かれたAPIと多くの異なるチュートリアル、例、その他の有用な資料が文字通りインターネット全体にあります。



APIの説明： はい 。

依存関係：いいえ。

ライセンス：無料。

Google GeoCharts（Googleから）

巨大なGoogleには、データ視覚化用の独自のJavaScriptライブラリであるGoogle Chartがあります。 また、ここではジオチャートと呼ばれるインタラクティブな視覚化マップを構築する可能性も含まれているため、オブジェクトの場所を表示するためだけに必要な通常のマップと混同しないようです。



Google Geochartsには地図が1つしかなく、これは世界の地図です。 ただし、ズームを使用して焦点を合わせる領域を選択できます。



残念ながら、ローカルAPIはスクロール、スケーリング（ズーム）、ドラッグアンドドロップ（ドラッグ）をサポートしていません。 また、Googleは、コロプレスとバブル以外のマップ用の他のタイプのシリーズを提供していません。 かつて、これらの欠点は私を悲しませて、穏やかに言ったが、これはまた肯定的な点であった：結局、私は他のあらゆる種類のライブラリを検索し、研究し始めなければならなかった、そして今、私はあなたとこのマイクロスタディの結果を共有している。



何らかの方法で、GeoChartsは、大規模で複雑な機能を必要としないが、特別な美しさとカスタマイズの代わりに主に速度と安定性を追求する人々とプロジェクトにとって優れたソリューションです。



APIの説明： はい 。

依存関係：いいえ。

ライセンス：無料。

Highmaps（Highsoftから）

Highmapsは、Highsoftの人気のある開発ライブラリであるHighchartsとHighstockの「妹」です。 その主な利点は、すべての利点を備えたオープンソース、小型、高速のレンダリング速度、ドリルダウンなどの幅広いインタラクティブ機能です。



Highmapsでサポートされているシリーズには、コロプレスとバブルがあります。 さらに、このライブラリを使用して、道路、河川、およびコネクタを示す線を描画できます。 ここでは、同じamMapやAnyMapのようにフローカードを作成するのは簡単ではありませんが、



また、HighchartsもHighmapsもjQueryなしでは機能しないため、この依存関係を接続する必要があります（または、もちろん、データ視覚化用の別のライブラリを探す別のオプションがあります-ハハ）。



プラス面として、HighmapsにはSVGおよびGeoJSON形式の多数のマップがあります。 また、豊富なドキュメントも用意されており、あらゆる種類の設定を迅速かつ適切に把握できます。



APIの説明： はい 。

依存関係： jQuery。

ライセンス：無料（ブランドカード）および有料（390ドルから）。

jQuery Mapael（Vincent Brouteによる）

jQuery Mapaelは、動的ベクトルマップを作成するためのもう1つの非常に適切な、優れたオープンソースライブラリです。 jQueryとRaphael JSに基づいているため、サポートするコロプレス、バブル、またはコネクタマップを構築する際には、これらの依存関係に留意する必要があります。



すぐに使用できる一連のマップがMapael リポジトリにあります 。 APIのドキュメントと説明は1つの記事にまとめられていますが、率直に言って、 この詳細なチュートリアルを使用すれば、このライブラリを使い始めるのは非常に簡単です。



APIの説明： はい 。

依存関係： jQueryおよびRaphael。

ライセンス：無料。

jVectorMap（キリル・レベデフ作）

インタラクティブマップ用のjVectorMapライブラリはオープンソースであり、記事にリストされている他の多くのものも同様です。 jQueryなしでは機能しません。 このような外部依存関係により、この（または他の）ライブラリがあまり一般的ではないように思えるかもしれませんが、最近ではjQueryがサイトのJavaScriptライブラリの中で1位になり、人気、および市場シェアによって。



残念ながら、ここで利用できるシリーズの種類はそれほど大きくありません。jVectorMapではコロプレスマップとマーカーマップのみが提供されますが、同時に-このライブラリに当然のこと-それらは非常に適切に作成されます。 さらに、ここではマーカーとして任意の写真を使用できます。また、ドリルダウンや他の多くのインタラクティブな機能もあります。



JVectorMapにはAPIのかなり小さな説明があり、少なくとも私にとっては、通常の形式のドキュメントはありません。 ただし、小さいながらも非常に便利な入門チュートリアルがあります。 カードは使用されますが、GeoJSON形式のみです。



APIの説明： はい 。

依存関係： jQuery。

ライセンス：無料および有料（39ドルから）。

カートグラフ（グレゴール・アイシュ作）

Kartographは、 それに付随するすべての利点を備えた別のオープンソースソリューションです。 このライブラリは、影、ぼかしなどの豊富な視覚効果が特徴です。



また、興味深いのは、従来のコロプレスおよびバブルタイプのシリーズに加えて、3D列（または、いわゆる3Dバー）があることです。



カートグラフには既製のマップのコレクションはありません。 ただし、ライブラリはSVG形式のカードで動作します。 また、地図を作成するためのKartograph.pyユーティリティも提供しています。



Kartographには依存関係があり、Raphael JS（描画エンジンとして使用）およびjQueryなしでは機能しませんが、このライブラリにより、マップの作成プロセスが非常に理解しやすく、問題なく、1つの記事にまとめられたこのライブラリのAPIのドキュメントと説明が非常に簡単になりますプロジェクトに適したインタラクティブな地図を取得すると便利です。



APIの説明： はい 。

依存関係： jQueryおよびRaphael。

ライセンス：無料。

おわりに

インタラクティブマップを使用してデータを視覚化するためにリストしたJavaScriptライブラリはすべて、クロスブラウザです。 （まあ、21世紀には、おそらく他の方法はありませんでした。）Internet Explorer 6などの古いブラウザーをサポートするものもあります（ただし、2010年末には、これがすぐに重要ではなくなることを願っています） x。）



私が言及したすべての無料のライブラリは、インタラクティブなマップを作成するのに非常に優れています。 しかし一方で、彼らは商業的なサポートのような幅広いサポートを提供しておらず、正直なところ、彼らはカスタマイズにそれほど強くありません（もちろん、D3を除いて）。



商業ライブラリといえば-ところで、通常は非商業的および個人的な目的で無料で使用できます-豊富なドキュメントとAPIの説明、およびあらゆる種類の優れたJavaScriptの例/デモの良質なプールのためにAnyMapとHighmapsに言及するしかありません双方向性。



ご清聴ありがとうございました。 この記事が、インタラクティブなマップを介してデータを視覚化するように設計されたトップJavaScriptライブラリの本質を素早く把握することを目標とする人に役立つことを願っています。 コメントであなた自身の考え、結論、理解、そしてもちろんあなたのお気に入りのライブラリの名前を共有してください。突然、あなたの意見では、私はこの記事でそれらにふさわしくない。



みなさん、良い一日を！