GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

【D3.js】地図上にHexbin(六角形)を表示する

     - d3.js ver.3

はてなブックマーク - 【D3.js】地図上にHexbin(六角形)を表示する
Pocket

d3.js map hexbin
地図上に表示するポイントが多くなるとゴチャゴチャして見難くなります。
「そんな時は六角形にまとめて表示すると見やすくなるよ!」と聞いたのでやってみました。

国土数値情報サイトがらいただいた竜巻等の突風(点)情報を表示しています。竜巻等の突風の多いエリア程、色が濃く表示されます。
example

サンプルコード

D3.jsと一緒にHexbinプラグインを読み込んでください。

散布図 Hex表示

Hex表示のみのサンプルです。

はてなブックマーク - 【D3.js】地図上にHexbin(六角形)を表示する
Pocket

 - d3.js ver.3

Comment

  1. […] GUNMA GIS GEEK – 【D3.js】地図上にHexbin(六角形)を表示する […]

  関連記事

東京メトロAPIてすと
東京メトロAPIテスト

example なんだかんだでやっと承認され、東京メトロAPIで遊んでいます。 …

FOSS4G 2014 Hokkaidoに行ってきました。

FOSS4G 2014 HokkaidoにてD3.jsに関する講演を行わせていた …

barchart ui example
D3.jsで棒グラフを広げるUIを作ってみた。

example 棒グラフをクリックしたら、画面いっぱいまで広がって詳細を表示する …

d3_Before_After_Image
【D3.js】Before After Image Slider

example スライダーで2枚の画像を切り替えて比較できる、いわゆる「Befo …

【D3.js】時間毎のアクセス数を可視化

今回は、週ごとと曜日ごとへの並べ変えができるようにしてみました。 データセットの …

ベクタータイルマップの紹介

FOSS4G Advent Calendar 2013 7日目 参加記事です。 …

ベクトルタイルマップ
[D3+Leaflet]国土地理院さん渾身のベクトルタイルで遊んでみた。

ベクトルタイルの提供実験について|国土地理院 FOSS4G 2014 Hokka …

形がかっこいい順に都道府県を並べてみた。

「形がかっこいい」と思う都道府県ランキング – gooランキング G …

【node.js+D3.js】RSSリーダーを作る

feedparserの仕様が変わったため現在動きません。 Googleが酷いこと …

WP-D3
WordPress の記事にD3.jsで作ったグラフ等を埋め込むプラグイン「WP-D3」

見出し1 インストール2 使い方3 余談4 関連 インストール 「プラグイン」メ …